Artigos HTML e CSS HTML Semântico: Conheça os elementos semânticos da HTML5

Atualmente o papel da HTML não é apenas estruturar documentos para a web, mas também descrever o significado do conteúdo presente nesses documentos por meio de tags semânticas. O HTML semântico tem como objetivo descrever o significado do conteúdo presente em documentos HTML, tornando-o mais claro tanto para programadores quanto para browsers e outras engines que processam essa informação.

Neste documento apresentamos as principais tags semânticas incorporadas à linguagem HTML.

header

O <header> é utilizado para representar o cabeçalho de um documento ou seção declarado no HTML. Nele podemos inserir elementos de <h1> a <h6>, até elementos para representar imagens, parágrafos ou mesmo listas de navegação.

Exemplo de uso de <header>:


  <header>
       <h1>Título da página</h1>
       <h2>Subtítulo da página</h2>
  </header>

Run
Nota: Diferentemente da tag <head>, é possível declarar mais de um <header> por página.

section

O elemento <section> representa uma seção dentro de um documento e geralmente contém um título, o qual é definido por meio de um dos elementos entre <h1> e <h6>. Podemos utilizar o <section>, por exemplo, para descrever as seções/tópicos de um documento.

Exemplo de uso de <section>:


  <section>
      <h3>Seção 1</h3>
   
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
  </section>

Run

article

Utilizamos o elemento <article> quando precisamos declarar um conteúdo que não precisa de outro para fazer sentido em um documento HTML, por exemplo, um artigo em um blog. É recomendado identificar cada <article> com um título.

Exemplo de uso de <article>:


  <article>
      <h3>Título do artigo 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
  </article>              
  <article>
      <h3>Título do artigo 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
  </article>

Run

nav

O elemento <nav> é utilizado quando precisamos representar um agrupamento de links de navegação, que, por sua vez, são criados com os elementos <ul>, <li> e <a>.

Exemplo de uso de <nav>:


 <nav>
  <ul>       
  <li><a href=”#”>pagina 1</a></li>
  <li><a href=”#”>pagina 2</a></li>
  <li><a href=”#”>pagina 3</a></li>
  <li><a href=”#”>pagina 4</a></li>
  </ul>
 </nav>

Run
Nota: Podemos declarar o <nav> em qualquer lugar do documento que contenha uma lista de links, inclusive no <header>.

aside

O elemento <aside> é utilizado quando precisamos criar um conteúdo de apoio/adicional ao conteúdo principal. Por exemplo, ao falar de HTML semântico, podemos indicar ao leitor outros conteúdos sobre a linguagem HTML como sugestão de leitura complementar.

Exemplo de uso de <aside>:


  <aside>
    <nav>
      <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
       </ul>
    </nav>
  </aside>

Run

main

O elemento <main> especifica o conteúdo principal e, consequentemente, de maior relevância dentro da página. Para ser considerada bem construída, uma página deve apresentar apenas um conteúdo principal.

Exemplo de uso de <main>:


  <main>
    <h2>Titulo</h2>
   
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
   
    <article>
       <h3>Subtítulo</h3>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</p>
     </article>
  </main>

Run
Nota: O conteúdo declarado dentro da tag <main> deve ser único no documento, incluindo links e imagens.

figure

O elemento <figure> é uma marcação de uso específico para a inserção de uma figura. Para incluir a descrição dessa figura, podemos utilizar o elemento <figcaption>.

Exemplo de uso de <figure>:


  <figure>
    <img src=”http://meusite.com.br/assets/imagem.jpg” alt=”Imagem”>
  </figure>

Run

Exemplo de uso de <figure> com <figcaption>:


  <figure>
     <img src=”http://meusite.com.br/assets/imagem.jpg” alt=”Imagem”>
   
     <figcaption>Figura 1. Imagem</figcaption>
  </figure>

Run

Semântica no nível do texto

Além da semântica estrutural, o HTML nos permite descrever o significado de um conteúdo em nível de texto utilizando um conjunto de elementos semânticos. Assim, é possível, por exemplo, destacar os trechos de texto que devem receber algum tipo de destaque.

a

