Introdução ao HTML
Estrutura Básica
Todo site começa com uma estrutura mínima em HTML. Ela indica para o navegador que tipo de documento está sendo lido. Você vai encontrar sempre essas partes:
<!DOCTYPE html>: diz que estamos usando HTML5.<html>: envolve todo o conteúdo da página.<head>: onde colocamos o título da aba, links para arquivos externos (como CSS), etc.<body>: onde o conteúdo visível do site aparece (textos, imagens, botões…).
Lista ordenada e não ordenada
As listas servem para organizar itens.
<ul>, entre outros. Cada tipo muda o comportamento do campo e ajuda a evitar erros na hora do preenchimento.
Trabalhando com formulários
form
As tag <form> serve para reunir campos que o usuário vai preencher e enviar. Através dela, conseguimos enviar dados para um servidor. Ela pode conter diversos campos como texto, botões, checkboxes, etc.
input e seus tipos
O <input> é um dos campos mais usados em formulários. Pode ser de vários tipos:
text,email,password,number,date,file, entre outros. Cada tipo muda o comportamento do campo e ajuda a evitar erros na hora do preenchimento.
buttons e seus tipos
Botões são criados com a tag <button> ou <input type="button">. Os principais tipos são:
submit: envia o formulário.reset: limpa todos os campos.button: um botão comum, usado geralmente com JavaScript.
select e seus tipos
A tag <select> cria menus suspensos (dropwdowns).
Dentro dela, usamos <option> para definir as opções. Podemos também permitir que o usuário selecione mais de uma opção com o atributo multiple.
textarea
Se quisermos que o usuário escreva textos maiores (como uma descrição ou comentário), usamos a tag <textarea>. Ela pode ser redimensionada e tem várias opções de personalização.
Formatações
Formatando textos
O HTML oferece várias tags para destacar partes do texto:
<strong>(importante),<em>(ênfase),<b>(negrito),<i>(itálico),<u>(sublinhado), entre outras.
div e span
Botões são criados com a tag <button> ou <input type="button">. Os principais tipos são:
submit: envia o formulário.reset: limpa todos os campos.button: um botão comum, usado geralmente com JavaScript.
fieldsets
Podemos usar <fieldset> para agrupar campos relacionados dentro de um formulário, e <legend> para dar um título a esse grupo. Isso ajuda a organizar visualmente os formulários e melhora a acessibilidade.
embeds
A tag <embed> permite incorporar conteúdo externo à página, como PDFs, vídeos em Flash (legado) e outros tipos de mídia diretamente no navegador.
iframes
Com <iframe>, é possível carregar uma outra página HTML dentro da atual. Muito usado para incorporar vídeos do YouTube, mapas do Google Maps e conteúdos interativos.
Mídias
img
Usamos a tag <img> para exibir imagens. Ela precisa do atributo src (caminho da imagem) e alt (texto alternativo, importante para acessibilidade). Também é possível definir tamanho com width e height.
audio
Com <audio> conseguimos incorporar arquivos de som no site. Para permitir controle ao usuário, usamos o atributo controls. Outros atributos úteis: autoplay, loop e muted.
video
A tag <video> permite reproduzir vídeos diretamente na página. Assim como no áudio, podemos usar controls, poster (imagem de capa), autoplay, entre outros.
track
Com a tag <track>, é possível adicionar legendas, descrições ou traduções a vídeos. Ela fica dentro da tag <video> e é essencial para tornar o conteúdo acessível.
iframe
Também muito usado para mídias, o <iframe> permite incorporar vídeos (como do YouTube) e outras páginas interativas com facilidade.
Tabelas
table
Usamos a tag <table> para criar tabelas e organizar dados em linhas e colunas. É útil para exibir informações tabulares, como listas de preços, cronogramas, etc.
tr
A tag <tr> representa uma linha na tabela. Dentro dela, colocamos as células, que podem ser dados (<td>) ou cabeçalhos (<th>).
td e th
<td> é usado para células com dados comuns. Já <th> representa um título de coluna ou linha e, por padrão, aparece em negrito e centralizado.
tbody, thead, tfoot
<thead>: representa o cabeçalho da tabela.<tbody>: onde ficam os dados principais da tabela.<tfoot>: usado para rodapés da tabela, geralmente com totais ou observações finais.
Usar essas divisões ajuda na organização e também facilita a aplicação de estilos com CSS.
HTML Semântico
Acessibilidade
Usar HTML semântico significa escolher as tags corretas para o conteúdo, o que torna o site mais acessível para pessoas com deficiência (como leitores de tela). Isso também ajuda os mecanismos de busca a entenderem melhor a estrutura da página.
Exemplo: usar <button> no lugar de uma <div> estilizada como botão.
Web scraping
Quando usamos HTML com marcação clara e semântica, facilitamos que ferramentas automáticas extraiam dados da página. Isso é útil em contextos como análise de preços ou leitura de dados públicos.
main, header, footer
Essas tags estruturais ajudam a organizar o conteúdo:
<main>: define o conteúdo principal da página.<header>: parte superior da página ou seção, geralmente com logo e navegação.<footer>: rodapé com informações extras ou links secundários.
aside, section, nav
<section>: usada para agrupar conteúdos relacionados (ex: uma seção de notícias).<aside>: conteúdo complementar, como barras laterais ou anúncios.<nav>: áreas de navegação da página, como menus ou links internos.
article, blockquote, q
<article>: conteúdo independente e reutilizável, como uma postagem de blog ou notícia.<blockquote>: citação longa, geralmente de outra fonte.<q>: citação curta, dentro de parágrafos. O navegador costuma colocar aspas automaticamente.
figure, figcaption, picture
<figure>: agrupa imagens ou gráficos com uma legenda.<figcaption>: legenda para o conteúdo dentro de<figure>.<picture>: permite carregar imagens diferentes conforme o tamanho da tela, ideal para design responsivo.