[série] A estrutura e a semântica do HTML5 – parte 1

Olá pessoal!
Irei postar aqui uma série que esmiúça a estrutura do HTML5 e sua semântica. O texto original pertence ao Edu Agni, ele é consultor especialista em User Experience, trabalha com isso há 11 anos. Entre outras coisas, o cara é curador da área de design e multimídia da Campus Party Brasil (um dos maiores eventos de tecnologia do mundo). Espero que apreciem. Será dividido em 3 partes. Segue a primeira.

A estrutura e a semântica do HTML5 – parte 1

Se você quer se aventurar com o HTML5, entenda aqui a sua estrutura básica, a semântica das principais novas marcações e algumas ferramentas. Sempre gosto de salientar para as pessoas que a maior evolução do HTML5 foi na sua semântica. A maior parte dos profissionais que vêm trabalhando com HTML estão muito  preocupados com aquelas animações pirotécnicas (que dependem muito mais de javascript do que do HTML), e sequer entendem o significado das marcações.

Bem, não caia nessa! Primeiro, as primeiras coisas… se você está querendo se aventurar pelo mundo encantado do HTML5, preste atenção: vou explicar aqui o que mudou na estrutura básica, falar sobre a semântica das principais novas marcações, e dar umas dicas de ferramentas para você trabalhar 😉

Estrutura básica, Doctype e Metadados

Olhando para a estrutura básica de código do HTML5, você vai perceber que ela se mantem praticamente idêntica à versão anterior, com excessão do Doctype e da Metatag Charset.

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <meta charset="utf-8"/>
       <title>Entendo a estrutura e semântica do HTML5</title>
   </head>
   <body>
       <p>Olá mundo!</p>
   </body>
</html>

Doctype e o elemento HTML

Document Type Defination (DTD, ou simplesmente Doctype) é uma instrução que informa ao navegador qual é a especificação do código que está sendo usada no documento, e deve ser declarado antes da tag <html>.

Na versão anterior do HTML, a declaração do Doctype era mais extensa e difícil de decorar, havendo a necessidade de referenciar para o navegador o arquivo DTD com as definições daquela especificação:

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

No HTML5 a inserção do Doctype foi simplificada, e a responsabilidade de buscar as definições da especificação fica por conta do próprio navegador:

<!DOCTYPE html!>

Após a declaração do Doctype, iniciamos o código HTML. Na árvore de elementos do código, a tag principal é a <html>, que comporta todos os outros elementos filhos.

<html lang="pt-br">

É na tag <html> que declaramos o idioma principal do documento, através do atributo (que pode ser usado também em outras tags do documento). Na tag <html> também podemos inserir atributos como o xmlns (XML Namespace), como quando usamos em nossa página elementos da FBML (Facebook Markup Language):

<html lang="pt-br" xmlns:fb="http://www.facebook.com/2008/fbml">

Metadados

Os Metadados são um conjunto de informações a respeito da página e do conteúdo nela publicado. Essas informações são usadas pelos navegadores e user-agents em geral, sendo invisíveis para os usuários. Todos os Metadados ficam contidos na tag <head>:

<head>
   <meta charset="utf-8">
   <title>Entendo a estrutura e semântica do HTML5</title>
   <meta name="keywords" content="HTML5, CSS3, frontend, agni">
   <meta name="description" content="Se você quer se aventurar com o HTML5, entenda aqui a sua estrutura básica, a semântica das principais marcações novas e algumas ferramentas.">
   <meta name="author" content="Edu Agni">
   <meta name="robots" content="index,follow">
   <link rel="alternate" type="application/rss+xml" title="Feed de notícias" href="/feed">
   <link rel="stylesheet" type="text/css" href="/sidecode/style.css">
   <script src="/sidecode/scripts.js"></script>
</head>

Informações como Title e Description por exemplo, são usadas pelos mecanismos de busca para montar uma SERP (Search Engine Results Page).

Links

Com a tag <link> podemos referenciar documentos que serão usados em nossa página. O atributo relindica o tipo de documento que está sendo referenciado, como por exemplo o rel=”alternate”indicando uma forma alternativa de acessar o conteúdo do site via feed, ou o rel=”stylesheet”fazendo referência à folha de estilo CSS usadas para formatar a página.

Importante lembrar que a tag <link> não deve ser confundida com a tag <a>, usada para criar links dentro do conteúdo da página.

<link rel="alternate" type="application/rss+xml" title="Feed de notícias" href="/feed">
<link rel="stylesheet" type="text/css" href="/sidecode/style.css">

Existem outras formas de links que podem ser inseridos na página. No caso de um blog, podemos usar os links para indicar a cronologia dos conteúdos publicados:

<link rel="index" title="Página inicial" href="http://enderecodoblog.com.br/">
<link rel="start" title="Primeiro Post do Blog" href="http://enderecodoblog.com.br/primeiro">
<link rel="prev" title="Post Anterior" href="http://enderecodoblog.com.br/anterior">
<link rel="next" title="Próximo Post" href="http://enderecodoblog.com.br/proximo">

Scripts

Quando trabalhamos com scripts em nossas páginas, estamos habituados a declarar o tipo de linguagem que estamos usando através do atributo type:

<script type="text/javascript" src="/sidecode/scripts.js"></script>
<script type="text/javascript">
...
</script>

No HTML5, o atributo type passa a ser opcional, pois entende-se que o Javascript é a linguagem padrão de scripts usada na Web:

<script src="/sidecode/scripts.js"></script>
<script>
...
</script>

 
TO BE CONTINUED… Isso tem continuação!!

Anúncios

Autor: Daniel Brandão

Desenvolvedor Web e Professor. Gosto de debater, escrever e comentar a respeito da vida, tecnologia, o pensar, a sociedade, a vida cotidiana e da vida vindoura.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.