Folha de Dicas de HTML

Baixar PDF

Aprenda HTML com Laboratórios Práticos

Aprenda a estrutura da web em HTML através de laboratórios práticos e cenários do mundo real. O LabEx oferece cursos abrangentes de HTML que cobrem elementos essenciais, marcação semântica, formulários, integração de mídia e recursos modernos do HTML5. Domine a estrutura eficiente de páginas web e a organização de conteúdo para fluxos de trabalho de desenvolvimento web modernos.

Estrutura do Documento HTML

Documento HTML Básico: <!DOCTYPE html>

Todo documento HTML começa com uma declaração de tipo de documento e segue uma estrutura padrão.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
  </head>
  <body>
    <!-- O conteúdo da página vai aqui -->
  </body>
</html>
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

Qual é o propósito de ?
Ele declara o tipo de documento e a versão HTML
Ele cria um novo elemento HTML
Ele vincula a uma folha de estilo externa
Ele define o título da página

Elementos Head: <head>

A seção head contém metadados sobre o documento.

<!-- Codificação de caracteres -->
<meta charset="UTF-8" />
<!-- Viewport para design responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Descrição da página -->
<meta name="description" content="Page description" />
<!-- Link para CSS -->
<link rel="stylesheet" href="styles.css" />
<!-- Link para favicon -->
<link rel="icon" href="favicon.ico" />

Comentários HTML: <!-- -->

Comentários não são exibidos, mas ajudam a documentar seu código.

<!-- Este é um comentário -->
<!-- 
  Comentário de múltiplas linhas
  para explicações mais longas
-->

Anatomia de Elementos HTML

Elementos HTML consistem em tags de abertura, conteúdo e tags de fechamento.

<!-- Elemento com conteúdo -->
<p>This is a paragraph</p>
<!-- Elementos de auto-fechamento -->
<img src="image.jpg" alt="Description" />
<br />
<hr />
<!-- Elementos com atributos -->
<a href="https://example.com" target="_blank">Link</a>
<!-- Elementos aninhados -->
<div>
  <p>Nested paragraph</p>
</div>

Elementos de Conteúdo de Texto

Títulos: h1 a h6

Definem a hierarquia e a importância das seções de conteúdo.

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

Qual é a hierarquia correta de títulos?
h1 deve ser usado várias vezes em uma página
h1 deve ser usado uma vez como título principal, seguido por h2, h3, etc.
Todos os títulos têm a mesma importância
h6 é o título mais importante

Parágrafos: p

O elemento mais comum para blocos de conteúdo de texto.

<p>
  This is a paragraph of text. It can contain multiple sentences and will wrap
  automatically.
</p>
<p>This is another paragraph. Paragraphs are separated by margin space.</p>

Formatação de Texto: <strong>, <em>, <b>, <i>

Elementos para enfatizar e estilizar texto em linha.

<strong>Strong importance (bold)</strong>
<em>Emphasis (italic)</em>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>

Quebras de Linha e Espaçamento: <br>, <hr>, <pre>

Controlam o fluxo de texto e o espaçamento dentro do conteúdo.

<!-- Quebra de linha -->
Line 1<br />
Line 2
<!-- Regra horizontal -->
<hr />
<!-- Texto pré-formatado -->
<pre>
  Text with
    preserved    spacing
      and line breaks
</pre>
<!-- Formatação de código -->
<code>console.log('Hello');</code>

Listas e Navegação

Listas Não Ordenadas: <ul>

Cria listas com marcadores para itens não sequenciais.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- Listas aninhadas -->
<ul>
  <li>
    Main item
    <ul>
      <li>Sub item 1</li>
      <li>Sub item 2</li>
    </ul>
  </li>
</ul>

Listas Ordenadas: <ol>

Cria listas numeradas para itens sequenciais.

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numeração personalizada -->
<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
</ol>
<!-- Tipos de numeração diferentes -->
<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

