O que é HTML? HTML é uma abreviação para Hypertext Markup Language, ou em tradução literal, Linguagem de Marcação de Hipertexto. Já o HTML5 é uma evolução do HTML, mas vamos ver um pouco mais sobre isso em seguida.
Para podermos entender o que é o HTML5 primeiro temos que entender um pouco da história do HTML.
História do HTML
Criado por Tim Berners-Lee com a proposta de ser a linguagem central para a exibição na Web, o HTML começou a se popularizar a partir de 1990 quando o navegador Mosaic também se popularizou, o que levou a outros desenvolvedores e navegadores a usarem o HTML como convenção.
Atualmente, o HTML é a linguagem padrão usada por todos os navegadores para a construção de páginas, mas vale a ressalva, HTML NÃO é uma linguagem de programação, é uma linguagem de marcação.
Mas afinal o que é o HTML5?
O que é HTML5
Bom o HTML5 é uma evolução do HTML original.
Esse que por sua vez é uma linguagem de marcação que permite a criação e distribuição de conteúdo na web, seja texto, imagem ou até vídeo.
Entre 1993 e 1995 surgiram várias propostas de mudanças para o HTML, e assim surgiram várias variações (HTML+, HTML 2.0 e HTML 3.0).
As principais mudanças eram para incluir novas funcionalidades, mas não havia um padrão, alguns navegadores implementavam as novidades e outros não.
Foi só em 1997 que o W3C trabalhou na versão 3.2 tornando essa versão como padrão.
Em 2004 foi fundado um grupo de desenvolvimento para criar uma nova versão do HTML que seria o HTML5.
O que mudou do HTML4 para o HTML5?
A principal diferença entre o HTML4 e o HTML5 foi a inclusão de novas funcionalidades, principalmente na parte de web semântica.
Ou seja, o foco do HTML5 foi permitir que o código HTML escrito seja melhor interpretado, seja por humanos, seja por máquinas.
Mas se você tiver uma página escrita em HTML4 fique tranquilo, há ainda a compatibilidade.
Só é aconselhável atualizar sua página para os novos padrões do HTML5 caso você precise aparecer em motores de busca, como Google por exemplo.
Isso é preciso pois os motores de busca privilegiam as páginas escritas com uma melhor semântica.
Mas agora que sabemos o que é o HTML, o que muda do HTML4 para o HTML5 vamos ver como criar uma primeira página.
Criando a primeira página HTML5
Por padrão um arquivo HTML é um arquivo de texto com a extensão html.
O arquivo é composto por códigos que são adicionados entre <>.
Os códigos que ficam entre as <> são conhecidos como tags.
Cada tag tem um comportamento e semântica, e algumas tags são obrigatórias em um arquivo HTML.
As tags funcionam como uma árvore de conteúdo, onde o que está entre as tags é um nó filho dessa tag.
Por exemplo, a tag head é filha da tag html.
As tags são abertas com um conjunto de <> e fechadas por um conjunto </>.
Como por exemplo <head></head>.
Há também tags que não precisam de fechamento, como por exemplo a tag meta.
É possível criar páginas até mesmo no bloco de notas, mas para facilitar, vou indicar a criação das primeiras páginas online por esse site.
A estrutura da primeira página fica assim:
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<title>Página Teste</title>
</head>
<body>
<p>Minha primeira página</p>
</body>
</html>
Vamos entender a estrutura ponto a ponto.
A primeira TAG é a DOCTYPE.
DOCTYPE
A DOCTYPE não é uma tag HTML, mas ela deve ser a primeira linha de um arquivo HTML.
Essa tag serve para indicar para o navegador qual o tipo de informação o arquivo traz.
Em versões anteriores era preciso incluir uma definição de tipo de documento (DTD).
Mas no HTML5 não é preciso mais fazer essa declaração.
HTML
A primeira tag html propriamente dita é a tag HTML.
Dentro dessa tag temos ainda o atributo lang, que indicam a linguagem principal da página.
Essa tag é obrigatória.
HEAD
A tag head é onde são armazenados os metadados da página.
Ou seja, é a tag que armazena os dados usados pelos motores de busca.
Dentro dessa tag também é possível importar arquivos de folha de estilo (CSS) e de script (JavaScript).
meta charset
A tag meta charset indica qual a tabela de caracteres deve ser usada pelo navegador, sendo a do exemplo utf-8.
title
A tag title armazena o título da página.
BODY
A tag body armazena os dados do corpo da página.
Ou seja, o que está dentro da tag body é exibido na página.
Dentro do body podemos ter outras diversas outras tags, como h1 para título, p para parágrafos e img para imagens.
Além dessas tags é possível adicionar algumas tags com comportamento especial, como a tag script que permite adicionar código JavaScript dentro do HTML.
HTML5 O que é e como usar – Conclusão
Como pudemos ver o HTML5 é uma pedra fundamental em toda a WEB, sendo um dos pilares junto do CSS e do JavaScript.
É uma linguagem bem simples e fácil de se começar a aprender, com diversos materiais na internet, mas que demanda cuidados, principalmente na parte de semântica.
Vale lembrar que o HTML5 sozinho não é capaz de construir as páginas como nós estamos acostumados, sendo preciso a adição de uma folha de estilos usando CSS e interatividade usando o JavaScript.
Caso queira ver alguns projetos HTML para poder treinar confira esse post.
Agora se você quiser aprender a fundo HTML5, CSS e JavaScript criando projetos completos eu recomendo que veja o curso Programador FullStack JavaScript, dos nossos parceiros da OneBitCode.