Guia Completo de Tags Semânticas e Outras Tags HTML

em

As tags semânticas do HTML ajudam a estruturar e dar significado ao conteúdo de uma página web, facilitando a leitura por humanos e máquinas. Este guia detalha as principais tags semânticas e seus usos.

1. <header>

Define o cabeçalho de uma página ou seção.

<header>
  <h1>Título Principal</h1>
  <p>Subtítulo ou descrição.</p>
</header>

  • Usado para logotipos, menus de navegação ou introduções.

2. <nav>

Representa a navegação principal ou secundária de um site.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>

3. <main>

Contém o conteúdo principal da página.

<main>
  <article>
    <h2>Notícia Importante</h2>
    <p>Texto do artigo.</p>
  </article>
</main>

4. <article>

Define um conteúdo independente, como um artigo ou post de blog.

<article>
  <h2>Título do Artigo</h2>
  <p>Conteúdo principal do artigo.</p>
</article>

5. <section>

Agrupa conteúdos relacionados dentro de uma página.

<section>
  <h2>Seção Importante</h2>
  <p>Conteúdo dessa seção.</p>
</section>

6. <footer>

Representa o rodapé de uma página ou seção.

<footer>
  <p>Copyright &copy; 2025. Todos os direitos reservados.</p>
</footer>

7. <aside>

Define conteúdo relacionado, como barras laterais ou widgets.

<aside>
  <h3>Notícias Relacionadas</h3>
  <p>Texto complementar.</p>
</aside>

8. <figure> e <figcaption>

Agrupa elementos visuais, como imagens, com legendas.

<figure>
  <img src="imagem.jpg" alt="Descrição da imagem">
  <figcaption>Legenda da imagem.</figcaption>
</figure>

9. <mark>

Destaca texto relevante.

<p>Este é um texto com uma <mark>palavra importante</mark>.</p>

10. <time>

Define uma data ou hora.

<time datetime="2025-01-03">3 de janeiro de 2025</time>

11. <details> e <summary>

Exibe detalhes ocultos que podem ser expandidos pelo usuário.

<details>
  <summary>Mais informações</summary>
  <p>Detalhes adicionais sobre o conteúdo.</p>
</details>

12. <blockquote>

Indica uma citação em bloco.

<blockquote>
  "A simplicidade é o último grau da sofisticação." - Leonardo da Vinci
</blockquote>

13. <address>

Fornece informações de contato.

<address>
  Autor: João Silva<br>
  Email: joao@email.com
</address>

14. <code>

Define um trecho de código.

<code>console.log("Hello, World!");</code>

15. <pre>

Exibe texto com espaçamento preservado.

<pre>
Linha 1
  Linha 2
    Linha 3
</pre>

16. <em> e <strong>

Dão ênfase a textos.

<p>Texto com <em>ênfase</em> e texto <strong>importante</strong>.</p>

17. <progress>

Indica progresso de uma tarefa.

<progress value="70" max="100">70%</progress>

18. <meter>

Representa um valor dentro de um intervalo.

<meter value="0.6" min="0" max="1">60%</meter>

19. <dl>, <dt> e <dd>

Criam listas de descrição.

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação para a web.</dd>
  <dt>CSS</dt>
  <dd>Estilização de páginas.</dd>
</dl>

20. <template>

Define um modelo de conteúdo reutilizável.

<template id="meu-template">
  <p>Este é um template oculto.</p>
</template>

21. <output>

Exibe resultados de cálculos ou scripts.

<form oninput="resultado.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a"> + <input type="number" id="b"> =
  <output name="resultado"></output>
</form>

22. <abbr>

Indica uma abreviação.

<p><abbr title="HyperText Markup Language">HTML</abbr> é essencial para a web.</p>

23. <cite>

Indica uma referência ou citação.

<p>Citado de <cite>O Senhor dos Anéis</cite>.</p>

24. <kbd>

