Entendendo o HTML

Antes de começar, um disclaimer

Nesse artigo vou abordar o HTML com minhas palavras, e tentar explicar para alguém que nunca teve contato, mas quer saber mais sobre, o que é e como ele funciona.

Caso você tenha alguma dúvida ou correção de algum conceito, por favor, não deixe de escrever nos comentários.

Vamos lá...

O que é?

HTML é, na verdade, uma abreviação para HyperText Markup Language, ou em português, linguagem de marcação de hipertexto. Usando a estrutura HTML você pode construir páginas web.

E qual é essa estrutura?

Simples, ela é definida por tags, que por sua vez tem o nome do elemento, seus atributos, e seus "filhos" ou children.

<elemento atributo="valor">...</elemento>

Nesse caso, a tag pode ter childrens associados a ela, mas algumas vezes, nós não precisamos desses childrens, e se esse for o caso, usamos o auto-fechamento de tags

<elemento atributo="valor" />

Exemplos com tags

Para demonstrar, vou te mostrar duas tags que abrem e fecham (E podem ter childrens), e duas com auto-fechamento.

Que "Abrem e fecham"

<p>Hello World!</p>

A tag <p> serve para demarcar parágrafos, dentro dela você pode escrever o conteúdo que quer exibir.

<a href="https://github.com/joaopedrov0">GitHub</a>

A tag <a> é usada quando queremos criar um link. Nesse caso temos o nome do elemento a, um atributo href (HyperText Reference), e o valor do atributo é o link para o meu GitHub.

E ainda no exemplo da tag <a>, a palavra GitHub é o children, nesse caso foi um texto, mas childrens podem ser outras tags também.

Com auto-fechamento (self closing tags)

<img src="patinho.png" />

A tag img serve para inserir uma imagem.
Nesse exemplo, img é o nome do elemento, src(source) é um atributo e o valor desse atributo é o nome do arquivo da imagem que eu quero exibir.

E esse é o conceito de tags!

Com esse conceito, agora basta entender individualmente algumas tags, e usar isso para estruturar os documentos HTML.
...
Com os conceitos que eu acabei de apresentar, eu construí um exemplo final:

<h1>Hello World</h1>
<h2>Um parágrafo aleatório:</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="https://github.com/joaopedrov0">E um link</a>

Eu salvei esse código em um arquivo .html e abri ele no navegador... E o resultado é esse!

E nesse momento, pode ser que você esteja com duas perguntas...

O que era aquela tag "h1" e "h2" no seu exemplo?

Bem, essas são tags de título, tanto a h1 quanto a h2.
O número que vem depois da letra "h", é pra definir a importância daquele conteúdo na sua página, quanto maior o número, menor a importância e vice-versa! Sendo o h1 o mais importante, geralmente o título principal da sua página, ou em alguns casos o seu logo, e o h6 o título com menor relevância.

E que troço horroroso é esse resultado?! Você não disse que isso é usado para construir páginas web? Eu nunca vi uma página assim!

Bem observado, realmente a aparência não ficou das melhores, mas é pra isso que serve uma outra linguagem, o CSS (Cascading Style Sheets), que é usado para definir cores, posições, tamanhos, fontes, etc. Depois de ler esse artigo, não deixe de ler esse outro que eu escrevi sobre CSS.

E é isso! Espero que tenha entendido, qualquer dúvida, não deixe de colocar nos comentários.

Bons estudos, e até mais!

Créditos da imagem de cover
Imagem de James Osborne por Pixabay