Listas de Descrição: <dl>

Cria listas de termos e suas descrições.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web</dd>
</dl>

Cria hiperlinks e estruturas de navegação.

<!-- Link básico -->
<a href="https://example.com">Visit Example</a>
<!-- Link em nova aba -->
<a href="https://example.com" target="_blank">New Tab</a>
<!-- Link de e-mail -->
<a href="mailto:email@example.com">Send Email</a>
<!-- Link de telefone -->
<a href="tel:+1234567890">Call Us</a>
<!-- Âncoras de página internas -->
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

O que target="_blank" faz em uma tag de âncora?
Abre o link na mesma janela
Abre o link em uma nova aba ou janela
Fecha a janela atual
Baixa o link

Formulários e Elementos de Entrada

Estrutura Básica do Formulário: <form>

A base para a coleta de entrada do usuário.

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <input type="submit" value="Submit" />
</form>

Tipos de Entrada: <input>

Vários tipos de entrada para diferentes necessidades de coleta de dados.

<!-- Entradas de texto -->
<input type="text" placeholder="Enter text" />
<input type="email" placeholder="email@example.com" />
<input type="password" placeholder="Password" />
<input type="url" placeholder="https://example.com" />
<input type="tel" placeholder="+1234567890" />
<!-- Entradas numéricas -->
<input type="number" min="1" max="100" step="1" />
<input type="range" min="0" max="100" value="50" />
<!-- Data e hora -->
<input type="date" />
<input type="time" />
<input type="datetime-local" />

Controles de Formulário: <checkbox>, <radio>, <select>, <textarea>

Elementos de formulário adicionais para interação do usuário.

<!-- Checkboxes -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">I agree to terms</label>
<!-- Botões de rádio -->
<input type="radio" id="option1" name="choice" value="1" />
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="choice" value="2" />
<label for="option2">Option 2</label>
<!-- Dropdown select -->
<select name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>
<!-- Textarea -->
<textarea
  name="message"
  rows="4"
  cols="50"
  placeholder="Enter your message"
></textarea>

Validação de Formulário: required, min, max, pattern

Atributos de validação de formulário HTML integrados.

<input type="text" required />
<input type="email" required />
<input type="text" minlength="3" maxlength="20" />
<input type="number" min="1" max="100" />
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

O que o atributo required faz em uma entrada HTML?
Impede o envio do formulário se o campo estiver vazio
Torna o campo somente leitura
Oculta o campo
Define um valor padrão

Elementos de Mídia

Imagens: <img>, <picture>

Exibe imagens com vários atributos e opções.

<!-- Imagem básica -->
<img src="image.jpg" alt="Description" />
<!-- Imagem responsiva -->
<img src="image.jpg" alt="Description" width="100%" height="auto" />
<!-- Imagem com tamanho -->
<img src="image.jpg" alt="Description" width="300" height="200" />
<!-- Elemento picture para imagens responsivas -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Description" />
</picture>

Áudio: <audio>

Incorpora conteúdo de áudio com controles de reprodução.

<!-- Áudio básico -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Seu navegador não suporta áudio.
</audio>
<!-- Áudio com autoplay -->
<audio controls autoplay loop>
  <source src="background.mp3" type="audio/mpeg" />
</audio>

Vídeo: <video>

Incorpora conteúdo de vídeo com opções abrangentes.

<!-- Vídeo básico -->
<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Seu navegador não suporta vídeo.
</video>
<!-- Vídeo com pôster e atributos -->
<video controls poster="thumbnail.jpg" width="100%" height="auto">
  <source src="video.mp4" type="video/mp4" />
  <track src="captions.vtt" kind="captions" srclang="en" label="English" />
</video>

Conteúdo Incorporado: <iframe>

Incorpora conteúdo e aplicativos externos.

