Quer ajudar o projeto? Você pode doar na tela Sobre mim!

Estrutura de uma página HTML moderna

Uma página HTML moderna geralmente inclui:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo Moderno</title>
    <meta name="description" content="Descrição da página para SEO.">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Conteúdo principal -->
  </body>
</html>

Principais atributos globais

Os atributos globais podem ser usados em quase todas as tags HTML:

  • id, class, style, title, tabindex, hidden, draggable, lang, data-*

Diferença entre HTML e XHTML

  • HTML é mais flexível, não exige fechamento de todas as tags e aceita letras maiúsculas/minúsculas.
  • XHTML é mais rigoroso, exige fechamento de todas as tags, atributos entre aspas e letras minúsculas.

Boas práticas de organização de código

  • Indente o código corretamente.
  • Use comentários para explicar trechos importantes:
<!-- Este é um comentário em HTML -->
  • Separe o conteúdo (HTML), estilo (CSS) e comportamento (JavaScript).

Ferramentas úteis para desenvolvedores HTML

  • Can I use — Verifique compatibilidade de recursos HTML/CSS/JS nos navegadores.
  • HTML Reference — Referência visual de todas as tags HTML.
  • A11Y Project — Recursos e dicas de acessibilidade.

title: "O que é HTML?" description: "Uma visão geral sobre HTML, CSS e JavaScript, incluindo boas práticas e convenções."

Html5

HTML (HyperText Markup Language) é a linguagem de marcação padrão usada para criar páginas web. Ele define a estrutura básica de um site por meio de elementos que organizam o conteúdo, como títulos, parágrafos, imagens, links e tabelas.

Características do HTML

HTML serve para estruturar o conteúdo, não para realizar cálculos ou lógica como uma linguagem de programação faria.

Todos os sites na internet utilizam HTML como base para sua estrutura.

  • CSS (Cascading Style Sheets): responsável pelo estilo visual da página (cores, fontes, espaçamentos).
  • JavaScript: adiciona interatividade, como menus dinâmicos, animações, validações de formulário, entre outros.

Tags de Bloco vs Tags Inline

No HTML, os elementos podem ser classificados em dois grandes grupos:

  • Tags de bloco: ocupam toda a largura disponível e iniciam uma nova linha. Exemplos: <div>, <p>, <h1>, <section>, <header>, <footer>, <main>, <article>, <nav>, <ul>, <li>.
  • Tags inline: ocupam apenas o espaço necessário ao seu conteúdo e não iniciam nova linha. Exemplos: <span>, <a>, <strong>, <em>, <img>, <input>, <label>, <mark>, <abbr>.

Exemplo prático:

<p>Esse é um <strong>texto em negrito</strong> e um <a href="#">link</a> dentro de um parágrafo.</p>

Dicas de SEO e Acessibilidade

  • Use elementos semânticos para ajudar mecanismos de busca a entender o conteúdo.
  • Sempre preencha o atributo alt em imagens.
  • Utilize títulos (<h1>, <h2>, ...) de forma hierárquica.
  • Prefira <button> para ações e <a> para navegação.
  • Use atributos ARIA para melhorar a acessibilidade.

Curiosidades

  • O HTML5 trouxe suporte nativo para áudio, vídeo, gráficos (SVG, Canvas) e APIs como geolocalização e armazenamento local.
  • O HTML é mantido pelo W3C e WHATWG.
  • O nome "HyperText" refere-se à capacidade de criar links entre páginas e recursos.

História do HTML

O HTML foi criado em 1991 por Tim Berners-Lee, com o objetivo de facilitar a troca de documentos científicos entre pesquisadores. Desde então, passou por diversas atualizações:

  • HTML 2.0 (1995): primeira especificação padronizada.
  • HTML 4.01 (1999): trouxe avanços significativos em estrutura e estilo.
  • HTML5 (2014): versão atual, com novos elementos semânticos, suporte nativo a áudio, vídeo, gráficos e APIs avançadas.

Exemplo de um documento HTML básico

index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Primeiro HTML</title>
</head>
<body>
  <h1>Olá, Mundo!</h1>
  <p>Esse é um documento HTML básico.</p>
</body>
</html>

Esse exemplo mostra a estrutura mínima de um documento HTML válido, com:

  • <!DOCTYPE html>: indica ao navegador que o documento usa HTML5.
  • <html lang="pt-BR">: define o idioma do conteúdo.
  • <head>: contém metadados, título e configurações da página.
  • <body>: área onde o conteúdo visível da página é colocado.

Boas Práticas em HTML

Use elementos semânticos

Elementos semânticos são tags HTML que têm um significado claro e específico, tanto para os desenvolvedores quanto para navegadores, leitores de tela e mecanismos de busca. Eles descrevem a função do conteúdo que envolvem, tornando o código mais organizado, acessível e fácil de manter.

Por que usar elementos semânticos?

  • Melhor acessibilidade: tecnologias assistivas, como leitores de tela, entendem melhor a estrutura da página e ajudam usuários com deficiência visual a navegar com mais facilidade.
  • SEO (Search Engine Optimization): mecanismos de busca interpretam melhor o conteúdo da página e classificam os resultados com mais precisão.
  • Manutenção facilitada: o código se torna mais legível e compreensível para qualquer desenvolvedor que venha a trabalhar no projeto.

