Definem artigos, seções e asdas em HTML5 Pages - dummies

Talvez o elemento de estrutura de conteúdo mais significativo em HTML5 seja a etiqueta do artigo. Os devotos de cabeçalhos, rodapés e até mesmo a marca de tempo relativamente obscura estarão furiosos com a sugestão de que a etiqueta do artigo é a grande atração em HTML5, mas você pode empregar a etiqueta do artigo para organizar o conteúdo da página em "pedaços básicos", por falta de uma palavra melhor.

A necessidade de estruturar o conteúdo da página em artigos é um fator positivo para forçar os desenvolvedores de conteúdo a organizar idéias de forma coerente. E a etiqueta do artigo fornece a estrutura para seções (dentro do artigo) e asdas (barras laterais para o artigo).

Divida artigos em várias seções

O código a seguir define um artigo e dois elementos de seção. Também inclui alguns textos e títulos de espaço reservado inseridos após a tag de fechamento.

Nota: Embora você possa incorporar tecnicamente uma única seção dentro de um artigo, o conceito de artigos divididos em seções é mais eficaz se isso for evitado.

Uma regra básica de edição (e você pode perguntar a qualquer pessoa que edite o texto para a vida, e eles vão continuar e ligando sobre isso) é que se você vai dividir um artigo para facilitar a digestão, não ajuda o leitor a organizar seu pensamento para ter apenas uma subseção dentro de uma seção de conteúdo. Então - quando as seções são usadas - é melhor ter pelo menos duas seções inseridas nas tags.

O título do artigo vai aqui
O primeiro conteúdo do artigo vai aqui
mais conteúdo do artigo vai aqui
O cabeçalho da 1ª seção vai aqui
O conteúdo da 1ª seção vai aqui
Mais 1º O conteúdo da seção vai aqui
O cabeçalho da segunda seção vai aqui
O conteúdo da segunda seção vai aqui
Mais o conteúdo da segunda seção é exibido aqui

Este código cria uma página como a mostrada aqui.

Adicionar um elemento separado

Tal como acontece com todos os elementos da estrutura da página HTML5, o elemento à parte pretende ser associado a um determinado tipo de conteúdo. Conteúdo como imagens, texto ou vídeos em um elemento separado deve ser dependente - isto é, relacionado ao conteúdo e contribuindo para - um artigo ou seção de um artigo.

Você deve usar um elemento separado para incluir uma barra de navegação? Geralmente, não. Em vez disso, o conteúdo da navegação deve ser codificado com o elemento nav, que discutimos um pouco mais cedo neste capítulo.

Alguns atributos de estilo CSS que normalmente são aplicados em elementos de lado esquerdo HTML5. Como você provavelmente pode intuir, os elementos de lado geralmente são definidos como barras laterais. Assim, quando você define um estilo CSS para o elemento nav, você usa a propriedade flutuante CSS para permitir que o elemento à parte seja exibido como uma caixa alinhada à direita ou à esquerda em torno da qual o conteúdo do artigo pode fluir.

O código a seguir fornece um exemplo de um elemento de lado dentro de um artigo:

cabeçalho do artigo vai aqui
O conteúdo do artigo vai aqui
Conteúdo da barra lateral, relacionado ao artigo, vai aqui
Mais conteúdo do artigo vai aqui

Você quer combinar elementos de estrutura HTML5 com estilos que formateiam a localização, a fonte, a cor e outros atributos de estilo aplicados a esses elementos. A figura a seguir, por exemplo, mostra como um lado (KUDOS) pode parecer ao lado do artigo com o qual está associado (Experiência).