<!-- iFrame para conteúdo externo -->
<iframe src="https://example.com" width="100%" height="400"></iframe>
<!-- Incorporação de vídeo do YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
></iframe>
<!-- Incorporação do Google Maps -->
<iframe src="https://maps.google.com/..."></iframe>

Tabelas

Estrutura Básica da Tabela: <table>

Cria exibições de dados estruturados com tabelas.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Recursos Avançados de Tabela: rowspan, colspan, <caption>

Funcionalidade aprimorada da tabela com expansão e agrupamento.

<table>
  <caption>
    Sales Report
  </caption>
  <colgroup>
    <col style="width: 50%" />
    <col style="width: 25%" />
    <col style="width: 25%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2">Product</th>
      <th colspan="2">Sales</th>
    </tr>
    <tr>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$1000</td>
      <td>$1200</td>
    </tr>
  </tbody>
</table>

Elementos Semânticos HTML5

Definem as principais seções do layout da sua página.

<!-- Cabeçalho da página -->
<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<!-- Conteúdo principal -->
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>
<!-- Barra lateral -->
<aside>
  <h2>Related Links</h2>
  <ul>
    <li><a href="#">Link 1</a></li>
  </ul>
</aside>
<!-- Rodapé da página -->
<footer>
  <p>© 2024 Company Name</p>
</footer>

Elementos de Agrupamento de Conteúdo: <section>, <article>, <div>, <figure>

Organizam e agrupam seções de conteúdo relacionadas.

<!-- Seção genérica -->
<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>
<!-- Artigo autônomo -->
<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2024-01-01">January 1, 2024</time>
  </header>
  <p>Article content...</p>
</article>
<!-- Contêiner genérico -->
<div class="container">
  <p>Generic content grouping</p>
</div>
<!-- Figura com legenda -->
<figure>
  <img src="chart.jpg" alt="Sales Chart" />
  <figcaption>Sales data for Q1 2024</figcaption>
</figure>

Atributos HTML

Atributos Globais: id, class, title, data-*

Atributos que podem ser usados em qualquer elemento HTML.

<!-- ID para identificação única -->
<div id="unique-element">Content</div>
<!-- Class para estilização e seleção -->
<p class="highlight important">Text</p>
<!-- Title para tooltips -->
<span title="This is a tooltip">Hover me</span>
<!-- Atributos de dados -->
<div data-user-id="123" data-role="admin">User</div>
<!-- Idioma -->
<p lang="es">Hola mundo</p>
<!-- Direção do conteúdo -->
<p dir="rtl">Right to left text</p>
<!-- Elementos ocultos -->
<div hidden>This won't be displayed</div>

Atributos de Acessibilidade: alt, aria-*, tabindex, role

Atributos que melhoram a acessibilidade e a experiência do usuário.

<!-- Texto alternativo para imagens -->
<img src="photo.jpg" alt="A sunset over mountains" />
<!-- Rótulos ARIA -->
<button aria-label="Close dialog">×</button>
<div aria-hidden="true">Decorative content</div>
<!-- Acessibilidade do formulário -->
<label for="email">Email Address:</label>
<input type="email" id="email" aria-describedby="email-help" />
<small id="email-help">We'll never share your email</small>
<!-- Índice de tabulação -->
<div tabindex="0">Focusable div</div>
<div tabindex="-1">Programmatically focusable</div>
<!-- Atributo de função -->
<div role="button" tabindex="0">Custom button</div>

Recursos Modernos do HTML5

Novos Recursos de Entrada: color, search, file, datalist

O HTML5 introduziu novos tipos de entrada e atributos.

<!-- Novos tipos de entrada -->
<input type="color" value="#ff0000" />
<input type="search" placeholder="Search..." />
<input type="file" accept="image/*" multiple />
<!-- Datalist para preenchimento automático -->
<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>
<!-- Progresso e medidor -->
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>

Canvas e SVG: <canvas>, <svg>

Capacidades de gráficos e desenho no HTML5.

