funmachine

HTML 5 – As novas tags

2 comentários

Mais um artigo da colecção HTML5, desta vez sobre as principais tags HTML5.

HTML5 – Introdução

HTML5 – As novas tags

O DocType

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Isto é o doctype! Deve ser sempre a primeira linha de qualquer documento HTML e serve para indicar ao browser qual a versão do HTML em que o documento está escrito. Existem dezenas de doctypes, que podem fazer o browser “entender” o HTML de diferentes formas. Daí, é importante usar um doctype que faça o browser correr num modo standard. Por exemplo, o doctype acima – XHML 1.0 Strict – contem todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou obsoletos (como tag font). Frames também não são permitidos e o HTML tem que ser escrito como um XML válido.
Não existe nenhum problema em continuar a usar este tipo de DocType, mas porque não usar o novo DocType HTML5 que é mais pequeno, legível e faz os todos os browsers recentes correr em modo standard:

<!DOCTYPE HTML>

O elemento Header

Supõe que precisas criar um cabeçalho e algumas secções para uma página HTML:

</pre>
<div id="header">
<h1>O meu Site</h1>
 Não tenho a certeza o que escrever aqui...</div>
<pre>

Não existe nenhum problema em continuar a usar esta estrutura, é HTML5 válido de qualquer forma. Mas uma novidade do HTML5 é que fornece alguns elementos adicionais para usar como cabeçalhos e secções em páginas Web.

Vamos então começar por analisar o cabeçalho (a div com id header). Apesar de comum, está estrutura não representa nada, o browser não faz ideia que isto se trata de uma secção “header”, nos enquanto “programadores” é que reconhecemos este padrão como uma estrutura de cabeçalho. O HTML5 define um elemento <header>, na nossa página podíamos reescrever da seguinte forma:

<header>
<h1>O meu Site</h1>

 Não tenho a certeza o que escrever aqui...</header>

Navegação

Na génese dos documentos HTML está a navegação, afinal é por existir navegação numa página web que podemos navegar de umas páginas para outras, de documento em documento. Tipicamente, referimos a navegação de um website como um “menu”. A estrutura mais comum para criar um menu é recorrendo a listas HTML:

</pre>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Acerca</a></li>
	<li><a href="#">Contactos</a></li>
</ul>
<pre>

Utilizar listas é válido, mas traz um problema, não existe forma de saber que determinada lista se refere ao menu do website. Imagem uma pessoa com dificuldades visuais, que usa um software text-to-speech para “ler” uma página web. O software carrega a página HTML e “lê” o site, permitindo que a pessoa ouça o que está escrito. Se não identificarmos o menu explicitamente, o software não tem forma conveniente de saber que existe um menu principal onde a pessoa pode navegar para diferentes secção do site. Se existir uma forma de identificar o menu de navegação do site, o software pode facilmente apresentar à pessoa quais os links disponíveis para navegar:

<nav>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Acerca</a></li>
	<li><a href="#">Contactos</a></li>
</ul>
</nav>

Secções

O elemento <section> pode ser visto como um contentor para uma parte significativa de uma página web, da mesma forma que num livro, um capítulo engloba uma secção significativa do livro.
Usar o elemento <section> é uma forma eficiente de organizar e separar o conteúdo numa página Web. Por exemplo, em vez de criar uma lista de artigos independentes numa página web, ou englobar numa tag <div> sem qualquer significado, podemos usar o elemento <section>.

<section>
<div>
<h1>Title</h1>

Lorem Ipsum si dolore... ... ...</div>
</section>

Como podemos começar a perceber, tags como <nav>, <section> não têm por objectivo fornecer nenhumas funcionalidades novas, trata-se mais de permitir dar significado ao conteúdo que escrevemos.

Hgroup

O elemento <hgroup> representa o cabeçalho de uma secção. É utilizado para agrupar os vários elementos <h> (h1… … h6) que eventualmente fazem parte do cabeçalho.

<hgroup>
<h1>Lorem ipsum si dolore</h1>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</h2>
</hgroup>

Artigos

</pre>
<div>28 de Março de 2012
<h2>  <a href="#"> Nova Entrada </a></h2>
 Lorem ipsum si dolore... ... ..</div>
<pre>

