O que é o HTML e suas tags? Parte 2: elementos inline e como utilizá-los

Esse artigo compõe uma série de cinco artigos sobre o que é HTML e suas tags:

No artigo anterior vimos o que é HTML e sua estrutura básica. Agora, vamos entender quais são os tipos de elementos que existem em HTML de acordo com seu comportamento na página.

Neste artigo, explicaremos o que são os elementos inline em HTML, como funcionam e traremos exemplos práticos de uso das tags mais comuns, como <span>, <a>, <img>, <br> e <audio>.

Elementos inline

Os elementos inline são uma categoria de elementos HTML que ocupam apenas o espaço necessário para exibir seu conteúdo, sem quebrar a linha automaticamente. Isso significa que eles podem aparecer lado a lado com outros elementos inline dentro de um mesmo bloco de conteúdo, como um parágrafo.

Na prática, esse comportamento é útil para marcar ou inserir pequenos trechos de conteúdo dentro de uma linha, como links, partes de texto destacadas, imagens ou quebras de linha.

Veja um exemplo:

Como você pode ver logo acima, a tag a é um elemento inline, ou seja, ele está ocupando somente o tamanho total do conteúdo, que nesse caso é o texto.

A seguir, vamos conhecer as principais tags inline do HTML, suas funções e exemplos de como utilizá-las no seu código.

<span> – Para que serve a tag span no HTML?

A tag <span> é um elemento inline sem valor semântico próprio, usado como um contêiner genérico para agrupar pequenos trechos de conteúdo dentro de uma linha de texto.

Ela é muito útil quando queremos aplicar estilos com CSS, manipular partes específicas do conteúdo com JavaScript ou organizar trechos de texto sem alterar a estrutura semântica da página.

Embora seja parecida com a <div> por também não carregar significado semântico, a principal diferença está no comportamento: enquanto a <div> é um elemento de bloco, a <span> é um elemento em linha, ou seja, ocupa apenas o espaço necessário para o seu conteúdo e não quebra a linha automaticamente.

Exemplo de utilização:

<span>Olá, mundo!</span>

Veja o resultado.

<br> - Como usar a tag br?

A tag <br> é usada para inserir uma quebra de linha em um ponto específico do conteúdo, fazendo com que o texto continue na linha seguinte sem a necessidade de criar um novo parágrafo ou outro elemento de bloco.

Exemplo de utilização:

<span>Olá <br> meu nome <br> é <br> Joãozinho</span>

Veja o resultado.

<a> - Como criar link no HTML com a tag a?

A tag <a> é um elemento âncora usado para criar hiperlinks. Com ela, é possível direcionar o usuário para outras páginas, arquivos, endereços de e-mail, números de telefone ou até para uma seção específica da mesma página.

Esse comportamento acontece por meio do atributo href, que define o destino do link. Quando o objetivo é criar uma âncora dentro da própria página, o href pode receber o id do elemento de destino, deixando a navegação direta até esse ponto do documento.

Exemplo de utilização:

<span>Clique <a href="https://www.google.com" target="blank">aqui</a> para ser redirecionado para a página do google.</span>

Veja o resultado.

<img> - Como usar a tag img?

A tag <img> é usada para inserir imagens em uma página HTML. Para isso, ela precisa do atributo src, responsável por informar o caminho ou a URL da imagem que será exibida.

Além do src, é importante utilizar também o atributo alt, que fornece uma descrição alternativa para a imagem. Esse texto é exibido caso a imagem não carregue corretamente e também contribui para a acessibilidade da página, permitindo que leitores de tela interpretem o conteúdo visual.

No exemplo a seguir, a imagem é carregada com o atributo loading="lazy", que adia seu carregamento até que ela esteja próxima de aparecer na tela. Fazer dessa forma ajuda no desempenho da página, especialmente quando há muitas imagens.

Exemplo de utilização:

<img src="https://cuponomia-a.akamaihd.net/img/stores/original/alura-637582521816079946.png" alt="Logo da Alura" loading="lazy" />

Veja o resultado.

<audio> - Como usar a tag audio?

A tag <audio> é usada para inserir arquivos de áudio em uma página HTML. Ela permite reproduzir sons diretamente no navegador e pode ser configurada com diferentes atributos para controlar o comportamento da reprodução.

Entre os atributos mais comuns, estão src, que define o caminho ou a URL do arquivo de áudio; controls, que exibe os controles de reprodução para o usuário; e autoplay, que inicia o áudio automaticamente assim que a página é carregada, mas esse comportamento pode ser bloqueado por alguns navegadores.

Também é possível usar a tag <source> dentro de <audio> para informar diferentes formatos de arquivo e aumentar a compatibilidade entre navegadores.

Um exemplo simples de uso é:

<audio src="audio/exemplo.mp3" controls></audio>

Se você quiser oferecer mais de um formato de áudio, a estrutura pode ficar assim:

<audio controls>
  <source src="audio/exemplo.mp3" type="audio/mpeg">
  <source src="audio/exemplo.ogg" type="audio/ogg">
  Seu navegador não suporta o elemento de áudio.
</audio>

Veja o resultado.

Continua…

Neste artigo, vimos o que são os elementos inline em HTML, como eles se comportam e alguns exemplos de tags bastante utilizadas nesse grupo, como <span>, <a>, <img>, <br> e <audio>.

No próximo, vamos avançar para outra categoria importante da linguagem: os elementos block-level. Você entenderá o que caracteriza esse tipo de elemento, como ele se comporta na página e quais são as tags mais comuns dessa estrutura no HTML.