Skip to main content

HTML Fundamentos

O Que é HTML e Por Que é Importante​

HTML, que significa HyperText Markup Language (Linguagem de Marcação de Hipertexto), é a linguagem fundamental da web. Toda página que você acessa na internet é construída com HTML. É a estrutura, o esqueleto que dá forma ao conteúdo.

Pense em HTML como os alicerces e a estrutura de uma casa. Você pode ter a decoração mais bonita do mundo (CSS) e os sistemas mais inteligentes (JavaScript), mas sem uma estrutura sólida, nada funciona. HTML é essa estrutura.

HTML não é uma linguagem de programação no sentido tradicional - você não escreve lógica complexa ou algoritmos com HTML. Em vez disso, HTML é uma linguagem de marcação, o que significa que você "marca" o conteúdo para indicar o que cada parte representa. Você diz "isso é um título", "isso é um parágrafo", "isso é uma lista", e assim por diante.

O navegador então lê essas marcações e renderiza o conteúdo de forma apropriada.

A Estrutura Básica de um Documento HTML​

Todo documento HTML segue uma estrutura básica. Vamos começar com o exemplo mais simples possível:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Esta é minha primeira página web.</p>
</body>
</html>

Vamos quebrar isso em partes:

<!DOCTYPE html>​

Esta linha declara que o documento é HTML5 (a versão mais recente do HTML). Ela precisa estar no início de todo documento HTML.

<html lang="pt-BR">​

Esta é a tag raiz de todo documento HTML. Tudo que está na página fica dentro desta tag. O atributo lang="pt-BR" indica que o conteúdo está em português brasileiro.

A seção head contém metadados - informações sobre o documento que não são exibidas diretamente na página, mas são importantes para o navegador e mecanismos de busca.

<meta charset="UTF-8">​

Define a codificação de caracteres. UTF-8 suporta praticamente todos os caracteres de todos os idiomas, incluindo acentos e emojis.

<meta name="viewport">​

Crucial para sites responsivos (que funcionam bem em dispositivos móveis). Ela diz ao navegador como dimensionar a página em diferentes tamanhos de tela.

<title>​

O título que aparece na aba do navegador. Também é usado quando alguém salva a página nos favoritos.

<body>​

Aqui é onde vai todo o conteúdo visível da página. Tudo que você quer que os usuários vejam fica dentro da tag body.

Elementos e Tags: Os Blocos de Construção​

HTML funciona através de elementos. Cada elemento é representado por tags. A maioria dos elementos tem uma tag de abertura e uma tag de fechamento:

<p>Este é um parágrafo.</p>

A tag <p> abre o elemento parágrafo, e </p> fecha. O conteúdo fica entre as duas tags.

Alguns elementos são "vazios" e não precisam de tag de fechamento:

<img src="imagem.jpg" alt="Descrição">
<br>
<hr>

Elementos Essenciais​

Cabeçalhos (Headings)​

HTML tem seis níveis de cabeçalhos, de <h1> (mais importante) a <h6> (menos importante):

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção</h3>
<h4>Subseção</h4>
<h5>Item Menor</h5>
<h6>Item Mínimo</h6>

Use cabeçalhos para estruturar hierarquicamente seu conteúdo. Não use cabeçalhos apenas para fazer texto grande - use CSS para isso. Cabeçalhos são importantes para acessibilidade e SEO.

Parágrafos​

<p>Este é um parágrafo de texto. Pode conter várias frases.</p>
<p>Este é outro parágrafo separado.</p>

Links (âncoras) são o que torna a web "web" - eles conectam páginas e recursos:

<a href="https://www.exemplo.com">Texto do Link</a>
<a href="outra-pagina.html">Link para outra página</a>
<a href="#secao">Link para seção na mesma página</a>
<a href="mailto:email@exemplo.com">Enviar Email</a>

Imagens​

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

O atributo src especifica o caminho para a imagem. O atributo alt é obrigatório e fornece uma descrição textual - crucial para acessibilidade.

Listas​

Listas não ordenadas (com marcadores):

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Listas ordenadas (numeradas):

