HTML5, o que é? - Resumo Básico

Imagem de Free-Photos por Pixabay

Com certeza você já viu ou ouviu falar dessas quatro letrinhas, mas não sabe ou não lembra o que ela é e qual a sua importância para o mundo de hoje, pois bem, neste artigo iremos descobrir um pouco sobre essa incrível tecnologia, como ela contribui com nossa querida era da informação e talvez ao final vejamos algo interessante com ela.

Pois bem, chega de papo e vamos para o que de fato interessa.

HTML (acrônimo para HyperText Markup Language, que em bom português significa "Linguagem de Marcação de Hipertexto"), é uma linguagem de Marcação - veremos no futuro os tipos de linguagens e como diferenciar os tais - usada principalmente no desenvolvimento de páginas web. Documentos HTML - como são chamados os arquivos .html - são interpretados pelo navegador tais como Chrome, Edge e etc.

O HTML nasceu, como várias outras tecnologias, com a finalidade de resolver um certo problema em um certo contexto, que neste caso foi um problema de Tim Berners Lee de comunicação e da disseminação das pesquisas que ele e seu grupo de colegas faziam, entres eles e outros.

A linguagem ganhou notoriedade e maior importância quando passou a ser usada na rede pública da época, assim ajudando na construção da Internet que conhecemos e usamos diariamente hoje.

Como já vimos, o HTML é a liguagem base da internet. Foi criada para ser de fácil entendimento por seres humanos e também por máquinas, como por exemplo o Google ou outros sistemas que percorrem a internet capturando informação.

Ok, já conhecemos um pouco da história dela e para que serve, vamos agora ver alguns exemplos de como funciona?

O HTML é uma linguagem baseada em marcação, isto é, para tudo que quisermos colocar em um documento HTML, antes precisaremos "marcar" o elemento para mostrar quais elemento a página exibe e como deve exibir. Por exemplo, um título que deve ficar um pouco maior que o restante do texto, aquele titulo da manchete ou artigo, marcamos com uma tag H1, exemplo: 

<h1>Nosso incrível título aqui</h1>

Perceba que nosso título está entre duas marcações específicas, tais marcações são chamadas de TAG, elas sempre devem ser abertas, antes da informação, e fechadas logo após. No nosso exemplo abrimos com <h1> e fechamos com </h1>.

Tudo certo até agora? Então vamos continuar.

Como já é de se imaginar, no HTML também, nem tudo é igual a tudo, este modelo de tag que vimos agora, é o tipo de tag com filhos, é o mais comum, porém não o único. Neste tipo de tag/elemento sempre vai ser do modelo <tag>...filhos</tag>, com o tipo de tag Self-Closing, isto é, tags de auto fechamento, a estrutura fica um pouquinho diferente, exemplo:

<img /> 

Clique aqui para ver mais dessas tags self-closing

Ok até agora? Certo. Veremos então a estrutura básica de um documento.

Todo documento HTML tem uma estrutura parecida, não há segredos. Vejamos abaixo:

• Na primeira linha temos o elemento DOCTYPE, que apesar de não ser uma tag, é importante, porém opcional a partir da versão 5 do HTML,. Este elemento informa aos navegadores com qual versão do HTML estamos trabalhando, e como ele deve se comporta com nosso documento. Apesar de não mais obrigatório, a ausência dele pode fazer com que alguns navegadores não se comporte adequadamente e de maneira precisa.

• Na linha 3 temos de fato o início do nosso documento com a abertura da tag html, ao lado do nome da tag temos o atributo lang que não vamos falar agora sobre, por enquanto só precisamos saber que este atributo diz ao navegador, leitores de tela e afins, que estamos trabalhando em certo idioma, neste exemplo, Português Brasil.

• Logo após a tag html temos a tag head, nela indicaremos todas as informações sobre nosso site que o navegador precisa pra poder continuar, tais como: o título do documento, isto é, o nome que que o navegador deve mostrar no topo da guia, ou quando salvarmos nos favoritos; e também a tabela de caracteres que o browser deve usar para renderizar os textos. Também não se preocupe com isso agora.

• A tag title é uma das mais importantes não só para ter uma "boa aparência", mas também para SEO — falaremos sobre, no futuro —. É, aqui onde realmente definimos o nome da nossa página. É usada em sistemas de buscas para mostrar seu site bonitinho com o nome da página bem arrumadinho nas buscas.

• Agora, logo após o fechamento da tag head, abrimos a tag body, e é nela que colocaremos todo nosso código HTML do restante da página.

Opa, parece que este post ficou bem extenso. Que tal continuarmos no próximo e já montarmos nossa primeira página? Ook.

Leituras sugeridas:

• O que são atributos HTML? - Resumo Básico
  
• Afinal, o que é JavaScript? E ECMAScript?
  
• Var, let ou const, qual devo usar?