HTML5 – Semântica

Semântica

O HTML5 oferece vários elementos semântico para definir diferentes partes em seu código, permitindo que um motor de busca identifique cada área da página a partir de suas Tags específicas.

Tags HTML5 para estruturar a página

• Tag header: Define um cabeçalho de uma página.
• Tag nav: Define links de navegação como por exemplo um simples menu.
• Tag figure: Define que dentro contem imagem.
• Tag main: Definir o conteúdo principal da página ou da aplicação “ usar somente uma vez por pagina”.
• Tag section: Define uma seção em um documento.
• Tag article: Define um artigo e deve ser algo independente como uma postagem em um blog ou comentário.
• Tag aside: Define um conteúdo secundário de uma página, como um menu lateral ou um banner de anunciantes.
• Tag details: Especifica detalhes adicionais que o usuário pode exibir ou ocultar sob demanda.
• Tag footer: Define um rodapé de uma página.

Exemplo da estrutura.

<header> <!-- Inicio -->

<nav></nav>

 </header>

<main> <!-- Meio -->

<section>

<article></article>

</section>

<aside></aside>

</main>

<footer> <!-- Fim -->

<nav></nav>

</footer>

Section

Uma página pode conter várias seções <section>, para dividir e organizar.

<section>
<h1>Titulo 1</h1>
</section>

<section>
<h1> Titulo 2</h1>
</section>

<section>
<h1> Titulo 3</h1>
</section>

Article

Dentro de uma seção costuma ter a Tag <article>  e dentro dele encontramos titulo e texto. No entanto pode ser encontrada a Tag <header> que além de ser usado no início do site, também pode ser usando dentro de outras Tags para definir um cabeçalho.

<article>

<header>

<h1>Titulo</h1>

<p>Texto exemplo.</p>

</header>

<p>Texto exemplo.</p>

</article>

Footer

O rodapé normalmente possui o nome do autor ou nome da empresa, direitos de autor, menu, links para termos de uso, informações de contato e outros.

<footer>
<figure></figure>

<nav>
<ul>
<li></li>
</ul>
</nav>

<address></address>
</footer>

Nav

O menu utiliza a Tag <nav> para define um conjunto de links de navegação, e dentro dele contém outras Tags para formar uma lista, porem nem sempre é necessário usar <nav> para um link, e a Tag <a> pode ser usado separado quando não se pretende forma uma lista.

<nav>
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
</ul>
</nav>

<a href="http://www.waaap.netvote.php?name=Desenvolvedor Web">Enviar link - www.waaap.net</a>

Aside

A Tag <aside> costuma estar na lateral, e muitas vezes está relacionado com o conteúdo circundante.

<aside>
<h3>Esporte</h3>
<p>O hoje foi muito bom e ...</p>
        <a href="/link/">link/a>
</aside>

Figure

A Tag <figure> é utilizada para conter imagem e legenda, a finalidade da legenda é adicionar uma explicação visual de uma imagem.

<figure>

<img src="imagem.jpg" alt="imagem">
<figcaption> Imagem 1</figcaption>
</figure>

Details

A tag < details> é usado para criar widget onde o usuário pode abrir e fechar para ler as informações.

<details>
<h3>Titulo</h3>
<p>Um texto feito as <time>10:00</time>da noite.</p>
</details>