Boxes and sections

English

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.

Español

Cajas y secciones

Las páginas más grandes necesitan estructura — áreas claras, no un solo bloque largo.
Un <div> es una caja simple. Un <span> es una caja pequeña en línea para unas pocas palabras.
Las cajas agrupan elementos, para que puedas organizarlos y darles estilo después.

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.

Español

Secciones con nombre

HTML tiene cajas especiales con nombres significativos:
<header> (encabezado), <main> (el contenido principal), <footer> (pie de página), <nav> (enlaces del menú).
Funcionan como <div>, pero los nombres le dicen a las personas —y a los buscadores— qué es 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.

Español

Las clases nombran tus cajas

Una clase es una etiqueta que agregas a una etiqueta: <div class="card">.
No hace nada por sí sola — pero pronto, CSS la usará para darle estilo a esa caja.
Este es tu puente hacia la segunda mitad del 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.

Español

Errores comunes

<div> es de bloque (salto de línea); <span> es en línea (se mantiene en el texto).
Usa etiquetas semánticas como <header> y <nav> donde correspondan.

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.

Español

Ahora tú intentas

Añade un <header> y un <footer>, luego dale a una caja una clase.
En la siguiente lección, comenzaremos a hacer que las cosas se vean bien con CSS.

Explore · ⁨Explorar⁩

A box wraps its content · ⁨Una caja envuelve su contenido⁩

A <div> is a box: content surrounded by padding, border, margin. · ⁨Un <div> es una caja: contenido rodeado por padding, border y margin.⁩

Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · ⁨Dale a la página un encabezado y un pie de página. Envuelve el título en un <header>, y la nota pequeña en un <footer>.⁩

<h1>My site</h1>
<p>Welcome!</p>
<small>Made by me</small>

Give this box a name so we can style it later. Add class="card" to the <div>. · ⁨Dale nombre a esta caja para poder estilizarla más tarde. Añade class="card" al <div>.⁩