Índice

• Introdução ao HTML
• Trabalhando com Formulário em HTML
• Estruturando seu HTML + Formatações
• Trabalhando com Mídias Utilizando HTML
• Criando Tabelas com HTML
• Entendendo HTML Semântico
• Referências

Introdução ao HTML

O HTML (HyperText Markup Language) é a linguagem base da web. Com ele, conseguimos estruturar páginas, criando títulos, parágrafos, listas, links e muito mais.

O HTML não é uma linguagem de programação, mas sim de marcação. Ele define a estrutura dos elementos exibidos no navegador.

Curiosidade: O HTML surgiu em 1991 e é constantemente atualizado pelo W3C.

Versão atual: HTML5

Trabalhando com Formulário em HTML

Formulários são essenciais

Eles são usados para coletar dados do usuário, como em cadastros, pesquisas e login. Os principais elementos são <form>, <input>, <label>, <textarea>, <button> e <select>.

Por exemplo, um formulário de inscrição pode ter campos para nome, e-mail e mensagem, além de um botão de envio.

"Form é o coração de qualquer interação com o usuário." — Todo desenvolvedor, em algum momento

Estruturando seu HTML + Formatações

Organização é tudo!

Use títulos para hierarquia de conteúdo:

Título principal (<h1>)

Subtítulo (<h2>)

Seções (<h3>)

Subseções (<h4>)

Detalhes (<h5>)

Notas (<h6>)

Parágrafos bem escritos com destaques (<strong>) e ênfases (<i>)

Marcar (<mark>) partes importantes

Utilizar textos removidos (<del>) para destacar mudanças

Notas em _subscrito (<sub>) ou ^sobrescrito (<sup>).

Trabalhando com Mídias Utilizando HTML

HTML também cuida da diversão!

É possível adicionar imagens, vídeos, áudios e até conteúdo incorporado (como do YouTube). Isso enriquece muito a experiência do usuário.

1. Imagem com (<img>)
2. Vídeo com (<video>)
3. Áudio com (<audio>)

SVG também é uma opção leve e escalável para gráficos.

Criando Tabelas com HTML

Tabelas são úteis para organizar dados

Com (<table>), (<tr>), (<th>) e (<td>) você monta estruturas tabulares fáceis de entender.

Dica: Use (<thead>), (<tbody>) e (<tfoot>) para dar ainda mais semântica à sua tabela.

Entendendo HTML Semântico

Semântica é clareza para humanos e máquinas

O uso de tags como (<header>), (<nav>), (<main>), (<section>), (<article>), (<footer>) e outras ajudam os navegadores e leitores de tela a entender melhor o conteúdo.

"HTML semântico é escrever para máquinas sem esquecer dos humanos."