Rafael Casachi

HTML5: Sintaxe Básica

HTML5: Sintaxe Básica
09 de setembro de 2016 12:38 | 0 Comentários

Este é o segundo post sobre HTML5. Nesse post, vou explicar como funciona a sintaxe básica do HTML5. Para ver a primeira parte, clique aqui. Ou acompanhe os posts publicados na sessão HTML5.

Estrutura Básica de um Documento HTML

Um documento HTML é formado por marcações chamadas de tags. Ou seja, tags são rótulos que indicam como o conteúdo deve ser apresentado pelo navegador. Cada tag tem uma funcionalidade específica. As tags começam com um sinal de menor (<) e terminam com um sinal de maior (>). Normalmente, as tags possuem pares:

<strong>texto</strong>

A primeira tag do par é chamada de tag de início (ou tag de abertura), a segunda tag é a tag final (ou tag de fechamento). As tags de fechamento possuem uma barra para indicar que o fim do elemento. As tags podem ser aninhadas dentro de outras tags, porém a ordem de fechamento das tags deve ser observada, assim sempre fechando primeiro a tag aberta por último:

<p><strong>texto</strong></p>

Além das tags de pares, existem as tags orfãs, que não possuem um par para fechá-las.

Atributos

Os atributos são as propriedades das tags, ou seja, informações adicionais para que a tag se comporte como esperado. Os atributos ficam descritos nas tags de abertura e seus valores são passados entre aspas duplas. Existem atributos globais que são utilizados por todas as tags e possuem atributos específicos para cada tag. 

<a href="www.rafaelcasachi.eti.br">Clique aqui</a>

No exemplo acima, a tag <a> possui um atributo href, que passa um endereço de destino para a tag <a>.

Enfim, o código básico

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

Para quem já trabalhava com HTML, o HTML5 mudou pouco das versões anteriores. A sintaxe do HTML5 é compatível com HTML4 e com XHTML e seus código ficaram mais claros e simples.

DOCTYPE

O doctype deve ser a primeira linha de um documento html. O doctype indica ao navegador qual especificação utilizar. Em versões anteriores do HTML, era necessário informar o DTD diretamente no doctype, agora a responsabilidade é do navegador. O doctype não é uma tag html, mas uma instrução para que o navegador saiba qual versão do código a marcação foi inscrita.

TAG HTML

A marcação principal do documento html é a tag html (<html></html>). Todas outras tags devem estar dentro desta tag. O atributo lang descrito no exemplo acima, indica o idioma principal do conteúdo do documento. Sendo necessário para que os user-agents e engines de busca possam identificar e classificar o conteúdo da página. Estou considerando um padrão de desenvolvimento incluir o atributo lang, devido a importância com a Análise SEO.

TAG HEAD

A tag head (<head></head>) mantém as informações de cabeçalho do documento. Essas informações não são visíveis para o usuário, mas são dados implícitos para o controle do documento. 

A Tag HEAD é onde fica toda a parte inteligente da página. (W3C)

AS METATAGS

As metatags descrevem informações sobre o documento. Normalmente são usadas para descrever a descrição, palavras-chaves, autor, entre outras informações das páginas. As metatags ajudam as engines de busca a classificar melhor as páginas.

No exemplo acima usamos a metatag charset (<meta charset="UTF-8">), que é uma tag orfã que indica qual tabela de caracteres a página está utilizando. Como é a metatag obrigatória, estou considerando ela padrão da estrutura básica de um documento html. Em outra publicação, irei mostrar as metatags mais utilizadas.

TAG TITLE

A tag title (<title></title>) define o título da página que é visualizado na barra de título do navegador. Também é utilizado pelos engines de busca para exibir os titulos das buscas.

TAG BODY

Dentro da tag body (<body></body>) fica o documento em si, é onde a mágica acontece. Todas as tags semântica para os conteúdos ficam dentro da tag body.

 

Esta é a estrutura básica do documento html. Nos próximos posts, irei escrever sobre as tags que ficam dentro da tag body e suas características. Para acessar a sessão de posts de HTML5, clique aqui. Deixe um comentário abaixo.

Não seja chato, deixe seu comentário:

Veja outros comentários:

Ninguém comentou ainda. Corra e seja o primeiro.