nov 23

Tags de Conteúdo HTML

Front-end, HTML, HTML5, Marcação 1 Comentário html5_banner

A algum tempo eu não escrevo aqui no blog sobre front-end development, mas essa também é uma área fundamental para o desenvolvimento de boas aplicações que sejam ao mesmo tempo completas, proporcionem uma facilidade de uso para o utilizador da mesma, apesar das novas tags HTML5 já terem sido amplamente tratadas em sites especializados acredito que agora que a maioria dos navegadores já possui suporte completo para elas seja a hora de relembrar um pouco. Nesse artigo vou falar apenas das tags de conteúdo da nova versão da linguagem, deixando de lado um pouco as tags multimídia.

Introdução sobre Semântica

A versão 5 da linguagem HTML tem grandes melhorias no que diz respeito a semântica de uso das tags, mas antes de explicar cada uma dessas tags é preciso saber melhor o que de fato é semântica, a semântica aplicada a marcação de páginas HTML é a correta relação entre as tags existentes na linguagem e o conteúdo inserido nelas, ou seja, utilizar semântica corretamente no HTML é marcar um parágrafo com a tag <p> e um link com a tag <a>, porém, esses são exemplos mais óbvios de semântica, a versão 5 da linguagem HTML vem resolver o problema da ausência de semântica da tag <div>, essa tag por natureza é ausente de significado, e seu objetivo é apenas demarcar uma divisão na página, na maioria das vezes apenas por critérios de apresentação.

As novas tags de conteúdo da linguagem tem como objetivo incorporar significado a algumas das áreas mais comuns de uma página HTML, dessa forma são criadas as tags <header>, <section>, <article>, <nav>, <aside> e <footer> das quais vou tratar abaixo.

As Novas Tags

A tag <header> é responsável por marcar a porção do código que se refere ao cabeçalho da página ou seção, esse cabeçalho pode conter por exemplo o titulo do site, uma imagem de cabeçalho e até mesmo um menu principal delimitado pela tag <nav> tratada abaixo. Da mesma forma a tag <footer> é responsável por marcar o rodapé do mesma página ou seção, podendo conter os mesmo elementos da tag anterior.

A tag <section> delimita uma seção do site ou uma seção do site ou do conteúdo, dependendo de onde essa tag está presente na hierarquia do código, delimitados por essa tag podem estar os títulos do conteúdo ou da seção do site. Já tag <article> pode ser literalmente traduzida para artigo, e é dentro dessa tag que deve estar o conteúdo de fato do site ou aplicação. A tag <aside> representaria então o conteúdo relacionado ao conteúdo principal do site, porém, que tem um grau de importância menor que o conteúdo principal delimitado pela tag <article>. Além disso pode representar algum conteúdo relacionado ao uma seção do site e portanto ser utilizado juntamente com a tag <section>.

Por fim tag <nav> é responsável pela navegação do site, portanto é recomendável que os menus do site estejam delimitados pela mesma.

Estrutura dos Elementos na Página

Esse é o principal ponto que desejo tratar nesse artigo, não existe um consenso nem uma regra explicita sobre a estruturação dos elementos na página, o que permite algumas interpretações de significados diferentes para cada um das tags de acordo com a hierarquia dos elementos no site, por exemplo, uma tag <header> ou <footer> um nível imediatamente abaixo da tag <body> representaria o cabeçalho ou rodapé da página, porém, caso essas mesma tags fossem utilizadas dentro de uma tag <section> elas passariam a representar o cabeçalho e o rodapé dessa seção individualmente, dessa forma uma página inteira poderia conter vários cabeçalhos e rodapés, cada um deles se referindo a seções distintas da página.

Da mesa forma isso pode acontecer com a tag <nav>, que caso inserida um nível diretamente abaixo da tag <body> ou dentro da tag <header> ou <footer> da página, representaria o menu de navegação principal do site, a mesma tag inserida dentro da tag <section> poderia representar uma navegação secundária ou específica para aquela seção.

Agora o ponto que mais permite diferentes utilizações das tags é aquele que se refere ao relacionamento entre as tags <section>, <article> e <aside>. Para começar as tags <section> e <article> poderia ser aninhadas infinitamente, nesse caso uma <section> imediatamente após a declaração de <body> poderia representar uma seção do site, que por sua vez poderia delimitar uma tag <article> que delimitaria uma nova tag <section> representando uma seção específica do conteúdo e não mais da página. Além disso a tag <section> poderia ser diretamente aninhada representando uma seção principal e outras sub-se

Uma resposta para “Tags de Conteúdo HTML”

  1. […]                                       Fonteshttp://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdfhttp://www.pauloeduardo.com/2011/11/23/tags-de-conteudo-html/http://tecmundo.com.br/html5/34244-w3c-finaliza-especificacoes-do-html5.htm […]

Deixe uma resposta