Exemplos de elementos semânticos

ElementoFunção
<header>Cabeçalho da página ou de uma seção. Pode conter logotipo, menu, etc.
<nav>Área de navegação com links internos ou externos.
<main>Conteúdo principal da página. Deve ser único e conter o foco do site.
<section>Agrupamento temático de conteúdo relacionado.
<article>Conteúdo independente, como posts de blog, notícias, etc.
<aside>Conteúdo complementar (ex: barra lateral, widgets, anúncios).
<footer>Rodapé da página ou de uma seção. Pode conter contatos, créditos, etc.

Exemplo prático

<body>
  <header>
    <h1>Meu Blog</h1>
    <nav>
      <ul>
        <li><a href="#home">Início</a></li>
        <li><a href="#sobre">Sobre</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Últimas Postagens</h2>

      <article>
        <h3>O que é HTML?</h3>
        <p>HTML é uma linguagem de marcação usada na web...</p>
      </article>

      <article>
        <h3>Entendendo CSS</h3>
        <p>CSS é responsável pela aparência dos elementos...</p>
      </article>
    </section>

    <aside>
      <h4>Assine a newsletter</h4>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 Marcos Nathanael. Todos os direitos reservados.</p>
  </footer>
</body>

Notas:

Algumas Dicas:

  • Use <div> apenas quando nenhum elemento semântico se aplicar.
  • Evite usar tags genéricas em excesso. Prefira:
    1. <section> em vez de <div class="section">
    2. <footer> em vez de <div class="footer">

O HTML usa "Marcação" para anotar texto, imagem e outros conteúdos para exibição em um navegador da Web. A marcação HTML inclui "elementos" especiais, como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> e muitos outros.

Recursos Avançados do HTML

O que é CORS?

CORS (Cross-Origin Resource Sharing) é um mecanismo de segurança implementado pelos navegadores que controla o acesso a recursos entre diferentes origens (domínios).

Por que o CORS existe?

Quando uma aplicação web (ex: meusite.com) tenta fazer uma requisição para outra origem (ex: api.outrasite.com), o navegador bloqueia essa ação por padrão, como medida de segurança. O CORS serve para permitir explicitamente esse tipo de comunicação — quando for seguro e autorizado.

Como funciona?

  • Quando um site tenta buscar dados de outra origem, o navegador envia uma requisição especial chamada preflight (com o método OPTIONS).
  • O servidor de destino precisa responder com cabeçalhos CORS, como:
  Access-Control-Allow-Origin: https://meusite.com
  • Se a origem estiver permitida, o navegador permite que a resposta continue. Caso contrário, bloqueia a requisição.

Cabeçalhos mais comuns no CORS

  • Access-Control-Allow-Origin: define quais domínios podem acessar o recurso.
  • Access-Control-Allow-Methods: lista os métodos HTTP permitidos (GET, POST, PUT, etc).
  • Access-Control-Allow-Headers: especifica os cabeçalhos que podem ser usados na requisição.

Exemplo prático

index.http
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Sem isso, o navegador bloqueará a resposta.

Notas:

Importante

  • O CORS não é um mecanismo de segurança do lado do cliente, mas sim do lado do servidor.
  • Servidores mal configurados podem causar erros como:
Access to fetch at `https://api.exemplo.com' 
from origin 'http://localhost:3000' has been blocked by CORS policy.

Após aprender a estrutura básica do HTML, é importante conhecer recursos mais avançados que permitem criar páginas web modernas, acessíveis e funcionais.

Elementos Semânticos Avançados

Além dos elementos como <header>, <main>, <section> e <footer>, existem outros com papéis específicos:

  • <figure> e <figcaption>: utilizados para agrupar uma imagem com sua legenda.
  • <mark>: destaca trechos de texto como marca-texto.
  • <time>: representa uma data ou horário, útil para eventos, posts, etc.
  • <details> e <summary>: criam um bloco de conteúdo expandível.
  • <dialog>: permite criar janelas modais de forma nativa.

Exemplo de <details>:

<details>
  <summary>Leia mais</summary>
  <p>Este é um conteúdo adicional que pode ser expandido.</p>
</details>

Formulários Avançados

O HTML5 trouxe novos tipos de input que melhoram a experiência do usuário e a validação automática:

  • type="email", type="url", type="number", type="range", type="color", type="date", etc.
  • Atributos como required, pattern, min, max, step, e placeholder ajudam na validação e acessibilidade.
  • O atributo autocomplete sugere preenchimento com base em dados anteriores.
<form>
  <label for="email">E-mail:</label>
  <input type="email" id="email" required autocomplete="email" />
</form>

Acessibilidade (A11Y)

HTML fornece suporte nativo à acessibilidade. Algumas práticas importantes incluem:

  • Usar aria-label, aria-hidden, role e outros atributos ARIA para tornar interfaces compreensíveis para leitores de tela.
  • Garantir que cada <label> esteja associado ao respectivo <input>.
  • Usar alt em imagens.
  • Navegação por teclado: certifique-se de que os elementos interativos (como links e botões) estejam acessíveis com Tab.