| tag | Elementos do HTML usados para estruturar o conteúdo de uma página. Cada tag tem um significado e uma função. | <h1>, <p>, <div>, <a>, <img> | Como caixas em um depósito, cada uma com sua função. |
| div | Um contêiner genérico que agrupa outros elementos, sem significado semântico. | <div class="container">Conteúdo</div> | Como uma caixa de papelão que guarda outros objetos. |
| class | Atributo usado para aplicar estilos CSS a múltiplos elementos com o mesmo valor de classe. | <div class="header">Cabeçalho</div> | Como uma etiqueta que marca vários itens com a mesma cor por exemplo. |
| id | Atributo exclusivo que identifica um único elemento em uma página. | <div id="main-content">Conteúdo</div> | Como um CPF que identifica uma pessoa única. |
| HTML semântico | Uso de tags que têm significado específico, como <header>, <footer>, melhorando a acessibilidade e SEO. | <article>, <section>, <aside>, <nav> | Como móveis específicos em uma casa: cada um com seu uso claro: sofá, cama, etc. |
| heading tags (H1, H2) | Tags de título usadas para definir a hierarquia de títulos em uma página. <h1> é o título principal, <h2> é o subtítulo, e assim por diante. | <h1>Título Principal</h1>, <h2>Subtítulo</h2> | Como o título de um livro e seus capítulos. |
| parágrafos | Tag para definir blocos de texto, cada parágrafo é separado por uma linha em branco por padrão. | <p>Este é um parágrafo.</p> | Como um parágrafo em uma redação, separando ideias. |
| imagens | Tag usada para inserir imagens em uma página. | <img src="imagem.jpg" alt="Descrição da imagem"> | Como colar uma foto em um álbum. |
| links | Tag usada para criar hiperlinks, que podem direcionar o usuário para outras páginas ou seções do site. | <a href="https://exemplo.com">Visite o site</a> | Como uma ponte que leva de um lugar a outro. |
| listas | Tags usadas para criar listas ordenadas (<ol>) e não ordenadas (<ul>), com itens de lista (<li>). | <ul><li>Item 1</li><li>Item 2</li></ul> | Como uma lista de compras, onde você anota itens. |
| CSS | Folhas de estilo usadas para modificar o visual do HTML, como cores, fontes, margens, espaçamentos, etc. | .header { color: blue; } | Como decorar uma casa, escolhendo as cores das paredes e o estilo dos móveis. |
| padding | Espaçamento interno entre o conteúdo de um elemento e sua borda, utilizado para criar "respiro" entre texto e bordas. | padding: 20px; | Como o enchimento de uma almofada, dando espaço ao redor. |
| footer | Tag que define o rodapé de uma página, geralmente contendo informações como direitos autorais ou links úteis. | <footer>© 2024 MeuSite</footer> | Como a assinatura no final de uma carta. |
| header | Tag que define o cabeçalho de uma página ou seção, geralmente contendo o logotipo ou navegação principal. | <header><h1>Meu Site</h1><nav>Links</nav></header> | Como a parte superior de uma folha de carta, onde você coloca o título e as informações principais. |
| variáveis CSS | Valores reutilizáveis para facilitar manutenção de estilos. | --cor-primaria: #3498db; | Como potes de tinta numerados. |
| responsividade | Capacidade de um site de se adaptar a diferentes tamanhos de tela. | @media (max-width: 600px) { ... } | Como roupas elásticas que se ajustam ao corpo. |
