Sesión 2 – Formato de texto y listas

1

TeoríaTexto, formato y listas

Títulos (headings)

HTML ofrece seis niveles de título, de <h1> (el más importante) a <h6> (el menos importante). Se utilizan para crear una jerarquía lógica en el contenido.

Buena práctica: No saltes niveles de título (por ejemplo, no pases de <h1> a <h4> sin usar <h2> y <h3>). La jerarquía de títulos es importante para la accesibilidad y el SEO.

Formato de texto en línea

<strong> — Texto en negrita con importancia semántica (los lectores de pantalla lo enfatizan).
<em> — Texto en cursiva con énfasis semántico.
<b> — Negrita visual, sin significado semántico especial.
<i> — Cursiva visual, sin significado semántico especial.
<u> — Texto subrayado (usar con precaución, puede confundirse con un enlace).
<mark> — Texto resaltado (como si se marcara con un rotulador fluorescente).
<small> — Texto en tamaño reducido (para anotaciones, letra pequeña, etc.).
<del> — Texto tachado (indica contenido eliminado).
<sub> — Subíndice (ejemplo: H₂O).
<sup> — Superíndice (ejemplo: E = mc²).

Elementos de separación

<br> — Salto de línea (etiqueta vacía, no necesita cierre). Úsalo con moderación; en general es mejor usar <p> para separar párrafos.
<hr> — Línea horizontal de separación temática (etiqueta vacía).

Listas no ordenadas

Se utilizan cuando el orden de los elementos no importa. Se muestran con viñetas (bullets). Se crean con <ul> y cada elemento con <li>.

Listas ordenadas

Se utilizan cuando el orden es significativo. Se muestran con números. Se crean con <ol> y cada elemento con <li>.

Listas anidadas

Las listas se pueden anidar unas dentro de otras, colocando una nueva <ul> o <ol> dentro de un <li>.

B

<strong>

Negrita con importancia semántica.

I

<em>

Cursiva con énfasis semántico.

•

<ul>

Lista no ordenada con viñetas.

1.

<ol>

Lista ordenada con numeración.

2

Ejemplos de códigoTítulos, formato y listas

Títulos

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
<h4>Nivel 4</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>

Formato de texto

<p>Este texto es <strong>importante</strong> y este tiene <em>énfasis</em>.</p>
<p>La fórmula del agua es H<sub>2</sub>O.</p>
<p>La ecuación de Einstein: E = mc<sup>2</sup>.</p>

Lista no ordenada

<ul>
    <li>Manzanas</li>
    <li>Plátanos</li>
    <li>Naranjas</li>
</ul>

Lista ordenada

<ol>
    <li>Precalentar el horno a 180°C</li>
    <li>Mezclar los ingredientes</li>
    <li>Hornear durante 30 minutos</li>
</ol>

Lista anidada

<ul>
    <li>Frutas
        <ul>
            <li>Manzanas</li>
            <li>Plátanos</li>
        </ul>
    </li>
    <li>Verduras
        <ul>
            <li>Zanahorias</li>
            <li>Espinacas</li>
        </ul>
    </li>
</ul>

3

PruébaloVe el resultado del código

Formato de texto

<p>Texto <strong>importante</strong>
y con <em>énfasis</em>.</p>
<p>H<sub>2</sub>O y E=mc<sup>2</sup></p>
<p><mark>Resaltado</mark> y
<del>tachado</del></p>

Resultado en el navegador

Texto importante y con énfasis.

H₂O y E=mc²

Resaltado y ~~tachado~~

Listas

<h3>Frutas</h3>
<ul>
  <li>Manzanas</li>
  <li>Plátanos</li>
</ul>
<h3>Pasos</h3>
<ol>
  <li>Lavar</li>
  <li>Cortar</li>
  <li>Servir</li>
</ol>

Resultado en el navegador

Frutas

Manzanas
Plátanos

Pasos

Lavar
Cortar
Servir

4

Ejercicio prácticoPon en práctica lo aprendido

Estructura tu página personal

Abre tu archivo index.html de la sesión anterior.
Añade un subtítulo <h2> que diga «Sobre mí».
Escribe un párrafo que incluya texto en negrita (<strong>) y en cursiva (<em>).
Añade un título <h2> que diga «Mis aficiones» y debajo una lista no ordenada <ul> con al menos 4 aficiones.
Añade otro título <h2> que diga «Mi receta favorita» y debajo una lista ordenada <ol> con los pasos de una receta sencilla.
Crea una lista anidada que clasifique tus asignaturas del colegio por categoría (ciencias, letras, etc.).
Separa las secciones con líneas horizontales <hr>.