Representa entrada do usuário.

<p>Pressione <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.</p>

25. <samp>

Representa saída de programas.

<p>Saída: <samp>Erro 404</samp></p>

26. <hgroup>

Agrupa um título principal e seus subtítulos.

<hgroup>
  <h1>Título Principal</h1>
  <h2>Subtítulo</h2>
</hgroup>

  • Uso: Ajuda a organizar hierarquias de cabeçalhos.

27. <p>

Define um parágrafo de texto.

<p>Este é um exemplo de parágrafo.</p>

  • Uso: Fundamental para qualquer conteúdo textual.

28. <a>

Cria um link para outras páginas ou recursos.

<a href="https://example.com">Visite nosso site</a>

  • Atributos comuns:

    • href: Define o destino do link.

    • target="_blank": Abre o link em uma nova aba.

29. <ul> e <ol>

Criam listas não ordenadas e ordenadas, respectivamente.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>

  • Uso: Estruturar listas.

30. <table>

Define uma tabela de dados.

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>João</td>
    <td>25</td>
  </tr>
</table>

  • Uso: Exibir informações tabulares.

31. <audio>

Embute áudio em uma página.

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

32. <video>

Embute vídeos na página.

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Seu navegador não suporta o elemento de vídeo.
</video>

33. <form>

Cria um formulário para entrada de dados.

<form action="/submit" method="POST">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
  <button type="submit">Enviar</button>
</form>

34. <slot>

É usado em componentes web para definir espaços personalizáveis.

<slot name="header"></slot>

  • Uso: Personalização em web components.

35. <img>

Insere uma imagem na página.

<img src="imagem.jpg" alt="Descrição da imagem">

  • Atributos:

    • alt: Texto alternativo (importante para acessibilidade).

36. <area>

Define regiões em um mapa de imagem.

<map name="imagem-mapa">
  <area shape="rect" coords="0,0,100,100" href="https://example.com">
</map>

37. <bdi>

Isola partes de texto para impedir interferência na direção.

<p>O nome em arábico é <bdi> احمد </bdi>.</p>

38. <button>

Cria um botão clicável.

<button type="button">Clique Aqui</button>

39. <br>

Insere uma quebra de linha.

<p>Linha 1<br>Linha 2</p>

40. <bdo>

Controla explicitamente a direção do texto.

<bdo dir="rtl">Texto da direita para a esquerda</bdo>

41. <embed>

Embute um conteúdo externo, como vídeos ou aplicativos.

<embed src="arquivo.pdf" width="600" height="400">

42. <canvas>

Permite desenhar gráficos e animações por meio de JavaScript.

<canvas id="meuCanvas" width="400" height="400"></canvas>

43. <fieldset>

Agrupa elementos de um formulário.

<fieldset>
  <legend>Dados Pessoais</legend>
  <input type="text" name="nome" placeholder="Nome">
</fieldset>

44. <iframe>

Incorpora outra página dentro da página atual.

<iframe src="https://example.com" width="600" height="400"></iframe>

45. <kbd>

Representa entrada do usuário via teclado.

<p>Pressione <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.</p>

46. <label>

Associa um rótulo a um elemento de formulário.

<label for="nome">Nome:</label>
<input type="text" id="nome">

47. <map>

Define um mapa de imagem.

<img src="mapa.jpg" usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="0,0,100,100" href="#">
</map>

48. <search>

Define um área de busca (tag experimental).

<search>
  <input type="search" placeholder="Buscar">
</search>

49. <dialog>

Cria uma caixa de diálogo interativa.

<dialog open>
  <p>Mensagem importante!</p>
  <button>Fechar</button>
</dialog>

Conclusão

As tags semânticas do HTML oferecem uma estrutura clara e funcional para páginas web. Compreendê-las e utilizá-las corretamente garante uma melhor experiência ao usuário, maior acessibilidade e otimização para motores de busca.

Comentários

Postar um comentário