| 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 é o mais importante) | <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 (divisão temática) | <hr> |
| 21 | <strong> | Texto com forte importância (Negrito) | <strong>Atenção</strong> |
| 22 | <em> | Texto com ênfase (Itálico) | <em>Importante</em> |
| 23 | <blockquote> | Citação em bloco de outra fonte | <blockquote>...</blockquote> |
| 24 | <cite> | Referência a uma obra citada | <cite>Dom Casmurro</cite> |
| 25 | <ul> | Lista não ordenada (bolinhas) | <ul>...</ul> |
| 26 | <ol> | Lista ordenada (números) | <ol>...</ol> |
| 27 | <li> | Item de uma lista | <li>Item 1</li> |
| 28 | <a> | Hiperlink para outra página | <a href="https://google.com">Link</a> |
| 29 | target="_blank" | Abre link em nova aba | <a target="_blank" ...> |
| 30 | <img> | Insere uma imagem | <img src="foto.jpg" alt="Descrição"> |
| 31 | <video> | Reproduz vídeo | <video controls src="v.mp4"> |
| 32 | <audio> | Reproduz áudio | <audio controls src="a.mp3"> |
| 33 | <iframe> | Incorpora outra página (ex: Youtube) | <iframe src="..."></iframe> |
| 34 | <table> | Define uma 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>Coluna 1</th> |
| 38 | <td> | Célula de dados comuns | <td>Dado</td> |
| 39 | <form> | Define um formulário | <form action="/save"> |
| 40 | <label> | Rótulo para um campo de entrada | <label for="id">Nome</label> |
| 41 | <input type="text"> | Campo de texto simples | <input type="text"> |
| 42 | <input type="password"> | Campo de senha (oculto) | <input type="password"> |
| 43 | <input type="email"> | Campo que valida e-mail | <input type="email"> |
| 44 | <input type="submit"> | Botão de enviar formulário | <input type="submit"> |
| 45 | <button> | Botão clicável genérico | <button>Clique Aqui</button> |
| 46 | <textarea> | Campo de texto de múltiplas linhas | <textarea></textarea> |
| 47 | <select> | Lista suspensa (dropdown) | <select>...</select> |
| 48 | <option> | Opção dentro de um select | <option value="1">A</option> |
| 49 | id | Identificador único para o elemento | <div id="meu-id"> |
| 50 | class | Classe para estilização (múltiplos) | <div class="card"> |
| 51 | style | CSS direto no elemento (inline) | <p style="color: blue;"> |
| 52 | title | Dica de ferramenta ao passar o mouse | <span title="Dica">Texto</span> |
| 53 | data-* | Atributos de dados customizados | <div data-user-id="123"> |
| 54 | hidden | Esconde o elemento da tela | <p hidden>Invisível</p> |
| 55 | <details> | Cria um widget de sanfona (retrátil) | <details>...</details> |
| 56 | <summary> | Título visível do <details> | <summary>Leia mais</summary> |
| 57 | <dialog> | Caixa de diálogo ou modal nativa | <dialog open>...</dialog> |