Introdução ao HTML 🚀

Em 1991, devido à necessidade de compartilhar documentos, Tim Berners-Lee criou algo que anos mais tarde se tornaria um dos pilares da web: o HTML.

O HTML funciona com tags, essas tags representam os elementos que queremos colocar na tela, podendo ser uma imagem, um cabeçalho ou um parágrafo.

As tags possuem uma estrutura:

<abertura> Conteúdo </fechamento>

<h1>Conteudo</h1>

Algums exemplos de TAGS:

<h1> ao <h6> - representam títulos, sem o <h1> o mais relevante e o <h6> o menos relevante

<p> - representa um paragrafo

<img> - para inserir uma imagem

Obs: Existem alguns elementos sem tag de fechamento.

Também podemos passar atributos para os elementos, que irão alterar seu comportamento.

<abertura atributo:'valor-do-atributo'> Conteúdo </fechamento>

<h1 class='Title'>Conteudo</h1>

Algums exemplos de atributos:

class - atribui uma classe a um elemento HTML
ID - atribui um ID, só haver um por pagina
src - para indicar um caminhão até um arquivo
alt - texto alternativo

Desde sua criação, o HTML passou por várias versões. Sendo que hoje utilizamos o HTML 5, lançado em 2014.

Com a chegada do HTML5, veio a semântica:

Se antes o significado dos elementos era dado pelas classes, agora temos tags semânticas para dar significado ao nosso HTML, tornando-o de melhor entendimento para programadores, navegadores e qualquer outra ferramenta que processe esse tipo de informação.

Algumas tags semânticas que valem o estudo:

header
utilizada para representar cabeçalhos das páginas ou seções
nav
para criar os links de navegação da página.
main
representa o conteúdo principal da página
section
representa uma seção da página
article
para declarar conteúdo que tem sentido por si só, como um artigo de um blog
aside
para representar conteúdos de apoio, como uma lista de vídeos sugeridos, ou dicas de leitura
footer
rodapé da página