📖 Introdução ao HTML

HTML (HyperText Markup Language) é a linguagem padrão para criar páginas web. Não é uma linguagem de programação, mas sim de marcação, usada para estruturar o conteúdo da web.

O que você pode criar com HTML?

Estruturar textos, títulos e parágrafos
Inserir imagens, vídeos e áudios
Criar links entre páginas
Construir formulários interativos
Organizar dados em tabelas
E muito mais!

🔍 Curiosidade: HTML foi criado por Tim Berners-Lee em 1991 e desde então evoluiu até a versão atual HTML5.

🏗️ Estrutura Básica de um Documento HTML

Todo documento HTML segue uma estrutura fundamental:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é um parágrafo.</p>
</body>
</html>

Explicação das Tags:

Tag	Descrição
`<!DOCTYPE html>`	Declara o tipo de documento como HTML5
`<html>`	Elemento raiz do documento
`<head>`	Contém metadados e informações sobre o documento
`<title>`	Define o título da página (aparece na aba do navegador)
`<body>`	Contém todo o conteúdo visível da página

✍️ Tags de Texto

Títulos e Cabeçalhos

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção</h3>
<h4>Subseção</h4>
<h5>Título Menor</h5>
<h6>Menor Título</h6>

Título h1

Título h2

Título h3

Parágrafos e Formatação

<p>Este é um parágrafo simples.</p>
<p>Texto em <strong>negrito</strong> e <em>itálico</em>.</p>
<p>Texto <mark>marcado</mark> e <del>riscado</del>.</p>
<p>H<sub>2</sub>O e X<sup>2</sup></p>

🔗 Links e Imagens

Links (Âncoras)

<!-- Link para site externo -->
<a href="https://www.google.com">Google</a>

<!-- Link para email -->
<a href="mailto:email@exemplo.com">Enviar Email</a>

<!-- Link que abre em nova aba -->
<a href="https://exemplo.com" target="_blank">Abrir em nova aba</a>

Imagens

<!-- Imagem básica -->
<img src="caminho/da/imagem.jpg" alt="Descrição da imagem">

<!-- Imagem com largura e altura -->
<img src="foto.jpg" alt="Foto" width="300" height="200">

<!-- Imagem como link -->
<a href="pagina.html">
    <img src="botao.jpg" alt="Clique aqui">
</a>

📝 Listas

Lista Não Ordenada

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Lista Ordenada

<ol>
    <li>Primeiro passo</li>
    <li>Segundo passo</li>
    <li>Terceiro passo</li>
</ol>

Lista de Descrição

<dl>
    <dt>HTML</dt>
    <dd>Linguagem de marcação para web</dd>
    <dt>CSS</dt>
    <dd>Linguagem para estilização</dd>
</dl>

📊 Tabelas

<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>João</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

Tag	Uso
`<table>`	Define a tabela
`<tr>`	Linha da tabela
`<td>`	Célula de dados
`<th>`	Célula de cabeçalho

📋 Formulários

<form action="/enviar" method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <label for="senha">Senha:</label>
    <input type="password" id="senha" name="senha">
    
    <input type="submit" value="Enviar">
</form>

Tipos de Input:

🏷️ HTML Semântico

Tags semânticas dão significado ao conteúdo, melhorando a acessibilidade e SEO.

<header>
    <nav>Menu de Navegação</nav>
</header>

<main>
    <article>
        <h2>Título do Artigo</h2>
        <p>Conteúdo...</p>
    </article>
    
    <aside>Conteúdo Lateral</aside>
</main>

<footer>Rodapé da Página</footer>

Tag	Significado
`<header>`	Cabeçalho da página ou seção
`<nav>`	Área de navegação
`<main>`	Conteúdo principal
`<article>`	Conteúdo independente
`<section>`	Seção temática
`<aside>`	Conteúdo complementar
`<footer>`	Rodapé

🎬 Multimídia

Vídeo

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Seu navegador não suporta vídeo.
</video>

Áudio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Seu navegador não suporta áudio.
</audio>

Iframe (incorporar conteúdo)

<iframe src="https://www.youtube.com/embed/video" 
        width="560" height="315">
</iframe>

🔍 Meta Tags

Meta tags fornecem informações sobre o documento para navegadores e mecanismos de busca.

<meta charset="UTF-8">
<meta name="description" content="Descrição da página">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Nome do Autor">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

⚙️ Atributos Globais

Atributos que podem ser usados em qualquer elemento HTML.

Atributo	Descrição
`class`	Define uma classe CSS
`id`	Identificador único do elemento
`style`	Aplica estilos inline
`title`	Tooltip ao passar o mouse
`lang`	Define o idioma
`hidden`	Oculta o elemento

✅ Boas Práticas em HTML

1. Sempre declare o DOCTYPE

<!DOCTYPE html>

2. Use tags semânticas

Prefira <header>, <nav>, <main> em vez de apenas <div>

3. Indente seu código

Mantenha a hierarquia clara com indentação adequada.

4. Adicione texto alternativo em imagens

<img src="..." alt="Descrição importante">

5. Valide seu HTML

Use o Validador W3C para verificar erros.

6. Mantenha a acessibilidade

Use labels em formulários
Estruture com headings corretamente
Garanta contraste adequado