Elementos Semânticos no HTML5
Elementos semânticos definem claramente seu propósito na página, facilitando a compreensão da marcação tanto para o navegador quanto para os desenvolvedores.
Os elementos semânticos são uma das introduções mais significativas do HTML5. Nas versões anteriores do HTML, a tag genérica <div> com um atributo id ou class era usada para estruturar uma página web. Por exemplo, para definir barras laterais, rodapés, menus ou outros blocos estruturais, a tag <div> era utilizada com o significado correspondente (div class="footer").
Os elementos semânticos no HTML possuem significado intrínseco e transmitem esse significado tanto ao navegador quanto ao desenvolvedor. Eles definem claramente o tipo de conteúdo que contêm (por exemplo, a tag <footer> é usada em vez de <div id="footer">). Eles também ajudam a melhorar a acessibilidade e tornam a marcação mais fácil de ser compreendida pelos mecanismos de busca.
Esta página aborda os elementos semânticos estruturais (de layout de página) que você usará para construir o esqueleto de quase toda página web — <header>, <nav>, <main>, <article>, <section>, <aside> e <footer> — além de algumas tags semânticas no nível do conteúdo. Também mostra como esses elementos se mapeiam para os marcos ARIA, que é a razão real pela qual eles importam para a acessibilidade.
Vamos dar uma olhada nos elementos semânticos e seus significados.
Um layout de página semântico completo
Antes de analisar cada elemento separadamente, é útil ver como eles se encaixam. Os elementos estruturais se aninham de forma previsível: um <header> e um <footer> envolvem a página, um único <main> contém o conteúdo principal, e dentro dele um <article> pode ficar ao lado de um <aside> relacionado. A navegação fica dentro de <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic page layout</title>
</head>
<body>
<header>
<h1>The Daily Markup</h1>
<nav>
<a href="/">Home</a> |
<a href="/articles">Articles</a> |
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic elements describe the role of the content they wrap,
which helps browsers, search engines and assistive technology.</p>
</article>
<aside>
<h2>Related reading</h2>
<ul>
<li><a href="/articles/headings">Heading structure</a></li>
<li><a href="/articles/landmarks">ARIA landmarks</a></li>
</ul>
</aside>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>O restante desta página explica cada elemento em detalhes.
Elementos semânticos e marcos ARIA
O maior benefício prático dos elementos semânticos estruturais é a acessibilidade. Usuários de leitores de tela não percorrem uma página do início ao fim — eles navegam entre marcos. Muitos elementos estruturais expõem um papel de marco ARIA implícito automaticamente, portanto você obtém isso gratuitamente apenas usando a tag correta (nenhum atributo role é necessário):
| Elemento | Papel de marco implícito | Notas |
|---|---|---|
<header> (filho direto de <body>) | banner | Cabeçalho do site. Um <header> dentro de <article>/<section> não é um marco. |
<nav> | navigation | Rotule múltiplos navs com aria-label para que sejam distinguíveis. |
<main> | main | Use apenas um por página. |
<aside> | complementary | Conteúdo relacionado ao, mas separável do, conteúdo principal. |
<footer> (filho direto de <body>) | contentinfo | Rodapé do site (direitos autorais, contato, etc.). |
Por isso, substituir <div class="header"> por <header> não é apenas uma marcação mais organizada — torna a página navegável para pessoas que usam tecnologia assistiva.
O elemento <header>
O elemento <header> define um cabeçalho para o documento ou seção. Geralmente contém um logotipo, barra de pesquisa, links de navegação, etc.
Exemplo do elemento HTML <header>
Exemplo do cabeçalho HTML da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>O elemento <nav>
O elemento <nav> define um bloco de links de navegação, seja dentro do documento atual ou para outros documentos. Note que nem todos os links no documento HTML podem ser colocados dentro do elemento <nav>; ele pode incluir apenas os principais blocos de navegação. Por exemplo, a tag <nav> também pode ser colocada dentro da tag <footer> para definir links no rodapé do site.
Exemplo do elemento HTML <nav>
Exemplo do elemento nav da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>O elemento <article>
O elemento <article> é usado para especificar um conteúdo independente e autocontido (artigos, posts de blog, comentários, etc.). O conteúdo do elemento tem seu próprio significado e é facilmente diferenciado do restante do conteúdo da página web.
Exemplo do elemento HTML <article>
Exemplo do elemento article da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>O elemento <section>
O elemento <section> é usado para agrupar seções independentes dentro de uma página web contendo conteúdo logicamente relacionado (bloco de notícias, informações de contato, etc.).
Exemplo do elemento HTML <section>
Exemplo do elemento section da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html><section> vs <article>
Esses dois elementos são fáceis de confundir. Uma regra prática rápida:
- Use
<article>quando o conteúdo for autocontido e distribuível de forma independente — ele ainda faria sentido sozinho, fora de contexto (um post de blog, uma notícia, um cartão de produto, um comentário de usuário). Se você pudesse imaginá-lo sendo distribuído em um feed RSS, é um<article>. - Use
<section>para um agrupamento temático de conteúdo relacionado que faz parte de algo maior e não tem significado por si só. Um<section>deve quase sempre começar com um cabeçalho (<h2>–<h6>) que nomeie o grupo.
Quando nenhum dos dois se aplica — você precisa apenas de um invólucro de estilo ou layout sem significado semântico — use um simples <div>.
O elemento <aside>
O elemento <aside> define uma seção com informações adicionais relacionadas ao conteúdo ao redor do elemento <aside>. É geralmente usado para enriquecer um artigo com informações adicionais ou destacar partes que podem ser interessantes para o usuário.
Exemplo do elemento HTML <aside>
Exemplo do elemento aside da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>O elemento <footer>
O elemento <footer> define o rodapé de uma página web ou seção. Em geral, contém informações de direitos autorais, detalhes de contato, links de navegação, etc.
Exemplo do elemento HTML <footer>
Exemplo do elemento footer da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
main {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<header>Header / Menu</header>
<main>
<h1>Main content</h1>
<p>This is some paragraph. </p>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>O elemento <address>
O elemento <address> fornece informações de contato para o ancestral <article> mais próximo, ou para todo o documento quando é filho de <body>. Ele é destinado a detalhes de contato (o autor ou proprietário do artigo ou site) — não para endereços postais arbitrários que simplesmente fazem parte do conteúdo.
Exemplo do elemento HTML <address>
Exemplo do elemento address da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Enviar e-mail ao autor
O elemento <main>
O elemento <main> define o conteúdo principal da página. O conteúdo da tag <main> deve ser único e não duplicar blocos do mesmo tipo que se repetem em outros documentos, como o cabeçalho do site, rodapé, menu, pesquisa, informações de direitos autorais, etc.
Exemplo do elemento HTML <main>
Exemplo do elemento main da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>O elemento <figure>
O elemento <figure> é usado para indicar conteúdo autocontido. A tag pode incluir imagens, diagramas, ilustrações, exemplos de código, etc.
Exemplo do elemento HTML <figure>
Exemplo do elemento figure da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>O elemento <figcaption>
O elemento <figcaption> é usado para adicionar assinatura ou anotação à tag <figure>.
Exemplo do elemento HTML <figcaption>
Exemplo do elemento figcaption da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Elementos semânticos no nível do conteúdo
Os elementos acima descrevem a estrutura de uma página. As tags a seguir adicionam significado no nível do texto — elas marcam pequenos trechos de conteúdo dentro de um parágrafo, em vez de organizar o layout da página. Elas não são marcos e não afetam a estrutura da página.
O elemento <time>
O elemento <time> define um horário legível por humanos em um relógio de 24 horas ou uma data precisa no calendário gregoriano.
Exemplo do elemento HTML <time>
Exemplo do elemento time da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>O elemento <mark>
O elemento <mark> é usado para marcar uma parte do texto que tem relevância. Pode ser usado para destacar um texto para mostrar ênfase, realçar termos de busca nos resultados de pesquisa para fornecer contexto ou distinguir um novo conteúdo adicionado pelo usuário exibindo-o de forma diferente.
Exemplo do elemento HTML <mark>
Exemplo do elemento mark da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>O elemento <bdi>
O elemento <bdi> é usado para isolar texto bidirecional quando um idioma com direcionalidade da direita para a esquerda, como árabe ou hebraico, é usado inline com idiomas da esquerda para a direita.
Exemplo do elemento HTML <bdi>
Exemplo do elemento bdi da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>O elemento <wbr>
A tag <wbr> é usada para instruir o navegador onde uma quebra de linha pode ser adicionada no texto. Ao contrário da tag <br>, que obriga o navegador a inserir uma quebra de linha, no caso de <wbr> o navegador primeiro analisa seu conteúdo e, em seguida, insere uma quebra de linha se necessário (palavra ou endereço URL muito longo).
Exemplo do elemento HTML <wbr>
Exemplo do elemento wbr da página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>