HTML5 Estrutura Semântica

Nesse tutorial, iremos ver a “nova” estrutura semântica do HTML5. Irei colocar algumas referências no final desse post e passar um pouco mais sobre essas novidades (não tão novas), mas que já está sendo bastante utilizada.

Para começarmos a entender irei apresentar um breve detalhe de cada tópico que será de suma importância, para podermos entender e consequentemente termos uma visão do que será empregado nesse novo conceito.

Qual propósito da Estrutura?
Uma estrutura de informação, como documentos escritos em HTML, deve conter apenas marcações com devido significado.

O que é Semântica?
Semântica refere-se ao estudo do significado. Quando utilizamos cada marcação para o que ele realmente foi criada, estamos construindo um “Código Semântico”, é uma abordagem de criar “Marcação com Significado”.

Semântica com atributos

Figura 1: Semântica via atributos

Semântica HTML5

Figura 2: Semântica HTML5

Como podemos observar, a semântica que está representada na Figura 1: Semântica via atributos é feita por via de atributos, já com a semântica do HTML5 apresentado na Figura 2: Semântica HTML5 podemos notar uma grande diferença, onde o uso não é mais feito via por via de atributos já estando definido com o próprio elemento, exemplo é o bloco header. Sendo assim, podemos informar diretamente os elementos e não se preocuparmos mais em criar divs e definindo-os pelos atributos. Lembrando sempre como já citado nesse post: “Semântica refere-se ao estudo do significado.”.
Com a “nova” semântica você e sua equipe irão ter facilidade de lidar com seus blocos ou contextos ou como queriam ser chamados. Se você ainda não usa HTML5 nos seus projetos, comece agora mesmo! E comece pela semântica.

Alguns dos novos Elementos

Alguns dos novos elementos para identificação melhor dos conteúdos como <header> e <footer> para cabeçalho e rodapé, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.

DOCTYPE html5
O Doctype já é bem mais simples e possível de decorar, do que do xhtml que estamos acostumados.
Ex: <!DOCTYPE html>

<header>
Para definir onde será o cabeçalho da página, na semântica do HTML5 podemos ter vários <header> no mesmo documento.

<footer>
Para definir onde será o rodapé da página ou da sessão.

<aside>
Informações relativas ao conteúdo principal, como um menu ou campo de busca.

<dialog>
Será usada para descrever dialogos, usando tags de termos de definição.

<figure>
Para inserção de imagens com legenda.

 <figure>  
  <img src="imagem.jpg" alt="descrição">  
  <legend>Legenda da Imagem</legend>  
 </figure>  

<audio>
Exibe qualquer elemento de streaming de áudio, com atributos para exibição de controles ou execução automática.

<video>
Exibe vídeos na página, com exibição de controles e de uma imagem enquanto o vídeo é carregado.

<nav>
Sessão de navegação, para links ‘lado a lado.’

 <nav>  
  <a href="#">Home</a>  
  <a href="#">Próxima</a>  
  <a href="#">Anterior</a>  
 </nav>  

<menu>
Serve para gerar um menu, com auxílio da marcação <li>

 <menu>  
   <li><input type="checkbox" />Vermelho</li>  
   <li><input type="checkbox" />Azul</li>  
 </menu>  

Bom pessoal é isso, espero que possa ter ajudado. Irei colocar mais post sobre essa linguagem extraordinária que nos tem surpreendido a cada dia. Abraços.

Referências:
A Semântica do HTML5
Semântica HTML5: comece agora a usá-la!
Vídeos: HTML5 Semantic Structure