HTML (HyperText Markup Language) é a linguagem principal utilizada para estruturar páginas na web. Ela não é uma linguagem de programação, mas sim de marcação, ou seja,
serve para organizar e descrever o conteúdo de forma que os navegadores (como Chrome ou Firefox) saibam como exibi-lo ao usuário. O termo "hipertexto" refere-se à capacidade de criar links (hiperligações)
entre documentos ou partes de uma mesma página, o que é uma das bases da navegação na internet. HTML utiliza tags (como <p>, <h1>, <a>, etc.)
para definir cada elemento do conteúdo, como parágrafos, títulos, links, imagens, listas e muito mais.
A estrutura de um documento HTML segue um padrão que começa com a declaração <!DOCTYPE html>, indicando que o código está escrito na versão HTML5.
Em seguida, vem a tag <html>, que envolve todo o conteúdo da página. Dentro dela, a seção <head> traz informações sobre o documento (como título,
codificação e links para estilos CSS), enquanto a seção <body> contém tudo o que será visível ao usuário, como textos, imagens, vídeos e tabelas.
HTML é essencial para a construção de qualquer site, servindo como base para o CSS, que estiliza a página, e o JavaScript, que adiciona
funcionalidades interativas.
Estrutura Básica do Documento
Tag
Função
<DOCTYPE html>
Define o tipo de documento (HTML5, por exemplo).
<html>
Elemento raiz do documento HTML.
<head>
Contém metadados (título, links, scripts, etc).
<title>
Define o título da página (aparece na aba do navegador).
<meta>
Metadados como charset, viewport, autor, etc.
<link>
Referencia arquivos esternos (como CSS).
<script>
Adiciona ou referencia scripts JavaScript.
<style>
Define estilos CSS diretamente na página
<body>
Contém todo o conteúdo visível da página.
Conteúdo Semântico / Estrutura
Tag
Função
<header>
Cabeçalho da página ou seção.
<nav>
Menu de navegação.
<main>
Conteúdo principal da página.
<section>
Seção temática de conteúdo.
<article>
Conteúdo independente, como post de blog.
<footer>
Rodapé da página ou seção.
<div>
Contêiner genérico sem significado semântico.
<span>
Contêiner em linha genérico para estilização.
Texto e Formatação
Tag
Função
<h1> a <h6>
Títulos e subtítulos, do mais importante ao menos.
<p>
Parágrafo do texto.
<br>
Quebra de linha.
<hr>
Linha horizontal (separador).
<strong>
Texto em negrito com ênfase semântica (texto importante).
<em>
Texto em itálico com ênfase semântica (gerar ênfase no texto).
<small>
Texto menor.
Listas
Tag
Função
<ul>
Lista não ordenada (com marcadores).
<ol>
Lista ordenada (com números).
<li>
Item da lista (usado dentro de <ul> ou <ol>).
<dl>
Lista de definição.
<dt>
Termo definido na lista de definição.
<dd>
Descrição do termo na lista de definição.
Mídia
Tag
Função
<img>
Exibir imagens.
<audio>
Reproduzir áudio.
<video>
Reproduzir vídeo.
<source>
Fonte de mídia (usado dentro de <audio> ou <video>).
<figure>
Container para mídia com legenda.
<figcaption>
Legenda de uma imagem ou conteúdo de mídia.
Tabelas (Complemento)
Tag
Função
<caption>
Título da tabela.
<thead>
Cabeçalho da tabela.
<tbody>
Corpo da tabela.
<tfoot>
Rodapé da tabela.
<tr>
Linha da tabela.
<th>
Célula de cabeçalho (negrito e centralizada por padrão).
<td>
Célula de dados.
Formulários
Tag
Função
<form>
Container do formulário.
<input>
Campo de entrada de dados.
<label>
Rótulo para um campo do formulário.
<textarea>
Campo de texto com várias linhas.
<select>
Menu suspenso (dropdown).
<option>
Opção dentro do select.
<button>
Botão clicável.
<fieldset>
Agrupamento de campos do formulário.
<legend>
Título do agrupamento de campos (usado com fieldset).
Links e Navegação
Tag
Função
<a>
Cria um link para outra página ou recurso.
<link>
Relaciona recursos externos (como arquivos CSS) ao documento.
