Tags HTML

Este projeto é uma documentação prática dos meus estudos em HTML. Aqui registro, de forma organizada, as principais tags e conceitos que venho aprendendo, utilizando exemplos reais para reforçar o entendimento.

Estrutura básica do HTML

<!DOCTYPE html> → Define o HTML5

<html lang="pt-br"> → Define o idioma da página

<head></head> → Contém configurações e metadados

<body></body> → Contém o conteúdo visível

Metadados importantes

<title> → Define o título da aba do navegador

Tags básicas

<h1></h1> → Títulos

<p></p> → Parágrafos

<hr> → Adiciona uma linha horizontal

<br> → Quebra de linha

Observações

Para efetuar um comentário no código, utilize:

Algumas tags não possuem fechamento, como <hr>, enquanto outras possuem, como <p></p>.

Os títulos em HTML (<h1>, <h2>, <h3>...) seguem uma hierarquia de importância, e não de tamanho. O <h1> representa o título principal da página, o <h2> representa seções e o <h3> subseções.

Principais Formatações

<strong></strong> → Texto em negrito (semântico)

<em></em> → Texto em itálico (semântico)

<mark></mark> → Texto com marcação: exemplo de marca-texto

Podemos alterar a cor do marca-texto usando CSS:

<style>
mark {
    background-color: green;
}
</style>

Ou diretamente na tag (inline):

<mark style="background-color: lime;">Seu texto</mark>

<small></small> → Texto pequeno

<del></del> → Texto removido ~~exemplo~~

<ins></ins> → Texto inserido exemplo

<sup></sup> → Texto sobrescrito: x⁴

<sub></sub> → Texto subscrito: H₂O

Outras Formatações

<code></code> → Fonte monoespaçada para código:

document.getElementById('teste')

Para exibir blocos de código formatados, usamos: <pre></pre>

printf("Digite um número:");
scanf("%d", &n1);

if (n1 % 2 == 0) {
    printf("O número é par");
} else {
    printf("O número é ímpar");
}

<q></q> → Citações curtas:

Quando a educação não é libertadora, o sonho do oprimido é se tornar opressor.

<blockquote></blockquote> → Citações longas:

A educação é um ato de amor, por isso, um ato de coragem.

<abbr></abbr> → Abreviações:

Estou estudando HTML e CSS.

Símbolos especiais

Podemos adicionar símbolos como: ® (®), © (©), ™, €, £, ¥, ¢, Δ, ↑

Para mais símbolos: Acessar documentação

Adicionando Emoji

Para adicionar emojis, acesse: Emojipedia

Use o código no formato:

&#x1F5A5;

Exemplo: 🖥

Outros exemplos: ⌨ 🖨 💾 📺

Adicionando imagens e favicon

<img src="caminho" alt="descrição"> → Adiciona imagens

Imagem na mesma pasta:

Imagem em outra pasta:

Imagem da web:

Podemos ajustar o tamanho das imagens com CSS (veremos futuramente).

Para adicionar um favicon:

<link rel="shortcut icon" href="caminho-do-icone" type="image/x-icon">

Listas

Lista ordenada

<ol></ol> → Cria listas ordenadas

<li></li> → Itens da lista

Acordar
Escovar os dentes

Lista não ordenada

Camisa amarela
Camisa verde

Lista de definições

<dl></dl> → Lista de definições

<dt></dt> → Termo

<dd></dd> → Definição

HTML: Linguagem de marcação para criação de conteúdo de sites
CSS: Linguagem de estilo para design de páginas