EBAC Logotipo
Menú

3.3 Etiquetas esenciales para contenido semántico. Crea textos, enlaces e imágenes

Aprender a usar etiquetas semánticas para organizar contenido textual en la interfaz, manteniendo accesibilidad y claridad. Aprender a enlazar documentos y añadir imágenes para enriquecer la web.

1. Títulos

Los títulos dan estructura jerárquica al contenido.


  1. Etiquetas: <h1> a <h6>.
  2. Solo un <h1> por página (título principal).
  3. No se usan por tamaño visual (eso es CSS).


Ejemplo



<h1>Rutina diaria</h1>


<h2>Hábitos de salud</h2>


<h3>Hidratación</h3>

2. Párrafos

Para bloques de texto corrido usamos <p>.

Cada párrafo debe estar dentro de su propia etiqueta.

Puedes usar <br> para hacer un salto de línea, pero no ocupes múltiples para separar párrafos para eso existe css.


Buenas prácticas:

  1. Ideas claras y cortas.
  2. Usar títulos, listas o negritas para apoyar la lectura.


Ejemplo:

<p>Este hábito te ayuda a mantenerte hidratada y activa.</p>

3. Etiquetas Semánticas

<header>: cabecera o bienvenida.

<nav>: menú de navegación.

<main>: contenido principal (solo uno por página).

<article>: contenido independiente (como una rutina).

<section>: agrupa contenido relacionado.

<aside>: contenido complementario (tips, recordatorios).

<footer>: pie de página (info legal, enlaces).


Beneficios:

  1. Mejora accesibilidad (lector de pantalla).
  2. Mejora SEO.
  3. Código más organizado.

4. Ejemplo Semántico



<header>


  <h1>¡Buenos días, Ana!</h1>


  <p>Tu día está listo para comenzar</p>


  <nav>


    <ul>


      <li><a href="/hoy">Hoy</a></li>


      <li><a href="/habitos">Hábitos</a></li>


      <li><a href="/progreso">Progreso</a></li>


    </ul>


  </nav>


</header>


<main>


  <section id="hoy">


    <h2>Tareas para hoy</h2>


    <article>


      <h3>Rutina matutina</h3>


      <ol>


        <li>Tomar agua</li>


        <li>Desayunar ligero</li>


      </ol>


    </article>


    ...


  </section>


  <aside>


    <h4>Consejo del día</h4>


    <p>Establece metas pequeñas y reales. ¡Lo importante es avanzar!</p>


  </aside>


</main>


<footer>


  <p>2025 Mi Rutina - Mi compañero de rutina</p>


</footer>

5. Referenciación: Links y rutas

  1. Usamos la etiqueta <a> para crear enlaces.
  2. Atributo href indica la ruta o destino.


Ejemplo:

<a href="habitos.html">Ver hábitos</a>


Permite navegación entre páginas, archivos o recursos (PDF, imagen, etc.).

6. Tipos de Rutas

  1. Ruta absoluta: incluye dominio completo.
<a href="https://mirutina.com/habitos.html">
  1. Ruta relativa: depende de la ubicación del archivo.


<a href="./hoy.html">Mismo directorio</a>


<a href="../inicio.html">Directorio padre</a>


<a href="/contacto.html">Desde la raíz</a>
  1. Prefijos:
  2. ./ → actual
  3. ../ → subir
  4. / → raíz


7. Imágenes Consideraciones Especiales

  1. Formatos comunes:
  2. .jpg / .jpeg: fotos, buena compresión.
  3. .png: fondo transparente, más pesado.
  4. .webp: moderno y liviano (no siempre compatible).
  5. Tamaño de archivo:
  6. Optimizar para web (más ligero, buena calidad).
  7. Resoluciones recomendadas:
  8. Desktop: 1920×1080 px
  9. Móvil: 375×667 px

8. Inserción de imágenes

  1. Básico:
<img src="ana.jpg" alt="Ana revisando su rutina">
  1. Responsive con srcset:
<img src="pequena.jpg" srcset="grande.jpg 800w, mediana.jpg 500w" alt="Ana">
  1. Uso de <picture>:


<picture>


  <source srcset="imagen.webp" type="image/webp">


  <img src="imagen.jpg" alt="Ana descansando">


</picture>
  1. Agrupar con <figure> y <figcaption>:


<figure>


  <img src="agua.jpg" alt="Botella de agua">


  <figcaption>Hábito de hidratación</figcaption>


</figure>