Embora seu desenvolvimento tenha começado muitos anos antes, o HTML5 começou a entrar em uso comum com web designers / desenvolvedores em 2010. Logo no início, a linguagem pareceu familiar para muitos profissionais da Web porque, em vez de tentar reinventar tudo do zero, HTML5 construído sobre o que veio antes. Qualquer um que conhecesse o HTML 4.01 descobriu rapidamente que um pouco daquela versão poderia ser encontrada no HTML5.
Embora o HTML5 inclua muitos elementos que existem há algum tempo no HTML, ele também introduziu alguns elementos que eram novos no HTML5. Para muitos desses novos elementos, foi usada uma abordagem chamada "pavimentação dos caminhos da vaca". Este é um termo que é comumente usado em TI para, essencialmente, olhar para o que as pessoas já estão fazendo e fazer isso. No caso dos web designers, isso significava ver como eles já estavam construindo páginas e basear decisões em novos elementos nessas atividades. Por exemplo, muitos profissionais da Web criariam sites com divisões que usavam os atributos ID ou Classe de "cabeçalho", "navegação" e "rodapé". Como tal, o HTML5 introduziu esses novos elementos, permitindo que os profissionais da Web adicionassem mais significado a seus documentos usando elementos de seção dedicados em vez de apenas divisões. Essa combinação de familiaridade e uma abordagem que reconheceu as práticas atuais ajudou o HTML5 a ser rapidamente adotado pela indústria de web design.
O documento HTML5
Primeiramente, para usar qualquer novo elemento HTML5, seu documento deve incluir o tipo de documento HTML5, que é:
Você pode notar que este doctype não menciona especificamente "HTML5", mas simplesmente afirma a versão como "html". Isso ocorre porque esse tipo de documento é o que deve ser usado no futuro para todas as iterações do idioma.
De fato, o HTML5 deve ser a última versão numerada do idioma, com novas alterações sendo adicionadas em uma base consistente no futuro. De fato, alguns dos elementos da lista abaixo foram adicionados ao idioma bem depois do impulso inicial em 2010!
As tags HTML5
| Tag | Explicação | |
|---|---|---|
| Âncora ou link | ||
| Abreviação | ||
| Endereço ou autores do documento | ||
| Mapa de imagem do lado do cliente | ||
| Artigo | ||
| Conteúdo tangencial | ||
| Fluxo de áudio | ||
| Negrito | ||
| Caminhos básicos de URI para elementos no documento | ||
| Algoritmo bidirecional | ||
| Citação longa | ||
| Corpo da página | ||
| Quebra de linha | ||
| Botão de formulário HTML | ||
| Lona para gráficos dinâmicos | ||
| Comente | ||
| Legenda da tabela | ||
| Citação | ||
| Referência de código | |
| Coluna da tabela | ||
| Agrupamento de colunas de tabela | ||
| Comando ou ação na página | ||
| Definição do tipo de documento | ||
| Grade de dados | ||
| Opções predefinidas para outros controles | ||
| Descrição da lista de definições ou extensão do discurso | ||
| Texto excluído | ||
| Informações adicionais sob demanda | ||
| Definição | ||
| Conversação | ||
| Divisão lógica | ||
| Lista de descrição | ||
| Definição de termo da lista ou caixa de diálogo | ||
| Ênfase | ||
| Elemento embutido para plugins | ||
| Grupo de controles de formulário | ||
| A legenda usada para um | ||
| Figura com legenda opcional | ||
| Rodapé da página | ||
| Formato | ||
| Manchete de primeiro nível | ||
| Título de segundo nível | ||
| Manchete de terceiro nível | ||
| Quarta manchete de nível | ||
| Manchete quinto nível | ||
| Manchete do sexto nível | ||
| Chefe do documento | ||
|
| Cabeçalho de uma página | |
| Grupo de cabeçalho | ||
| Regra horizontal | ||
| Elemento raiz de uma página da Web | ||
| Estilo de texto em itálico | ||
| Quadro Inline | ||
| Imagem | ||
| Elemento do formulário de entrada | ||
| Elemento de formulário de botão | ||
| Elemento de formulário da caixa de seleção | ||
| Entrada de cor | ||
| Data de entrada | ||
| Entrada global de data e hora | ||
| Entrada de data e hora local | ||
| Entrada de endereço de email | ||
| Elemento de formulário de upload de arquivo | ||
| Elemento de campo de formulário oculto | ||
| Elemento do formulário de imagem | ||
| Ano e mês de entrada | ||
| Entrada numérica | ||
| Elemento do formulário de senha | ||
| Elemento de formulário de botão de rádio | ||
| Entrada numérica imprecisa | ||
| Redefinir o elemento do formulário de botão | ||
| Campo de pesquisa | ||
| Elemento de formulário de botão Enviar | ||
| Entrada de número de telefone | ||
| Elemento de formulário de campo de texto | ||
| Entrada de tempo | ||
| Entrada de URL | ||
| Ano e semana de entrada | ||
| Texto inserido | ||
| Texto a ser inserido pelo usuário | ||
| Gere chaves seguras para gerenciamento de certificados | ||
| Etiqueta de forma | ||
| Forma de legenda do conjunto de campos | ||
| Item de lista | ||
| Link para documentos relacionados | ||
| Área principal do conteúdo em uma página | ||
| Mapa de imagem do lado do cliente | ||
| Texto marcado ou realçado | ||
| Lista de Comandos | ||
| Meta informação sobre o documento | ||
| Calibre escalar | ||
| Definir uma área com links de navegação | ||
| Conteúdo quando os scripts não estão disponíveis | ||
| Objeto não padrão | ||
|
| Lista ordenada ou numerada | |
| Grupo de opções em uma lista de seleção | ||
| Opção em uma lista de seleção | ||
| Resultado de um cálculo de formulário | ||
| Parágrafo | ||
| Parâmetro de um elemento de objeto | ||
|
| Texto pré-formatado | |
| Indicador de progresso | ||
| Cotação em linha curta | ||
| Parêntese Ruby | ||
| Texto Ruby | ||
| Anotação Ruby | ||
| Texto riscado | ||
| Amostra de saída | ||
| Scripts | ||
| Seção de uma página | ||
| Selecione ou listas de menu suspenso | ||
| Tamanho pequeno da fonte | ||
| Fonte de mídia | ||
| Recipiente de estilo inline genérico | ||
| Forte ênfase | ||
| Folhas de estilo | ||
| Subscrito | ||
| Resumo do conteúdo do elemento DETALHES | ||
| Sobrescrito | ||
| Mesa | ||
| Linhas do corpo da tabela | ||
| Célula da tabela | ||
| Elemento de formulário multilinha | ||
| Linhas de rodapé da tabela | ||
| Célula do cabeçalho da tabela | ||
| Linhas de cabeçalho da tabela | ||
| Define o tempo | ||
| Título | ||
| Linha da tabela | ||
|
| Lista desordenada ou com buletted | |
| Texto definido ou definido pelo usuário | ||
|
Vídeo ou filme incorporado na página |
