HTML5, o que é? - Resumo Básico
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.
- 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 atributolang
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 taghead
, 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 tagbody
, e é nela que colocaremos todo nosso código HTML do restante da página.
É um artigo muito bom!
ResponderExcluirObrigado. Sinta se a vontade pra sugerir novos temas.
ExcluirExcelente conteúdo, poderia ser mais completo.
ResponderExcluir