HTML5 – section ou article?

Nos blogs que acompanho as discussões mais polvorosas que eu vi acerca do HTML5 eram a respeito da semântica e confusão quanto ao uso do article e do section. A definição dos elementos pela W3C realmente é bastante rasa e permite diversas interpretações:

Article tag

O <article> define conteúdo externo.
O conteúdo externo pode ser um artigo de notícias a partir de um provedor externo, um texto de um blog, um texto de um fórum ou qualquer outro conteúdo de uma fonte externa.

W3C (EN)

Depois de ler algumas outras definições externas minha compreensão foi que o source do conteúdo não precisa ser uma fonte externa, mas o article é um conteúdo independente, o conteúdo que teria no feed daquela página, ou como o @elcio bem definiu: o "filézinho do conteúdo".

Section tag

O <section> define as seções em um documento.
Tal como capítulos, cabeçalhos, rodapés ou outras seções do documento.

W3C (EN)

São as seções genéricas do documento, podem estar dentro de um article (dividido em capítulos, por exemplo) ou para separar seções na home do site, por exemplo.

Percebam que a definição oficial é um pouco confusa – e foi o que causou um pouco de pânico enquanto a documentação do HTML5 era escrita. Agora a comunidade está um pouco mais calma acerca do assunto e resolvi dar meus pitacos, já que esclareci algumas dúvidas no curso da W3C de HTML5.

 

A maioria parte das tags html tem uma nomenclatura "técnica", um dos pontos que percebi nas leituras (em inglês a maioria) era que o nome com palavras que existem no idioma (inglês) causam confusão na hora de definir onde a tag será usada. 

Um texto interessante sobre o assunto é o Article vs. Section: We"ve Finally Gone Mad (EN) que dá uma brincada com algumas questões destas dúvidas, e este também fala sobre o assunto e exemplifica o uso de article e section.

Quando usar article e quando usar section?

Você já deve ter entendido, o article é seu conteúdo principal – aquilo que o usuário entrou para ler. O post no seu blog, a notícia, a seção de fotos (?), vídeo (?). Article é o conteúdo que seu usuário gostaria de ter no feed.

Eu li sobre o uso de article para os comentários, porém seguindo esta definição acima não é o correto (e eu jamais faria isso pensando em SEO).  Comentários normalmente não são conteúdo principal – é um conteúdo tangencial – e está relacionado ao conteúdo, portanto faz sentido utilizar o <aside>.

O section é um elemento genérico, "a nova div" como foi comentado no curso. Não é exatamente a "nova div", divs devem continuar existindo para quando for necessário alguma formatação específica para layout apenas (sem peso semântico), porém quando esta formatação for de uma seção da página a div deve ser trocada pelo <section>! 🙂

Uso errado do section

Um exemplo de uso errado do section seria  como a div "principal" da página, normalmente  usada para centralização de todo o site. Não é correto pois semânticamente trata o site como uma "seção", neste caso o correto é o uso de div – dica do próprio @diegoeis, que disse que <div> é coisa do passado e rebeldia no twitter.

 

Leia mais sobre HTML5:

 

Semântica no html – impasse?

Escrevi outro dia sobre semântica no html: alguns conceitos, uma idéia macro e um exemplo prático de como escrever um html dessa forma.

Mas, nem tudo é maravilha… estava agora pouco escrevendo um html quando me deparo com um layout que era algo como esse (procurei na web alguma coisa parecida, já que layout do cliente não pode ser exposto):

A dúvida é a seguinte: isso é uma tabela (table), com um cabeçalho (header) e os dados abaixo, ou uma lista (ul) que tem um título (h1, h2, etc…) antes?
Conversei com um dos meus assistentes, e ele de prima falou que faria uma tabela. Já, eu, imaginei que fosse ser uma lista com um título antes. Sinceramente, não dá pra chegar numa conclusão definitiva sobre isso. Não acho que exista um certo ou errado para esse c&oacuteoacute;digo; ambos fariam sentido, pois pode ser uma tabela de dados ou uma lista de valores.

Como você escreveria?

Ah, indico esse post do Diego Eis sobre tabelas semânticas!

Semântica é tudo!

