O que é o HTML e suas tags? Parte 2: elementos inline e como utilizá-los
5 min5 minutos de leitura
5 min5 minutos de leitura
Autor(a)
Beatriz Moura
Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação!
Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design.
Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico.
Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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.
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.
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>
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 <ahref="https://www.google.com"target="blank">aqui</a> para ser redirecionado para a página do google.</span>
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:
<imgsrc="https://cuponomia-a.akamaihd.net/img/stores/original/alura-637582521816079946.png" alt="Logo da Alura" loading="lazy" />
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 é:
<audiosrc="audio/exemplo.mp3" controls></audio>
Se você quiser oferecer mais de um formato de áudio, a estrutura pode ficar assim:
<audio controls>
<sourcesrc="audio/exemplo.mp3" type="audio/mpeg">
<sourcesrc="audio/exemplo.ogg" type="audio/ogg">
Seu navegador não suporta o elemento de áudio.
</audio>
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.
