Doctype, Head, Charsets e Link

<!DOCTYPE html!> – o DocType não é uma tag HTML, mas uma instrução para que o navegador saiba qual a versão do código.

<html lang=”pt-br”> – o código HTML é uma série de elementos em árvore, em que alguns elementos são filhos de outros e consequentemente. O elemento principal é a tag HTML.

O atributo lang é opcional, mas é útil para informar qual o idioma do documento. Este atributo pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

<head> – a tag head contém os metadados com informações sobre a página e o conteúdo.

<meta charset=”utf-8″> – representa a tabela de caracteres que será utilizada para o “desenho” dos caracteres

<link rel=”stylesheet” type=”text/css” href=”estilo.css”> – a tag link vincula fontes externas que serão utilizadas no documento. Geralmente, é utilizada para importação de arquivos de estilo para a página, mas também podem ser utilizadas para representar a localização do feed da página e outras coisas.

Modelos de Conteúdo

Todas as tags de um documento HTML estão submetidas a algumas regras de posicionamento. Por exemplo, quais são as tags que um elemento pode conter ou estar contido.

Pode-se dividir os elementos em dois tipos: linha e bloco.

  • Os elementos de linha são caracterizados por marcarem texto.
  • Os elementos de bloco, dividem o conteúdo nas seções do layout.

Estas marcações podem ser divididas categorias, grupos de elementos com características similares.

Relacionamento entre a categoria de elementos segundo o WHATWG

Relacionamento entre a categoria de elementos segundo o WHATWG

 Metadata Content

Estes elementos formam uma relação com o documento e seu conteúdo com outros documentos. Geralmente, estão localizados dentro do <head>

  • base
  • command
  • link
  • meta
  • noscript
  • script
  • style
  • title

Flow Content

Representam a maioria dos elementos utilizados dentro do <body>. Caso seus elementos permitam inserção de qualquer conteúdo, pelo menos um descendente de texto deve estar presente.

  • a
  • abbr
  • address
  • area (se for um decendente de um elemento mapa)
  • article
  • aside
  • audio
  • b
  • bdo
  • blockquote
  • br
  • button
  • canvas
  • cite
  • code
  • command
  • datalist
  • del
  • details
  • dfn
  • div
  • dl
  • em
  • embed
  • fieldset
  • figure
  • footer
  • form
  • h1, h2, h3, h4, h5, h6
  • header
  • hgroup
  • hr
  • i
  • iframe
  • img
  • input
  • ins
  • kbd
  • keygen
  • label
  • link (se o atributo itemprop for utilizado)
  • map
  • mark
  • math
  • menu
  • meta (se o atributo itemprop for utilizado)
  • meter
  • nav
  • noscript
  • object
  • ol
  • output
  • p
  • pre
  • progress
  • q
  • ruby
  • samp
  • script
  • section
  • select
  • small
  • span
  • strong
  • style (se o atributo scoped for utilizado)
  • sub
  • sup
  • svg
  • table
  • textarea
  • time
  • ul
  • var
  • video
  • wbr
  • Text

Section Content

São os elementos que formam os cabeçalhos, rodapés e outras seções do documento

  • article
  • aside
  • footer
  • header
  • nav
  • section

Heading Content

Os elementos desta categoria definem os cabeçalhos de uma seção, e podem estar contidos em um elemento da categoria Section.

  • h1, h2, h3, h4, h5, h6
  • hgroup

Phrasing Content

Fazem parte desta categoria, os elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de parágrafo <p>.

  • a
  • abbr
  • area (se for descendente de um elemento mapa)
  • audio
  • b
  • bdo
  • br
  • button
  • button
  • canvas
  • cite
  • code
  • command
  • datalist
  • del (se ele contiver um elemento da categoria de phrasing)
  • dfn
  • em
  • embed
  • i
  • iframe
  • img
  • input
  • ins (se ele contiver um elemento da categoria phrasing)
  • kbd
  • keygen
  • label
  • link (se o atributo itemprop for utilizado)
  • map (se apenas ele contiver um elemento da categoria de phrasing)
  • mark
  • math
  • meta (se o atributo itemprop for utilizado)
  • meter
  • noscript
  • object
  • output
  • progress
  • q
  • ruby
  • samp
  • script
  • select
  • small
  • span
  • strong
  • sub
  • sup
  • svg
  • textarea
  • time
  • var
  • video
  • wbr
  • Text

Embedded Content

Nesta categoria estão os elementos que importam outra fonte de informação para o conteúdo.

  • audio
  • canvas
  • embed
  • iframe
  • img
  • math
  • object
  • svg
  • video

Interactive Content

Estão relacionados com a iteração com o usuário.

  • a
  • audio (se o atributo control for utilizado)
  • button
  • details
  • embed
  • iframe
  • img (se o atributo usemap for utilizado)
  • input (se o atributo type não tiver o valor de hidden)
  • keygen
  • label
  • menu (se o atributo type tiver o valor toolbar)
  • object (se o atributo usemap for utilizado)
  • select
  • textarea
  • video (se o atributo control for utilizado)