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