<!-- Canvas para gráficos dinâmicos -->
<canvas id="myCanvas" width="400" height="200">
  Seu navegador não suporta canvas.
</canvas>
<!-- SVG em linha -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2" />
</svg>

Detalhes e Resumo: <details>, <summary>

Cria seções de conteúdo recolhíveis sem JavaScript.

<details>
  <summary>Click to expand</summary>
  <p>
    This content is hidden by default and revealed when clicking the summary.
  </p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</details>
<details open>
  <summary>This starts expanded</summary>
  <p>Content visible by default.</p>
</details>

Elemento Dialog: <dialog>

Funcionalidade nativa de diálogo e modal.

<!-- Elemento dialog -->
<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>Dialog content goes here.</p>
  <button onclick="closeDialog()">Close</button>
</dialog>
<button onclick="openDialog()">Open Dialog</button>
<script>
  function openDialog() {
    document.getElementById('myDialog').showModal()
  }
</script>

Melhores Práticas e Validação

Melhores Práticas de HTML

Escreva HTML limpo, de fácil manutenção e acessível.

<!-- Sempre declare doctype -->
<!DOCTYPE html>
<!-- Use elementos semânticos -->
<header>...</header>
<main>...</main>
<footer>...</footer>
<!-- Aninhamento correto -->
<div>
  <p>Properly nested content</p>
</div>
<!-- Use letras minúsculas para elementos e atributos -->
<img src="image.jpg" alt="description" />
<!-- Feche todas as tags -->
<p>Always close your tags</p>
<!-- Use texto alt significativo -->
<img src="chart.png" alt="Sales increased 25% in Q4" />

Validação e Depuração de HTML

Garanta que seu HTML seja válido e acessível.

<!-- Use o Validador HTML W3C -->
<!-- https://validator.w3.org/ -->
<!-- Erros comuns de validação -->
<!-- Atributos alt ausentes -->
<img src="image.jpg" alt="" />
<!-- Forneça texto alt -->
<!-- Tags não fechadas -->
<p>Text content</p>
<!-- Sempre feche as tags -->
<!-- Aninhamento inválido -->
<p>
  Valid paragraph content
  <!-- Não coloque elementos de bloco dentro de parágrafos -->
</p>
<!-- Use ferramentas do desenvolvedor -->
<!-- Clique com o botão direito → Inspecionar Elemento -->
<!-- Verifique o console em busca de erros -->
<!-- Valide a acessibilidade com WAVE ou axe -->

Modelos e Frameworks HTML

Mecanismos de Modelo: Handlebars, Mustache

Geração de HTML dinâmico com linguagens de modelo.

<!-- Modelo Handlebars -->
<div>
  <h1>{{title}}</h1>
  {{#each items}}
  <p>{{this}}</p>
  {{/each}}
</div>
<!-- Modelo Mustache -->
<div>
  <h1>{{title}}</h1>
  {{#items}}
  <p>{{.}}</p>
  {{/items}}
</div>

Componentes Web: <template>, Elementos Personalizados

Elementos HTML personalizados reutilizáveis.

<!-- Definição de elemento personalizado -->
<template id="my-component">
  <style>
    p {
      color: blue;
    }
  </style>
  <p><slot></slot></p>
</template>
<!-- Uso -->
<my-component>Hello World</my-component>
<script>
  class MyComponent extends HTMLElement {
    // Lógica do componente
  }
  customElements.define('my-component', MyComponent)
</script>

Integração de Framework: React JSX, Modelos Vue

HTML dentro de frameworks JavaScript modernos.

<!-- React JSX -->
function Component() { return (
<div className="container">
  <h1>{title}</h1>
  <p>Content here</p>
</div>
); }
<!-- Modelo Vue -->
<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p v-if="showContent">Content here</p>
  </div>
</template>
Página anteriorWeb DevelopmentPróxima páginaCSS