Atualmente, os documentos HTML são em grande parte estruturados usando elementos div. A formatação e posicionamento desses contêineres costuma ser feito por CSS. Para software como leitores de tela, esse procedimento é inútil, pois eles não conseguem reconhecer qual é a importância de determinados conteúdos. Isso deve mudar com os novos elementos de estruturação.
Dois dos elementos novos mais importantes são section e article, que são o foco deste tutorial.
Marcar artigos
Através do elemento article, textos (como posts em fóruns, artigos de jornais, etc.) podem ser marcados como artigos. O exemplo a seguir mostra a definição de um artigo típico.
<article> <h1>Criando aplicativos da web (Parte 09): jQuery mobile (1)</h1> <p>O jQuery é sem dúvida um dos frameworks JavaScript mais conhecidos. Portanto, o jQuery já é amplamente utilizado em sites "clássicos"...</p> ... </article>
Graças ao elemento article, você pode estruturar semanticamente seus conteúdos.
Como isso pode se parecer, pode ser facilmente mostrado através de um blog.
<article>
<header>
<h1>Criando aplicativos da web (Parte 09): jQuery mobile (1)</h1>
<p>Publicado em: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>O jQuery é sem dúvida um dos frameworks JavaScript mais conhecidos. Portanto, o jQuery já é amplamente utilizado em sites "clássicos"...</p>
...
<footer>
<p><small>Direitos autorais por PSD-Tutorials.de</small></p>
</footer>
</article>
Neste exemplo, dentro do elemento article, a divisão muito típica em cabeçalho, corpo e rodapé é feita. E tal divisão é muito comum em blogs.
Estabelecer seções
Continuando com o elemento section. O elemento section divide a página em diferentes seções. Essas seções podem ser, por exemplo, seções, capítulos, abas, etc. Através da section, é possível separar logicamente áreas como introdução e notícias atuais.Section destina-se à divisão dos conteúdos de acordo com critérios realmente significativos de conteúdo. A propósito, falarei novamente sobre a diferença entre section e div no final deste tutorial.
O exemplo a seguir mostra uma estrutura típica de blog. No entanto, essa estrutura ainda contém algo que é realmente necessário em muitos blogs, ou seja, uma área de comentários. Esta área de comentários é definida dentro de um elemento section. Os comentários individuais dentro da área de section são, por sua vez, envolvidos em elementos article.
<article>
<header>
<h1>Criando aplicativos da web (Parte 09): jQuery mobile (1)</h1>
<p>Publicado em: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>O jQuery é sem dúvida um dos frameworks JavaScript mais conhecidos. Portanto, o jQuery já é amplamente utilizado em sites "clássicos"...</p>
...
<section>
<h2>Comentários</h2>
<article>
<header>
<h3>Comentado por: Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Há uma hora</time></p>
</header>
<p>Obrigado pelo tutorial!</p>
</article>
<article>
<header>
<h3>Comentado por: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Há duas horas</time></p>
</header>
<p>Excelente! Isso me ajudou.</p>
</article>
</section>
</article>Aqui vai novamente a observação de que falarei mais detalhadamente sobre elementos como header, footer, etc., que também são usados aqui. Neste ponto, apenas digo isso: Através desses elementos, os conteúdos podem ser divididos em cabeçalho e rodapé, permitindo assim uma estruturação lógica adicional dos documentos.
Outro exemplo que mostra a combinação dos elementos article e section ainda mais claramente. Na verdade, o elemento section pode ser usado para dividir um artigo em áreas de conteúdo lógicas, cada uma com seus próprios títulos.
<article>
<h1>Desenvolvimento de aplicativos</h1>
<p>>Aqui você aprenderá como criar aplicativos da web.</p>
<section>
<h2>Criando aplicativos da web (Parte 09): jQuery mobile (1)</h2>
<p>>O jQuery é sem dúvida um dos frameworks JavaScript mais conhecidos.</p>
</section>
<section>
<h2>Criando aplicativos da web (Parte 08): Introdução rápida ao jQuery</h2>
<p>>O JavaScript é uma coisa boa para sites, afinal, muitas coisas interessantes podem ser feitas com ele.</p>
</section>
</article>
É também possível, aliás, definir elementos article dentro de um elemento section. Um exemplo típico disso pode ser uma área de comentários, como já mostrado. Mas também é possível dividir a seção nos temas abordados pelo blog.
Aqui está mais um exemplo correspondente:
<section>
<h1>Desenvolvimento de Apps</h1>
<article>
<h2>Criando Web Apps (Parte 09): jQuery mobile (1)</h2>
<p>jQuery é sem dúvida um dos frameworks JavaScript mais conhecidos.</p>
</article>
<article>
<h2>Criando Web Apps (Parte 08): Introdução rápida ao jQuery</h2>
<p>JavaScript é ótimo para sites, afinal de contas, permite fazer várias coisas interessantes.</p>
</article>
</section>
Além disso, um elemento section pode conter outros elementos section. Portanto, aninhamentos são permitidos. Aqui está mais um exemplo:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Bem-vindo</h2>
<p>Estamos felizes...</p>
</section>
<section>
<h2>Tutoriais</h2>
<p>>Aqui estão nossos tutoriais mais recentes...</p>
</section>
<aside>
<p>Contato</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Essa aninhamento de sections resulta na seguinte estrutura:
1. PSD-Tutorials.de
1.1 Bem-vindo
1.2 Tutoriais
1.3 Contato
- (c) 2014 PSD-Tutorials.de
Essas estruturações também são possíveis.
A diferença entre div, article e section
É admitidamente um pouco complicado entender a diferenciação entre div, article e section. Na verdade, o elemento article foi definido principalmente para estruturar posts de blog. O elemento section na verdade é uma camada abaixo do article. Além disso, dentro do elemento section, sempre deve haver um cabeçalho definido. Mesmo que não haja um cabeçalho definido na prática, teoricamente deveria ser possível especificar um cabeçalho dentro do elemento em questão.
É claro que os elementos div não são rejeitados no HTML5, eles devem continuar sendo usados. Eles são interessantes, por exemplo, sempre que se trata de agrupar elementos.
Por fim, é importante mencionar os efeitos visuais dos elementos apresentados até agora. Na verdade, para uma formatação adequada, é necessário o uso de CSS. O uso comum desses elementos não tem efeito no navegador. Aqui você está estruturando apenas o conteúdo semanticamente. Todas as questões relacionadas à aparência são tratadas através de folhas de estilo.
