Vamos começar por: Header, Section, Article, Nav e footer.
Vou dar uma explicação meio “grosso modo”, só para dar uma visão geral e começar a situar quem nunca viu essas tags.
Foi observado que os sites sempre tinham:
uma div que continha o cabeçalho da página. Geralmente <div class= “header”>
uma div que continha o menu. Geralmente <div class=“menu”>
uma div que continha o conteúdo da página. Geralmente <div class=“content”>
uma div que continha o rodapé da página. Geralmente <div class=“footer”>
Se você, como a maioria, também costuma usar essas divs, vai ser fácil. No lugar da div que continha:
o cabeçalho – use header
o menu – use nav
o conteúdo - use section
os assuntos dentro do conteúdo – use article
o rodapé - use footer
Por exemplo:
- Ao invés de:
<div class=”header”>
<h1> Título da página
<img src=”logo.jpg” >
</div>
Use:
<header>
<h1> Título da página
<img src=”logo.jpg” >
</ header>
Deu para começar a entender essas tags novas e como usa-las?
São tags que definem um grupo, juntam dentro delas elementos afins.
Acho que com uma imagem vai ficar mais fácil.
OBS importante: O uso dessas tags tornam os documentos mais semânticos e influenciam positivamente em SEO.
---------------------
Segue uma lista com os novos elementos retirado do Curso de HTML 5 do W3C Escritório Brasil
section | A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno. |
nav | O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site. |
article | O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum. |
aside | O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website. |
hgroup | Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc. |
header | O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos. |
footer | O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção. |
time | Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano. |
---------------------
Nenhum comentário:
Postar um comentário