Elementos Semânticos do HTML5

Semantics (derived from ancient Greece) can be defined as the study of the meaning of language.

Semantic elements are elements with semantics.

What are semantic elements?

Semantic elements clearly describe their meaning to browsers and developers.

Non-semanticExamples of elements: <div> and <span> - cannot provide information about their content.

SemanticExamples of elements: <form>, <table>, and <img> - clearly define their content.

Browser support

Yes Yes Yes Yes Yes

All modern browsers support HTML5 semantic elements.

In addition, you can 'help' older browsers handle 'unknown elements'.

Learn more about this chapter in HTML5 browsers.

New semantic elements in HTML5

Many websites include HTML code for navigation indicators, headers, and footers, such as these: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 provides new semantic elements to define different parts of a page:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elementos Semânticos do HTML5

Elementos Semânticos do HTML5

HTML5 <section> element

The <section> element defines a section within a document.

According to the W3C's HTML documentation: 'A section (section) is a group of content with a theme, usually with a title'.

A homepage of a website can be divided into sections such as introduction, content, contact information, etc.

Exemplo

<section>
   <h1>WWF</h1>
   <p>O Fundo Mundial para a Natureza (WWF) é....</p>
</section>

Experimente você mesmo

Elemento <article> do HTML5

O elemento <article> define conteúdo autônomo e contido.

Os documentos têm seu próprio significado e podem ser lidos independentemente do conteúdo restante do site.

Aplicações do elemento <article>:

  • Fóruns
  • Blogs
  • Notícias

Exemplo

<article>
   <h1>O que a WWF faz?</h1>
   <p>A missão da WWF é deter a degradação do ambiente natural do nosso planeta,</p>
  e construa um futuro no qual os humanos vivam em harmonia com a natureza.</p>
</article>

Experimente você mesmo

Elementos semânticos aninhados

No padrão HTML5, o elemento <article> define um bloco autônomo de elementos relacionados.

O elemento <section> é definido como um bloco de elementos relacionados.

Podemos usar essa definição para decidir como aninhar elementos? Não, não podemos!

Na Internet, você encontrará páginas HTML contendo elementos <article> dentro de elementos <section>, e páginas contendo elementos <sections> dentro de elementos <article>.

Você também encontrará elementos <section> contendo elementos <section>, e elementos <article> contendo elementos <article>.

Elemento <header> do HTML5

O elemento <header> define o cabeçalho para um documento ou seção.

O elemento <header> deve ser usado como contêiner de conteúdo introdutório.

Um documento pode ter vários elementos <header>.

O exemplo a seguir define um cabeçalho para um artigo:

Exemplo

<article>
   <header>
     <h1>O que a WWF faz?</h1>
     <p>Missão da WWF:</p>
   </header>
   <p>A missão da WWF é deter a degradação do ambiente natural do nosso planeta,</p>
  e construa um futuro no qual os humanos vivam em harmonia com a natureza.</p>
</article>

Experimente você mesmo

Elemento <footer> do HTML5

O elemento <footer> define o rodapé para um documento ou seção.

O elemento <footer> deve fornecer informações sobre seus elementos contidos.

O rodapé geralmente contém informações sobre o autor do documento, direitos autorais, links de termos de uso, informações de contato etc.

Você pode usar vários elementos <footer> em um documento.

Exemplo

<footer>
   <p>Publicado por: Hege Refsnes</p>
   <p>Informações de contato: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Experimente você mesmo

Elemento HTML5 <nav>

O elemento <nav> define uma coleção de links de navegação.

O elemento <nav> visa definir grandes blocos de links de navegação. No entanto, não todos os links do documento devem estar dentro do elemento <nav>!

Exemplo

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Experimente você mesmo

Elemento HTML5 <aside>

<aside> É um elemento que contém algum conteúdo além do conteúdo principal da página (por exemplo, uma barra lateral).

O conteúdo do aside deve estar relacionado ao conteúdo ao redor.

Exemplo

<p>Minha família e eu visitamos o Epcot Center neste verão.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>O Epcot Center é um parque temático no Disney World, Flórida.</p>
</aside>

Experimente você mesmo

Elementos HTML5 <figure> e <figcaption>

Nos livros e jornais, é comum encontrar títulos combinados com imagens.

A função do título (caption) é adicionar uma explicação visível para a imagem.

Através do HTML5, imagens e títulos podem ser combinados em <figure> No elemento:

Exemplo

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - O Pulpit Pock, Noruega.</figcaption>
</figure>

Experimente você mesmo

<img> O elemento define a imagem,<figcaption> O elemento define o título.

Por que usar elementos HTML5?

Se estiver usando HTML4, os desenvolvedores usarão os nomes de atributos preferidos para definir o estilo dos elementos da página:

header, topo, fundo, rodapé, menu, navegação, principal, contêiner, conteúdo, artigo, barra lateral, topo de navegação, ...

Desta forma, o navegador não consegue identificar o conteúdo correto da página da web.

e através dos elementos do HTML5, como: <header> <footer> <nav> <section> <article>, este problema é resolvido.

Segundo o W3C, a Semantic Web:

“Permite a partilha e reutilização de dados entre aplicações, empresas e grupos.”

Elementos Semânticos no HTML5

A seguir está listado os novos elementos semânticos do HTML5, ordenados alfabeticamente.

esses links apontam para o manual completo de referência do HTML.

Etiquetas Descrição
<article> Definir um artigo.
<aside> Definir conteúdo além do conteúdo da página.
<details> Definir detalhes adicionais que o usuário pode visualizar ou ocultar.
<figcaption> Definir o título do elemento <figure>.
<figure> Determinar conteúdo autocontido, como ilustrações, gráficos, fotos, listas de código, etc.
<footer> Definir o rodapé da seção ou do documento.
<header> Determinar o cabeçalho da seção ou do documento.
<main> Determinar o conteúdo principal do documento.
<mark> Definir texto importante ou destacado.
<nav> Definir um link de navegação.
<section> Definir um capítulo no documento.
<summary> Definir o título visível do elemento <details>.
<time> Definir a data/hora.