A principal função do elemento <a> é descrever um link, conectando os diversos documentos de um site e permitindo a navegação por esse conteúdo. Normalmente esses documentos estão relacionados por compartilharem um assunto em comum.

Exemplo de uso de <a>:

<a href=”//www.devmedia.com.br” alt=”DevMedia”>DevMedia</a>

Run

em

O elemento <em> é utilizado quando desejamos enfatizar um trecho ou palavra no texto, indicando que ela contribui de forma mais relevante para o sentido/compreensão do conteúdo.

Exemplo de uso de <em>:

<p>Você <em>tem certeza</em> que essa definição está correta?</p>

Run

Dessa forma enfatizamos o trecho mais relevante da pergunta.

strong

O elemento <strong> também é utilizado para destacar uma parte do texto. Sua principal diferença em relação ao elemento <em> é que <em> pode alterar o propósito de uma frase, como vimos anteriormente.

Exemplo de uso de <strong>:

<p>Compreender esses elementos HTML é importante porque
<strong>possibilita o desenvolvimento de soluções web modernas</strong>.</p>

Run

cite e q

O elemento <cite> é utilizado para declarar que naquele trecho há uma citação, isto é, um trecho de texto que não foi escrito pelo autor do conteúdo. Normalmente utiliza-se o <cite> em conjunto com o elemento <q>, responsável por apresentar o conteúdo retirado de outra fonte.

Exemplo de uso de <cite> e <q>:

<p>
<q>Lorem ipsum dolor sit amet, consectetur </q> - <cite>http://br.lipsum.com/</cite>.
</p>

Run

time

O elemento <time> é utilizado para representar datas. Assim, caso seja necessário informar a data em que um conteúdo foi escrito, podemos declarar a tag <time> e acrescentar a ela o atributo datetime para escrever a data de forma padronizada.

<time datetime=”2017-04-07”>4/7</time>

Run

Exemplo prático

A seguir temos um exemplo prático em que empregamos várias tags semânticas para estruturar o conteúdo de uma página. Neste caso, temos uma página de cursos, que contém um cabeçalho, o corpo, dividido em seções, e um rodapé:


01 <body>
02     <header>
03         <h1>Cursos de programação</h1>
04     </header>
05     <main>
06         <section>
07             <h2>Java</h2>
08             <article>
09                 <h3>Curso de JavaServer Faces</h3>
10                 <p>Neste curso você aprenderá a desenvolver aplicações com JSF.</p>
11             </article>
12             <article>
13                 <h3>Curso de Spring</h3>
14                 <p>Neste curso você aprenderá utilizar o framework Spring.</p>
15             </article>
16         </section>
17         <section>
18             <h2>PHP</h2>
19             <article>
20                 <h3>Curso básico de PHP</h3>
21                 <p>Conheça a linguagem de programação PHP.</p>
22             </article>
23             <article>
24                 <h3>Curso de PDO</h3>
25                 <p>Aprenda a acessar bancos de dados com PHP Data Objects.</p>
26             </article>
27         </section>
28     </main>
29     <footer>
30         <p>MinhaEmpresa.com.br. Todos os direitos reservados.</p>
31     </footer>
32 </body>

Linhas 2 a 4: Aqui temos o cabeçalho da página, no qual colocamos seu título principal.

Linhas 6 a 16: Dentro da tag main podemos criar várias seções (section) e dentro de uma section pode haver vários elementos do tipo article. Aqui usamos a section para delimitar a seção de cursos referentes a cada linguagem, e o article para definir cada curso. O mesmo ocorre nas linhas 17 a 27.

Linhas 29 a 31: No rodapé da página podemos adicionar informações sobre direitos autorais, links adicionais, informações sobre autoria, etc.

Run

Lembre-se que quando escrevemos uma página web estamos preparando um conteúdo que será consumido por diferentes “clientes”, como outros desenvolvedores, browsers, algoritmos de indexação de sites de busca e, até mesmo, ferramentas de mineração de texto, por exemplo. Portanto, ao escrever código HTML, preocupe-se também com a semântica dos elementos nele presentes. O uso correto de elementos semânticos é fundamental para a construção de páginas web modernas e mais fáceis de compreender e manter.