HTML, que significa Linguagem de Marcação de Hipertexto, é uma linguagem de marcação para criar páginas web. Quando você visita um site e vê conteúdo como parágrafos, títulos, links, imagens e vídeos; isso é HTML. Aqui está um pequeno exemplo usando elementos HTML. Tente editar algum texto no editor e veja as mudanças atualizarem na janela de visualização.

<h1>Main heading element</h1>

<p>I am a paragraph element.</p>

HTML representa o conteúdo e a estrutura de uma página da web por meio do uso de elementos. A maioria dos elementos terá uma tag de abertura e uma tag de fechamento. Às vezes essas tags são chamadas de tags de início e fim. Entre essas duas tags, você terá o conteúdo. Este conteúdo pode ser texto ou outros elementos HTML. Aqui está outro exemplo de um elemento de parágrafo. Altere o texto no editor para dizer I love coding! e veja os resultados na janela de visualização.

<p>I am a paragraph element.</p>

Tanto as tags de abertura quanto as de fechamento começam com um sinal de menor (<) e terminam com um sinal de maior (>), com o nome da tag colocado entre esses sinais. Embora os nomes das tags HTML não diferenciem maiúsculas de minúsculas, é uma convenção amplamente aceita e uma boa prática escrevê-los em letras minúsculas. Aqui está uma análise mais detalhada apenas das tags de parágrafo de abertura e fechamento:

<p>

</p>

O que distingue uma tag de abertura de uma tag de fechamento é a barra (/) colocada imediatamente após o colchete angular esquerdo em uma tag de fechamento. Alguns elementos HTML não possuem uma tag de fechamento. Estes são conhecidos como elementos void. Aqui está um exemplo de um elemento de imagem que é um elemento vazio:

<img>

Observe que este elemento de imagem não possui a tag de fechamento e não possui nenhum conteúdo. Elementos void não podem ter nenhum conteúdo e possuem apenas uma tag de início. Às vezes você verá elementos void que usam um / antes do > assim:

<img />

Embora muitos formatadores de código como Prettier escolham incluir o / em elementos void, a especificação HTML afirma que a presença do / "não marca a tag de abertura como auto-fechamento, mas sim é desnecessária e não tem nenhum efeito de qualquer tipo". No desenvolvimento do mundo real, você verá ambas as formas, então é importante estar familiarizado com as duas. Se você quiser exibir uma imagem, será necessário incluir alguns atributos dentro do seu elemento de imagem. Um atributo é um valor especial usado para ajustar o comportamento de um elemento HTML. Aqui está um exemplo de um elemento de imagem com um atributo src. Atualize o valor do atributo src para "https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/cats.jpg" e você verá a imagem mudar para dois gatos dormindo pacificamente.

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/running-cats.jpg" />

O atributo src é usado para especificar a localização dessa imagem. Para elementos de imagem, é uma boa prática incluir outro atributo chamado alt. O atributo alt é usado para fornecer um texto curto e descritivo para as imagens. Aqui está um exemplo de um elemento de imagem com os atributos src e alt. Tente quebrar a imagem atualizando o valor de src para "https://.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/cats.jpg". Você verá a imagem desaparecer e apenas o texto alt aparecer.

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/cats.jpg" alt="Two tabby kittens sleeping together on a couch." />

Então, você pode estar se perguntando se o HTML por si só é suficiente para construir um site. Bem, a resposta é: depende. Se você está construindo um pequeno projeto de prática que apenas exibe texto e imagens, apenas HTML pode ser suficiente. No entanto, se você estiver criando um site profissional moderno, você precisará ter HTML, CSS e JavaScript. HTML é para o conteúdo e a estrutura. CSS é para estilização. JavaScript é para adicionar interatividade às suas páginas web. Uma boa analogia para isso é comparar HTML, CSS e JavaScript com um prédio completo. HTML representa os blocos, concreto e ferros que compõem as paredes. É a base que torna o edifício forte. CSS representa o design interior e exterior que faz a casa parecer bonita. JavaScript representa o sistema elétrico e de água que garante acesso ininterrupto à água e à eletricidade.