Em relação a div com a class “entrada”, podemos perceber esta estrutura como um artigo numa página, um grupo de elementos que em conjunto formam um artigo num website, por exemplo, uma lista de posts num blog, ou uma lista de notícias, ou até mesmo um único post ou notícia numa página de um website.

Mais uma vez, não existe problema algum em utilizar esta estrutura, é HTML5 válido! Mas o HTML5 introduz um novo elemento que permite organizar de uma forma mais clara um artigo numa página:

<article>
<h4>28 de Março de 2012</h4>

Lorem ipsum si dolore ... ... ...</article>

A tag <article> permite organizar um artigo numa página.

Datas e Hora

O elemento <time> permite facilmente identificar datas dentro de documentos HTML5:

<time datetime=”2012-03-28″ pubdate=””>28 de Março de 2012 </time>

Existem três componentes da tag <time>:

●      Machine-readable timestamp

●      Componente de texto Human-readable

●      Uma flag opcional pubdate

O timestamp pode indicar a data (como no exemplo) mas também podemos adicionar a hora, desta forma:

<time datetime=”2012-03-28T13:32:56″ pubdate=””>28 de Março de 2012</time>

O componente de texto pode ser qualquer coisa, não precisa de indicar uma data específica, pode ser algo como: “Á 5 minutos” ou até mesmo nada! A flag pubdate pode significar uma de duas, se a tag <time> está dentro de uma tag <article> indica que o artigo foi publicado naquela data e hora. Se a tag <time> não está dentro de uma tag <article> significa que o documento foi publicado na data e hora especificado na tag.

Footers

Imaginem o seguinte rodapé:

</pre>
<div>
<div id="FooterTwo">© 2012 HTML5 - Basic Tags</div>
<div id="FooterTree">HTML5, para MTM - <a href="http://www.epb.pt">EPB</a></div>
</div>
<pre>

Tipicamente encontramos este tipo de rodapés em página HTML, mas mais uma vez o HTML5 define um elemento específico para rodapés <footer>:

<footer>
<div>
<div id="FooterTwo">© 2012 HTML5 - Basic Tags</div>
<div id="FooterTree">HTML5, para MTM - <a href="http://www.epb.pt">EPB</a></div>
</div>
</footer>

Normalmente o footer contem informações sobre quem é o autor do web site, links para documentos relacionados, informações de copyright, etc.
O tipo de elementos que podemos inserir dentro de um footer não é definido à partida, pode fazer sentido criar um footer como o de cima, ou então, em casos de footers com mais conteúdos, podemos por exemplo criar secção <nav> dentro do elemento <footer>.

Aside

O objectivo deste elemento é designar conteúdo que está relacionado mas não faz parte do conteúdo principal da página. Podemos ver o <aside> como as notas que por vezes aparecem nos livros ou website: referências para artigos relacionados, curiosidades sobre o conteúdo, etc. Todo isso está relacionado com o conteúdo, apesar de não fazer parte do mesmo.

<article>
Lorem ipsum si dolore... ...
<aside>
<h1>lorem ipsum</h1>
Lorem ipsum si dolore... ... ...</aside></article>

Dialog

O elemento <dialog> permite identificar conversações numa página web, pode portanto, ser particularmente interessante para criar comentários e respostas a comentários.
Dentro do <dialog> temos ainda disponíveis os seguintes elementos:

  • <dt> para identificar o autor
  • <dd> para identificar o texto em si

Abel SoaresAqui está um conversa usando o elemento dialogJonh SmithParece interessante

Figure

Inserir imagens numa página web é uma tarefa rotineira para qualquer pessoa que desenvolve aplicações web.
Mais complicado é identificar a imagem e o texto associado a esta.
O HTML5 define o elemento <figure> que nos permite inserir imagens e conteúdos associados neste elemento.

<figure>
<legend>Figure 12. Using the FIGURE element </legend>
 <img src="“figure_element.jpg”" alt="“The" width="“240”/" height="“140”" border="“0”" /></figure>

Associado ou elemento <figure> temos o elemento <legend>. Como o próprio nome indica é um elemento html onde podemos definir a legenda da imagem.

HTML5 – Introdução

HTML5 – As novas tags


Anúncios

2 thoughts on “HTML 5 – As novas tags

  1. Pingback: HTML 5 – Introdução « funmachine

  2. Pingback: Tutorial: Como criar uma página com HTML5 (básico) | fatecanosaoroquense

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s