Postado em: "2015-01-14T11:11 -03:00">14 de Janeiro de 2015
Em todas as páginas da Web existem divisões básicas que dizem respeito aos tipos de conteúdo colocados em
cada parte do layout, como cabeçalho, menu de navegação ou rodapé.
Nas versões anteriores do HTML não haviam
tags com uma semântica própria para cada uma dessas divisões. Devido a isso, os desenvolvedores acabavam
usando a tag <div> para todas as situações criando seus próprios padrões, através dos atributos id ou class.
No HTML5 foram criadas diversas tags semânticas para indicar quais conteúdos estão sendo inseridos em cada uma das
divisão da página, deixando o conteúdo organizando e padronizando o desenvolvimento.
O Doctype
Com o HTML5 será usada apenas uma declaração doctype: <!doctype html>
Além de única, ela é curta e fácil de lembrar - A maioria dos desenvolvedores copiam e colam o
complicado doctype de algum lugar na hora de começar um novo documento HTML. Com o Html5 ficou fácil.
Além de única, a declaração é curta e fácil de lembrar.
Informações Introdutórias ou de navegação numa página ou num artigo.
Elemento Nav
Seção da página com links para navegação. Geralmente menu.
Elemento Footer
Define um rodapé de uma página. Pode ser informações finais numa página ou num artigo.
Elemento Article
Define uma região específica de composição autônoma. Um artigo deve ser algo independente como, por exemplo, uma postagem em um blog, um artigo de revista ou jornal, um post em um fórum ou até mesmo um comentário. Resumindo: a tag article é para item independente do conteúdo.
A tag article é o elemento responsável pelo escopo da página, pelo artigo e/ou conteúdo principal do site. Embora o uso da tag seja igual ao das tags header e footer, as informações contidas dentro dela geralmente são maiores, possuem um título, imagens, vários parágrafos, informações sobre o autor daquele artigo etc. Por isso, a tag "header" e a tag footer são usadas dentro da tag "article", para definir um cabeçalho dentro do artigo (com o título do artigo, por exemplo) e um footer no fim da tag "article", para dar mais informações a respeito daquele artigo, de seu autor, referências bibliográficas etc. Observe o exemplo a seguir:
<article>
<header>
<h3>Html5</h3>
<p>É o mesmo html de sempre,
só que trazendo novas
funcionalidades
como semântica e
acessibilidade.</p >
</header>
<footer>
<p>Artigo criado por
Adalgisa Souza</p>
</footer>
</article>
Configurações CSS padrão
A maioria dos navegadores irá exibir o elemento article com os seguintes valores padrão:
article {
display: block;
}
Descrição dos Elementos
Elemento Section
Seção genérica de um documento ou aplicação. Define uma seção do conteúdo na qual é utilizado para organizar
capítulos, cabeçalhos, rodapé, entre outros.
Tag audio
Define um conteúdo de áudio. Usando src = ”nome_arquivo” pode ser definido a fonte do áudio.
Tag video
Define um conteúdo de vídeo.
Elemento Aside
Seção separada do conteúdo (comum em barras laterais). Pode ser propaganda, informações adicionais.
Code
Seção separada do conteúdo (comum em barras laterais). Pode ser propaganda, informações adicionais.
A tabela lista apenas os elementos HTML5 válidos. Somente aqueles que devem ser utilizados em novos sites. O simbolo *(asterisco) indica que o elemento foi adicionado em HTML5. Note-se que outros elementos listados, podem ter sido modificados ou mantidos pelo HTML5 Especificação. Lista de Tags Válidas