Boxes and sections · Caixas e seções
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
Português
Caixas e seções
- Páginas maiores precisam de estrutura — áreas claras, não uma pilha longa única.
- Um
<div>é uma caixa simples. Um<span>é uma caixa pequena inline para algumas palavras. - Caixas agrupam coisas, para que você possa organizá-las e estilá-las depois.
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
Português
Seções nomeadas
- HTML tem caixas especiais com nomes significativos:
<header>(topo),<main>(o conteúdo principal),<footer>(parte inferior),<nav>(links do menu).- Elas funcionam como
<div>, mas os nomes dizem às pessoas — e aos mecanismos de busca — o que cada parte é.
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
Português
Classes nomeiam suas caixas
- Uma classe é um rótulo que você adiciona a uma tag:
<div class="card">. - Ela não faz nada sozinha — mas logo, CSS a usará para dar estilo a essa caixa.
- Este é sua ponte para a próxima metade do curso.
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
Português
Erros comuns
<div>é um bloco (nova linha);<span>é inline (fica no texto).- Use tags semânticas como
<header>e<nav>onde fizerem sentido.
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
Português
Agora você tenta
- Adicione um
<header>e um<footer>, depois dê a uma caixa uma classe. - Na próxima aula, começaremos a fazer as coisas ficarem bonitas com CSS.
Explore · Explorar
A box wraps its content · Uma caixa envolve seu conteúdo
A <div> is a box: content surrounded by padding, border, margin. · Um <div> é uma caixa: conteúdo cercado por padding, borda e margem.
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · Dê à página um topo e um fundo. Envolva o título em um <header> e a nota pequena em um <footer>.
Give this box a name so we can style it later. Add class="card" to the <div>. · Dê um nome a esta caixa para estilizá-la depois. Adicione class="card" ao <div>.