| 1 | <!DOCTYPE html> | Declara que o documento é HTML5 | <!DOCTYPE html> |
| 2 | <html> | Raiz do documento HTML | <html lang="pt-br"> |
| 3 | <head> | Metadados e informações técnicas | <head>...</head> |
| 4 | <body> | Conteúdo visível do site | <body>...</body> |
| 5 | <title> | Título da página na aba do navegador | <title>Meu Site</title> |
| 6 | <meta charset> | Define a codificação de caracteres | <meta charset="UTF-8"> |
| 7 | <link> | Vincula arquivos externos (CSS, ícones) | <link rel="stylesheet" href="style.css"> |
| 8 | <style> | Bloco de CSS interno | <style> body { color: red; } </style> |
| 9 | <script> | Inclui ou escreve JavaScript | <script src="script.js"></script> |
| 10 | <header> | Cabeçalho da página ou seção | <header>...</header> |
| 11 | <nav> | Seção de links de navegação | <nav>...</nav> |
| 12 | <main> | Conteúdo principal e único da página | <main>...</main> |
| 13 | <section> | Seção temática genérica | <section>...</section> |
| 14 | <article> | Conteúdo independente (post, notícia) | <article>...</article> |
| 15 | <aside> | Conteúdo lateral ou relacionado | <aside>...</aside> |
| 16 | <footer> | Rodapé da página ou seção | <footer>...</footer> |
| 17 | <h1> a <h6> | Títulos hierárquicos | <h1>Título</h1> |
| 18 | <p> | Parágrafo de texto | <p>Olá mundo!</p> |
| 19 | <br> | Quebra de linha simples | Linha 1 <br> Linha 2 |
| 20 | <hr> | Linha horizontal | <hr> |
| 21 | <strong> | Negrito (importância) | <strong>Atenção</strong> |
| 22 | <em> | Itálico (ênfase) | <em>Importante</em> |
| 23 | <blockquote> | Citação em bloco | <blockquote>...</blockquote> |
| 24 | <cite> | Referência de obra | <cite>Dom Casmurro</cite> |
| 25 | <ul> | Lista não ordenada | <ul>...</ul> |
| 26 | <ol> | Lista ordenada | <ol>...</ol> |
| 27 | <li> | Item de lista | <li>Item 1</li> |
| 28 | <a> | Hiperlink | <a href="#">Link</a> |
| 29 | target="_blank" | Abre em nova aba | <a target="_blank"> |
| 30 | <img> | Insere imagem | <img src="f.jpg" alt="X"> |
| 31 | <video> | Reproduz vídeo | <video controls> |
| 32 | <audio> | Reproduz áudio | <audio controls> |
| 33 | <iframe> | Incorpora conteúdo | <iframe src="..."> |
| 34 | <table> | Define tabela | <table>...</table> |
| 35 | <thead> | Cabeçalho da tabela | <thead>...</thead> |
| 36 | <tr> | Linha da tabela | <tr>...</tr> |
| 37 | <th> | Célula de cabeçalho | <th>Título</th> |
| 38 | <td> | Célula de dados | <td>Dado</td> |
| 39 | <form> | Define formulário | <form action="/"> |
| 40 | <label> | Rótulo de campo | <label for="i">Nome</label> |
| 41 | <input type="text"> | Campo de texto | <input type="text"> |
| 42 | <input type="password"> | Campo de senha | <input type="password"> |
| 43 | <input type="email"> | Valida e-mail | <input type="email"> |
| 44 | <input type="submit"> | Botão de enviar | <input type="submit"> |
| 45 | <button> | Botão genérico | <button>Click</button> |
| 46 | <textarea> | Texto multi-linha | <textarea></textarea> |
| 47 | <select> | Lista suspensa | <select>...</select> |
| 48 | <option> | Opção do select | <option>A</option> |
| 49 | id | ID único | id="meu-id" |
| 50 | class | Classes CSS | class="card" |
| 51 | style | Estilo inline | style="color:red" |
| 52 | title | Dica de mouse | title="Dica" |
| 53 | data-* | Dados customizados | data-id="1" |
| 54 | hidden | Esconde elemento | <p hidden> |
| 55 | <details> | Widget retrátil | <details> |
| 56 | <summary> | Título do details | <summary>Abrir</summary> |
| 57 | <dialog> | Modal nativo | <dialog open> |
| 58 | <abbr> | Define uma abreviação ou acrônimo | <abbr title="World Wide Web">WWW</abbr> |
| 59 | <address> | Informações de contato do autor/dono | <address>Rua A, 123</address> |
| 60 | <bdi> | Isola texto para formatação bidirecional | <bdi>User123</bdi> |
| 61 | <bdo> | Sobrescreve a direção do texto atual | <bdo dir="rtl">Texto</bdo> |
| 62 | <caption> | Título ou legenda para uma tabela | <caption>Vendas 2023</caption> |
| 63 | <code> | Define um fragmento de código de computador | <code>console.log()</code> |
| 64 | <col> | Especifica propriedades de coluna na tabela | <col span="2" style="background:red"> |
| 65 | <colgroup> | Grupo de uma ou mais colunas em uma tabela | <colgroup>...</colgroup> |
| 66 | <data> | Associa conteúdo a tradução legível por máquina | <data value="2105">Tomate</data> |
| 67 | <datalist> | Lista de opções pré-definidas para inputs | <datalist id="browsers">...</datalist> |
| 68 | <del> | Texto que foi deletado do documento | <del>Preço: R$ 50</del> |
| 69 | <dfn> | Indica o termo que está sendo definido | <dfn>HTML</dfn> é uma linguagem... |
| 70 | <fieldset> | Agrupa elementos relacionados em um form | <fieldset>...</fieldset> |
| 71 | <legend> | Legenda para o elemento fieldset | <legend>Dados Pessoais</legend> |
| 72 | <figure> | Conteúdo auto-contido (imagem, gráfico) | <figure>...</figure> |
| 73 | <figcaption> | Legenda para o elemento figure | <figcaption>Foto da Lua</figcaption> |
| 74 | <input type="checkbox"> | Caixa de seleção (múltipla escolha) | <input type="checkbox"> |
| 75 | <input type="radio"> | Botão de rádio (escolha única) | <input type="radio" name="g1"> |
| 76 | <input type="date"> | Seletor de data | <input type="date"> |
| 77 | <input type="color"> | Seletor de cor | <input type="color"> |
| 78 | <input type="range"> | Controle deslizante (slider) | <input type="range" min="0" max="10"> |
| 79 | <input type="file"> | Upload de arquivos | <input type="file"> |
| 80 | <input type="number"> | Campo numérico | <input type="number" step="1"> |
| 81 | <input type="tel"> | Campo para número de telefone | <input type="tel"> |
| 82 | <input type="url"> | Campo para endereço de URL | <input type="url"> |
| 83 | <ins> | Texto que foi inserido no documento | <ins>Preço: R$ 40</ins> |
| 84 | <kbd> | Representa entrada de teclado | Pressione <kbd>Ctrl</kbd> |
| 85 | <mark> | Texto realçado ou marcado | <mark>Importante</mark> |
| 86 | <meter> | Medição escalar em um intervalo conhecido | <meter value="2" min="0" max="10"> |
| 87 | <progress> | Barra de progresso de uma tarefa | <progress value="70" max="100"> |
| 88 | <output> | Resultado de um cálculo ou ação | <output name="x">0</output> |
| 89 | <picture> | Container para múltiplas fontes de imagem | <picture>...</picture> |
| 90 | <source> | Recursos de mídia para picture, video ou audio | <source srcset="img.webp"> |
| 91 | <pre> | Texto pré-formatado (preserva espaços) | <pre>Linha 1 Linha 2</pre> |
| 92 | <q> | Citação curta inline | <q>Ser ou não ser</q> |
| 93 | <s> | Texto que não é mais correto ou relevante | <s>De R$ 100</s> por R$ 80 |
| 94 | <samp> | Saída de exemplo de um programa | <samp>Erro 404</samp> |
| 95 | <small> | Comentários laterais ou "letras miúdas" | <small>Direitos reservados</small> |
| 96 | <span> | Container genérico inline para estilo | <span class="txt">...</span> |
| 97 | <div> | Container genérico em bloco | <div class="box">...</div> |
| 98 | <sub> | Texto subscrito | H<sub>2</sub>O |
| 99 | <sup> | Texto sobrescrito | E = mc<sup>2</sup> |
| 100 | <time> | Define data ou hora específica | <time datetime="2023-12-25">Natal</time> |
| 101 | <u> | Texto com anotação não articulada (sublinhado) | <u>Erro ortográfico</u> |
| 102 | <var> | Define uma variável em contexto matemático | <var>x</var> + 1 |
| 103 | <wbr> | Oportunidade de quebra de linha | muito<wbr>longo |
| 104 | <tfoot> | Rodapé da tabela | <tfoot>...</tfoot> |
| 105 | <tbody> | Corpo principal da tabela | <tbody>...</tbody> |
| 106 | placeholder | Texto de ajuda dentro do input | placeholder="Seu nome" |
| 107 | required | Torna o preenchimento obrigatório | <input required> |