HTML5 e as novas tags de estrutura [Parte 1]

HTML5 new structural tagsNa construção de um documento HTML, as tags utilizadas para atribuir significância ao conteúdo – os headings (h1-h6) – são os “responsáveis” pelo outline do conteúdo. A tag div, um elemento genérico sem qualquer peso semântico, foi o recurso encontrado pelos developers, designers e webmasters para agrupar o conteúdo espacialmente.
Imagine a seguinte estrutura, em que o documento estará dividido entre um cabeçalho, a área central à esquerda (a maior) onde teremos o conteúdo principal, a área adjacente contará com tópicos relacionados com o tema da página, e por fim teremos um rodapé.

site_exemplo

Até então, iriamos criar elementos div com id name ou class name alusivos ao conteúdo que estará presente no seu interior. No entanto essas “semânticas” servem somente como pontos de âncora para que os developers, designers e webmaster possam atribuir comportamento visuais e de interacção, através de CSS e JavaScript, pois as verdadeiras secções terão de ser feitas através de uma correcta utilização dos headings.

Em 2005, o Google analizou mais de um milhão de páginas e, três anos mais tarde, o Opera analizou cerca de quatro milhões. Ambos procuraram a mesma coisa, quais os nomes mais utilizados para atribuir significado a essas divs.

Em Outubro de 2014, o HTML5 passou a ser uma recomendação do W3C, ou seja, passou a ser o standard. Nesse documento constam quatro novas tags estruturais que foram retiradas dessa análise feita anteriormente. As novas tags estruturais são article, section, nav, aside. Iremos abordar os diferentes elementos em artigos distintos.

Comecemos pela definição do elemento nav segundo a recomendação de 28 Outubro de 2014 presente no site do W3C:

“Uma nav representa uma secção da página que liga a outras páginas ou partes dentro da mesma: uma secção com links de navegação(…)”

Este é, talvez, o novo elemento cuja interpretação é mais simples. Vejamos como é que o tradicional elemento ul, utilizado como menu de navegação será alterado:

HTML 4.1

<ul id="nav">
   <li><a>link1</a></li>
   <li><a>link2</a></li>
</ul>

HTML 5

<nav>
   <ul>
      <li><a>link1</a></li>
      <li><a>link2</a></li>
   </ul>
</nav>

Note que se eliminou o atributo id=”nav” do elemento ul.

html5_outliner

Ao visualizarmos o documento acima, através de um
HTML5 Outliner como a extensão “Headings Map” para o Google Chrome, é possível ver a secção que o elemento nav faz.

Repare que o Outliner marcou os elementos nav como um erro, e tal se deve ao facto de não ter atribuído qualquer heading à nav.

No próximo artigo continuaremos a analisar os novos elementos estruturais de HTML5 e no final será então possível compararmos as estruturas criadas na produção da página acima.

HTML5 e a simplificação das Tags

HTML5_TagsO caminho delineado para a evolução do HTML vai ao encontro da simplificação. Já num artigo anterior falei sobre a simplificação na declaração do DOCTYPE. A meta informação que se deveria de incluir para definir o tipo de conteúdo também foi simplificado, ficando somente o código de caracteres que deverá ser utilizado pelo servidor. Apesar desta simplificação, continua a ser aconselhado a inserção do charset por razões de segurança.

HTML4.01

<meta http-equiv="content-type" content="text/html" charset="utf-8">

HTML5

<meta charset="utf-8">

O atributo type foi outro elemento retirado nas especificações do HTML5:

HTML4.01

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"> 

HTML5

<link rel="stylesheet" href="style.css">
<script src="script.js"> 

Inclusivé a utilização de aspas (“) passou a ser opcional, desde que o valor do atributo não contenha espaços:

HTML5

<link rel=stylesheet href=style.css>
<script src=script.js> 

Claro que esta última utilização, somente por razões de retro-compatibilidade não é aconselhável (mas será algo que se espera encontrar de futuro).

Várias tags deixaram de exigir o seu correto “fecho” – <p>, <li>, <tr>, <td>, <body>, <html>, … – mas, e uma vez mais por razões de retro-compatibilidade, o W3C aconselha a que continue a fechar a tag.

No próximo artigo abordarei as novas tags que visam uma web semântica. Até lá.

HTML5 e o Viewport

Viewport (src Google Images)

Viewport (fonte Google Images)

No início do mês de Maio, o Google tornou oficial que a utilização do seu motor de pesquisa através de dispositivos móveis já suplanta a utilização via desktop. Ou seja, cada vez mais se navega na Web através de dispositivos móveis – smartphones, tablets, etc. Então certamente que já lhe aconteceu aceder a uma página através do seu dispositivo, e o browser ao concluir o carregamento da mesma, umas vezes encolhe todo o conteúdo para caber dentro do ecrã, noutras vezes deixa o conteúdo no seu tamanho original excedendo o espaço disponível no ecrã (viewport).

Esse comportamento é controlado através de uma meta-tag de HTML5, onde poderemos definir quanto é que o viewport poderá encolher ou aumentar o conteúdo da página.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />

Através do atributo content poder-se-á então declarar:

  • width:  a dimensão da página;
  • initial-scale: o nivel inicial de zoom da página quando carregar no browser;
  • minimum-scale: o nível mais baixo de zoom que a página permite;
  • maximum-scale: o nível mais alto de zoom que a página permite.

No código-exemplo acima, está-se a declarar que o conteúdo deverá utilizar somente a área disponível do viewport, sem permitir qualquer tipo de zoom (in ou out) do conteúdo. Esta definição utiliza-se quando se pretende ter um conteúdo responsivo (mais sobre este tema num futuro artigo).

Poderão ler mais sobre as especificações da meta-tag viewport no site do W3C.

HTML5 e o Doctype

html5 superpowers

HTML on ‘roids (imagem retirada do Google)

O HTML5 traz-nos algumas simplificações e muitas novidades – algumas delas darão boas dores de cabeça na criação de conteúdos ricos e criativos. Vamos por partes…

Todos os documentos HTML deverão começar com uma declaração da versão do HTML – o Doctype – que a página contêm. Antes da última revisão dos standards da linguagem HTML, existiam várias definição de tipo de documento – DTD (document type definition):

  • HTML 4.01
    • Strict (“strict.dtd”)
    • Transitional (“loose.dtd”)
    • Frameset (“frameset.dtd”)
  • XHTML 1.0
    • Strict (“xhtml1-strict.dtd”)
    • Transitional (“xhtml1-loose.dtd”)
    • Frameset (“xhtml1-frameset.dtd”)
  • XHTML 1.1
    • DTD (“xhtml11.dtd”)

Além de existirem múltiplos DTD, a forma de escrever o doctype também não era muito simplificado:

HTML4.01 / XHTML1.0 / XHTML1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Felizmente, com as especificações do HTML5 a passarem à fase de “recomendação”, já podemos começar a utilizar a nova forma de declarar o doctype:

HTML5

<!DOCTYPE html>

De momento passou mesmo a ser desaconselhado a utilização dos doctypes obsoletos por serem demasiado longos.

Espero que tenham gostado deste primeiro artigo de uma série sobre as novas funcionalidades do HTML5.