Semântica, meus amigos, é a base de qualquer html escrito. E não existe uma regra rígida, um certo ou errado; html é uma linguagem, e existem muitas formas de se falar a mesma coisa em uma linguagem.
Desde a forma mais formal e polida, até aquela mais esdrúxula. Mas, de qualquer forma, todo mundo vai entender o contexto global.
Acontece que, para não deixar dúvida sobre o que você está expressando, quanto mais formal se usa uma linguagem, menor a margem que se dá para mal-entendidos.

Passei algumas horas numa reunião na última sexta-f discutindo sobre a semântica que foi usada na escrita de um html para um projeto no qual vou me envolver. O html estava todo validado pelo W3C, sem tabelas, bonitinho. Bonitinho, sim, mas ordinário. Não havia semântica; olhava pro html e não sabia o que era tpitulo, o que era texto de conteúdo, se as imagens usadas eram de layout ou de conteúdo, etc…

Vou usar um exemplo de um grande portal da web para exemplificar. Veja o trecho do layout:

O código usado foi esse:

<div id="noticias">
    <div id="imagem">
    <p>
        <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra" width="163" height="200"></a>
    </p>
    <h5><a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a></h5>
    </div>
    <ul>
        <li class="red"><a href="#" rel="101" >Votação</a></li>
        <li class="prin1t"><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></li>
        <li class="prin1p">&middot; <a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
        <li class="prin1p">&middot; <a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
        <li class="prin1p">&middot; <a href="" rel="104" ></a /><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</strong /></a> </a></li>
        <li class="prin1p">&middot; <a href="" rel="105" ></a /><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</strong></a> </a></li>
        <div class="linha"></div>
        <li class="red"><a href="#" rel="1010" >Blog das Eleições</a></li>
        <li class="prin1b"><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></li>
        <div class="linha"></div>
        <li class="red"><a href="#" rel="1020" >Notícias</a></li>
        <li class="prin1b"><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></li>
        <li class="prin1p">&middot; <a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
        <li class="prin1p">&middot; <a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
    </ul>
</div>

Vou, de cara, me abster a comentar sobre essas divs perdidas no meio da lista (ul) usada. Um erro grosseiro.
Mas, quando se olha para esse layout, o que se percebe? Há uma imagem de destaque na lateral esquerda,  com uma legenda, e na lateral direita uma série de retrancas com títulos, uma com subtítulo e links para as matérias. Existem milt maneiras de se escrever o html para isso, mas, analisando o código escrito originalmente:
– não faz sentido usar um h5 para a legenda da imagem, ainda maais porque não foi usado nenhum outro título nas demais áreas;
– não tem o porque colocar um parágrafo (p) para a imagem;
– não foram usadas tags de títulos (h1 a h6) para os títulos e subtítulos das retrancas.
– uso de atributos deprecados para definir layout inline (width, height)
– bullet usado nas listas (uls) deveria estar no CSS e não no html

Como eu escreveria esse html:

<div id="noticias">
    <div id="imagem">
        <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra"></a>
        <a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a>
    </div>
    <div>
        <h5><a href="#" rel="101" >Votação</a></h5>
        <h6><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></H6>
        <ul>
           
            <li><a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
            <li><a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
            <li><a href="" rel="104" ><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</a></li>
            <li><a href="" rel="105" ><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</a></li>
        </ul>
        <h5><a href="#" rel="1010" >Blog das Eleições</a></h5>
        <h6><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></h6>
        <h5><a href="#" rel="1020" >Notícias</a></h5>
        <h6><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></h6>
        <ul>
            <li><a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
            <li><a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
        </ul>
    </div>
</div>

É lógico que alguns pontos podem ser discutidos, alterados, etc… mas, vendo esse html aqui, quem vê o código entende qual parte do conteúdo tem a sua devida importância: o que é titulo, é título, o que é lista de menu é lista de menu, o que é link é link.

E qual a vantagem?
Leitores de busca e indexação funcionam seguindo a semântica do seu código. Se você tem um título e um texto simples envoltos ambos com uma div, o buscador vai entender que ambos tem a mesma importância; quando você uma um h1 (ou até h7) num título e coloca o texto num parágrafo (p), o buscador entenderá que o título é mais relevante. E isso ajudará e muito na indexação, pode apostar.
Isso, sem contar que escrever o código dessa maneira acelera o processo de manutenção do html – principalmente quando ele é trabalhado por equipes – e diminui o peso do html final (com isso, gera menos consumo no tráfego de dados do seu servidor).
Ou seja, todo mundo ganha!