<ol>
    <li>Primeiro passo</li>
    <li>Segundo passo</li>
    <li>Terceiro passo</li>
</ol>

Divisores e Seções Semânticas​

Para organizar melhor o conteúdo, você pode usar elementos semânticos:

<header>Cabeçalho da página ou seção</header>
<nav>Área de navegação</nav>
<main>Conteúdo principal</main>
<section>Uma seção temática do documento</section>
<article>Um artigo ou conteúdo independente</article>
<aside>Conteúdo relacionado (como sidebar)</aside>
<footer>Rodapé da página ou seção</footer>

Esses elementos semânticos ajudam a estruturar melhor o conteúdo e são importantes para acessibilidade e SEO.

Formulários: Coletando Dados do Usuário​

Formulários são essenciais para interação com usuários:

<form action="/processar" method="POST">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="senha">Senha:</label>
    <input type="password" id="senha" name="senha" required>
    
    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="mensagem" rows="4"></textarea>
    
    <button type="submit">Enviar</button>
</form>

Elementos importantes:

  • <form>: Container para todos os campos
  • <label>: Rótulo descritivo (importante para acessibilidade)
  • <input>: Campo de entrada (texto, email, senha, etc.)
  • <textarea>: Campo de texto multilinha
  • <button>: Botão para enviar

Atributos: Personalizando Elementos​

Atributos fornecem informações adicionais sobre elementos:

<img src="foto.jpg" alt="Minha foto" width="300" class="foto-perfil">
<a href="https://exemplo.com" target="_blank" rel="noopener">Link</a>
<div id="container" class="wrapper" data-info="algum-dado">

Alguns atributos globais (podem ser usados em qualquer elemento):

  • id: Identificador único
  • class: Classe para agrupar elementos (usado com CSS)
  • style: Estilos inline (evite usar, prefira CSS externo)
  • title: Texto que aparece ao passar o mouse
  • data-*: Atributos customizados

HTML Semântico: Por Que Importa​

HTML semântico significa usar os elementos corretos para o propósito correto.

HTML não semântico (ruim):

<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

HTML semântico (bom):

<header>...</header>
<nav>...</nav>
<main>...</main>

Por que isso importa?

  1. Acessibilidade: Leitores de tela entendem melhor
  2. SEO: Mecanismos de busca entendem melhor
  3. Manutenção: Código mais fácil de entender
  4. Futuro: Seu código fica mais robusto

Boas Práticas de HTML​

1. Sempre Feche Suas Tags​

<!-- Bom -->
<p>Texto</p>

<!-- Ruim -->
<p>Texto

2. Use Indentação Consistente​

<body>
    <header>
        <nav>
            <ul>
                <li>Item</li>
            </ul>
        </nav>
    </header>
</body>

3. Use Atributos Alt em Imagens​

<!-- Bom -->
<img src="gato.jpg" alt="Gato laranja brincando com bola">

<!-- Ruim -->
<img src="gato.jpg" alt="imagem">

4. Use Minúsculas para Tags​

<!-- Bom -->
<div></div>

<!-- Evite -->
<DIV></DIV>

Criando Sua Primeira Página Completa​

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Uma página de exemplo sobre desenvolvimento web">
    <title>Minha Primeira Página Web</title>
</head>
<body>
    <header>
        <h1>Bem-vindo ao Meu Site</h1>
        <nav>
            <ul>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="sobre">
            <h2>Sobre Mim</h2>
            <p>Estou aprendendo desenvolvimento web!</p>
        </section>
        
        <section id="contato">
            <h2>Entre em Contato</h2>
            <form>
                <label for="nome">Nome:</label>
                <input type="text" id="nome" name="nome" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 Meu Site. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

Salve este código em um arquivo .html e abra no navegador!

Próximos Passos​

Agora que você entende HTML, você tem a estrutura. No próximo módulo, vamos aprender CSS - a linguagem que transforma essa estrutura em algo visualmente atraente.

Antes de continuar, pratique criando algumas páginas HTML próprias. Experimente diferentes elementos e tente estruturar o conteúdo de forma semântica.

Referências​