Vamos continuar desmontando o esqueleto básico do nosso documento HTML de exemplo. Antes de começar essa parte, vamos relembrar o código de exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Título da minha página</title> <link rel="stylesheet" href="/c/style.css" type="text/css" media="screen, projection"> </head> <body> <div id="conteudo"> </div> </body> </html>
O que nos interessa para este post é o código que vai da linha 2 à linha 7 do código acima. O elemento HTML e o elemento HEAD e seus “elementos-filho”.
Elemento HTML e o atributo lang
O elemento HTML é descrito pela tag <html>, e é o elemento raiz de todo documento HTML.
Segundo o DTD do HTML 4.01 Strict, o elemento HTML não precisa ter nem sua tag de abertura nem sua tag de fechamento declaradas no documento. Isso acontece com diversos outros elementos e você vai poder checar por si mesmo cada um deles quando estivermos estudando a leitura e interpretação de DTDs.
Porém, como boa prática, vamos sempre usar as tags de abertura e fechamento para todos os elementos, salvo algumas exceções.
O mais importante de estudarmos com relação ao elemento HTML não é o elemento em si, mas sim seu atributo lang.
O atributo lang pode ser usado em quaisquer elementos do HTML, porém ele é especialmente importante para o elemento HTML, pois serve para definir o idioma predominante no documento.
No caso do nosso documento de exemplo, o idioma que estamos declarando é o pt-br, ou seja, português do Brasil.
O valor do atributo lang pode ser apenas um código de idioma ou um código de idioma seguido de um código de país.
Códigos de idioma devem seguir o padrão ISO-639-1 (códigos de duas letras) ou o ISO-639-2 (códigos de três letras). Você pode ver os valores possíveis em ambos os padrões na página de listagem de códigos de idioma, no site da biblioteca do congresso americano.
Códigos de país com duas letras devem seguir o padrão ISO-3166.
Não pode haver espaços dentro do atributo lang e os códigos de idioma e país devem ser separados por um hífem (-).
Declarar o idioma base do documento no elemento HTML é importante e essa informação pode ser usada, por exemplo, por um leitor de tela, para selecionar o idioma correto em que o documento será lido ou por um mecanismo de busca para classificar corretamente uma página em seus índices.
Quanto ao elemento HTML em si, não temos grandes coisas a falar. Sua tag de abertura deve vir logo após o DOCTYPE e sua tag de fechamento deve estar na última linha do documento. Ponto.
Elemento HEAD e seu conteúdo
O elemento HEAD deve ser declarado logo após a tag de abertura do elemento HTML e sua função é, basicamente, descrever meta-informações sobre o documento.
Essas meta-informações podem ou não ser visíveis para o usuário e algumas fazem sentido apenas em um determinado contexto ou para um determinado user-agent.
Os elementos que compõem o HEAD são: TITLE, o título do documento; META, descritor genérico de meta-informação, que tem diversas funções que veremos a seguir; LINK, que, ao contrário do que se pode pensar, não é o elemento que cria links dentro de um texto e, sim, links para formas alternativas de conteúdo, estilos CSS, páginas vizinhas, índices, e outras coisas mais; STYLE, que serve para declarar estilos dentro do próprio documento; SCRIPT, geralmente usado para conter ou referenciar scripts em JavaScript, mas pode ser usado para scripts em outras linguagens também; NOSCRIPT, que define um conteúdo a ser exibido caso o user-agent não tenha suporte a scripts
Vamos entender melhor cada um desses elementos:
Elemento TITLE
O título do documento. O elemento cujo conteúdo é mais relevante para os mecanismos de busca na hora de indexar e ranquear uma página.
Deve haver um, e apenas um, TITLE por documento HTML. Seu conteúdo deve, preferencialmente, descrever de forma simples e clara o conteúdo do documento e, em browsers gráficos, é o que será exibido no topo da janela do browser, em geral ao lado do nome deste.
Elemento META
Como já disse, existem diversos tipos de informação que podem ser descritas pelo elemento META. Alguns exemplos são:
O tipo de conteúdo e o conjunto de caracteres usado no documento: O META exibido no exemplo é desse tipo. Declara que o documento é do tipo text/html (ou seja, HTML) e que o conjunto de caracteres usado no documento é o UTF-8. Será usado pelo browser caso esta informação não seja enviada pelo servidor, no cabeçalho HTTP. Sempre declare este META como primeiro elemento do HEAD. Quanto antes ele vier no documento melhor, pois, caso ele precise ser usado, o browser terá que fazer uma releitura do documento e é melhor que isso seja feito enquanto poucos bytes, e principalmente, apenas caracteres ASCII, foram lidos.
O http-equiv indica que este META é uma informação equivalente a um cabeçalho HTTP.
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Descrição do documento: uma breve descrição do conteúdo do documento, que pode ser usada por sites de busca como descrição do site em suas listagens.
<meta name="description" content="Coloque aqui a descrição do site">
Palavras-chave: listagem de palavras-chave relevantes ao conteúdo do documento, que podem ser usadas por sites de busca (embora hoje já não sejam mais tão relevantes) e, supostamente, para outros fins, como escolha de anúncios do Adsense, por exemplo.
<meta name="keywords" content="basico,web,html,http">
Além destes exemplos de META, existem outros vários. Vamos vê-los no momento oportuno.
Elemento LINK
O elemento LINK define uma relação entre o nosso documento e outros documentos. Existem diversos tipos de relações que podem ser definidas.
O tipo de relação entre os documentos é descrita pelos atributos rel e rev.
Para entender a diferença entre rel e rev, tente pensar da seguinte forma: Se você diz “O documento X é uma versão alternativa do meu documento”, você deve usar rel; já se você disser “O meu documento é uma versão alternativa do documento X”, use rev.
Calma, vai ficar mais claro com os exemplos.
Vejamos alguns:
Documentos adjascentes e índices
Imagine um livro online. Você está escrevendo o documento que tem o conteúdo do capítulo 2. É interessante criar LINKs para o capítulo anterior, o próximo capítulo e o índice do livro. Esses LINKs podem ser usados, por exemplo, pelo browser, que pode fazer um pré-carregamento destas páginas enquanto estiver parado. Existe uma extensão para o Firefox que expõe, na barra de status, os LINKs presentes no documento. Chama-se Link Widgets.
Exemplos:
<link rel="Next" href="/capitulo-2">
<link rel="Previous" href="/capitulo-1"
<link rel="Index" href="/">
Pense: “O capítulo 2 é o próximo capítulo em relação a mim, que sou o capítulo 1″. rel na cabeça. Também seria certo, por exemplo:
<link rev="Previous" href="capitulo-2">
Ou seja: “Eu sou o capítulo anterior ao capítulo 2″. Pescou?
Versões alternativas
O tipo mais comum de versão alternativa são os feeds RSS e ATOM.
<link rel="alternate" type="application/rss+xml" href="/feed">
Note o atributo type. Ele descreve o tipo do documento que estamos referenciando. No caso, um feed RSS. Caso não seja declarado, entende-se que seja do mesmo tipo que o documento onde se encontra o link, no caso, text/html.
Além de feeds, podemos ter outros tipos de versões alternativas. Um PDF, por exemplo:
<link rel="alternate" type="application/pdf" media="print" href="arquivo.pdf">
Aqui entra em cena o atributo media, que define que este documento só fará sentido como uma versão alternativa, caso esta mídia esteja sendo usada. No nosso caso, print, ou seja, impressão.
Folhas de estilos CSS
Podemos usar o elemento LINK para aplicar uma folha de estilos CSS a um documento HTML. Exemplo:
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen">
Este link diz que o documento referenciado é uma folha de estilos para o nosso documento, do tipo text/css e que deve ser aplicado apenas quando a media screen (ou seja, tela) esteja sendo usada.
Bem, o artigo já está longo demais. Vamos deixar o restante dos elementos do HEAD para amanhã. Até lá.
Leia também:
- HTML – Esqueleto de um documento HTML – Parte 3: Outros elementos do HEAD
- HTML – Esqueleto de um documento HTML – Parte 1: DOCTYPE
- Título editável – exemplo de JavaScript/DOM
- Protocolo HTTP: métodos de requisição
- Padrões web: Desenvolvimento em camadas – Camada de comportamento
- Hospedagem de sites Dreamhost: 50% de desconto
outubro 28th, 2006 at 9:31 am
Ótima sua iniciativa de esmiuçar o HTML. Nunca se sabe o bastante que não se possa aprender mais.
Só um palpite quanto ao novo design…Preferia como estava antes. Quando cheguei aqui através do meu agregador de feeds tive a impressão de estar no brunotorres.net, só que com cores diferentes… Talvez seja interessante manter a identidade do basicodaweb diferenciada do brunotorres.net
outubro 11th, 2007 at 2:45 pm
Muito bom o conteúdo da página, mas tenho uma dúvida. Dá no mesmo usar ou ?
Devo usar os dois?
outubro 11th, 2007 at 2:47 pm
Não apareceu era o seguinte, usar [html lang="pt-br"] ou [meta name="language" content="pt-br"] ?
novembro 17th, 2008 at 12:06 pm
[...] HTML – Esqueleto de um documento HTML – Parte 2: HTML e HEAD [...]
setembro 21st, 2011 at 10:36 am
Unquestionably imagine that that you said. Your favourite reason seemed to be at the internet the simplest thing to bear in mind of. I say to you, I definitely get annoyed even as people think about worries that they plainly do not understand about. You controlled to hit the nail upon the top and also defined out the entire thing without having side effect , other folks can take a signal. Will probably be again to get more. Thanks
setembro 23rd, 2011 at 7:11 am
Hi there very nice website!! Man .. Excellent .. Amazing .. I will bookmark your site and take the feeds also?I am happy to search out a lot of helpful info right here within the post, we’d like work out more techniques in this regard, thank you for sharing. . . . . .
setembro 24th, 2011 at 9:04 am
I?m no longer sure where you’re getting your information, however great topic. I needs to spend a while studying much more or working out more. Thanks for magnificent information I was in search of this information for my mission.
setembro 27th, 2011 at 7:19 am
Its like you read my mind! You seem to grasp a lot about this, like you wrote the ebook in it or something. I feel that you simply could do with a few percent to drive the message home a bit, however instead of that, that is fantastic blog. An excellent read. I’ll certainly be back.
dezembro 14th, 2011 at 6:48 am
Hello there, simply turned into aware of your blog thru Google, and found that it is really informative. I’m gonna watch out for brussels. I will appreciate if you continue this in future. A lot of other folks will be benefited from your writing. Cheers!
dezembro 22nd, 2011 at 6:09 pm
My brother recommended I would possibly like this website. He was entirely right. This publish actually made my day. You can not consider just how much time I had spent for this information! Thanks!