Juntando as peças
Para que seu navegador entenda o que é cada elemento do seu site, precisamos rotulá-los com tags HTML. HTML significa Linguagem de marcação de hipertexto. Tags são palavras rodeadas pelos símbolos <e>. Por exemplo, a tag <img> informa ao seu navegador “isto é uma imagem”. A tag <button> informa “este é um botão”.
Tags também podem ser usadas para organizar sua página da web! A imagem abaixo descreve a estrutura de uma página da web básica. O cabeçalho geralmente contém as bibliotecas adicionais usadas e o título da página, enquanto o corpo contém a maior parte do conteúdo exibido.
A maioria das tags precisa de uma tag de abertura e uma tag de fechamento. Por exemplo, você verá que todas as páginas têm uma tag de abertura <html> na parte superior e uma tag de fechamento </html> no final. Isso informa ao navegador onde os elementos HTML começam e onde terminam. Pense nas tags como aspas; por exemplo, o computador entenderá que tudo entre as tags <html> e </html> faz parte de um site HTML.
Existem também algumas tags, como a tag de imagem <img>, que fecham automaticamente, o que significa que elas só precisam de uma tag de abertura e não de uma tag de fechamento.
Aqui está um exemplo:
Veja a Pen HTML Basics por Deliana Escobari (@Sunny-Dee) on CodePen.