Lección 9: Contenido

Cuando se crea la estructura de una web debe ser cristalino ante los ojos del diseñador web. Los compañeros deben poder interpretar y entender cada sección del sitio, ¡y sin abrir el navegador! Más que una obligación es una necesidad de trabajo. Hará que sea fácil de mantener a lo largo de los años, el posicionamiento en los buscadores mejorará (y sin gastar dinero) y podrás incorporar otro miembro sin tener que explicar la estructura (El código será su profesor particular).

Para ello usaremos las etiquetas de contenido, las cuales nos aportarán nombres más semánticos.

  • No semánticas: <div> o <span>. ¿Qué representa esto?
  • Semánticas: <table> o <strong>. Sabemos lo que hacen.

Todas las etiquetas que vamos a ver no aportan ninguna característica nueva, son equivalentes a <div> en funcionalidad (una etiqueta estéril de tipo bloque). Recuerda que existen para dar orden, no propiedades.

Observa el siguiente ejemplo.

<div>
    <div>
        <a href="#">Contacto</a>
    </div>
</div>

¿Donde está? ¿arriba, abajo, lateral…? ¿Es importante o una sección secundaria? Imposible de responder.

Ahora veamos el mismo ejemplo pero con etiquetas de contenido.

Etiqueta <header>
Descripción Define la cabecera de la página o estructura.
Atributos Globales
Tipo Bloque
<header>
    <nav>
        <a href="#">Contacto</a>
    </nav>
</header>

De un vistazo ya se que pertenece a la cabecera de mi web y el enlace pertenece al menú. Se explica sola.

¡Vamos a dar calidad al código!

Etiqueta <main>
Descripción Define el contenido dominante de <body>.
Atributos Globales
Tipo Bloque
<body>
    <header>
        Cabecera
    </header>

    <main>
        Contenido
    </main>
</body>
Etiqueta <section>
Descripción Define una sección.
Atributos Globales
Tipo Bloque
<body>
    <main>
        <section>
            <h1>Blog</h1>
            <p>Contenido</p>
        </section>
        <section>
            <h1>Historico</h1>
            <p>Contenido</p>
        </section>
    </main>
</body>
Etiqueta <nav>
Descripción Define el navegador.
Atributos Globales
Tipo Bloque
<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Sobre mi</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

No es necesario utilizar la etiqueta <nav> dentro de un <footer>.

Para realizar unas migas de pan es recomendado usar <ol>.

Por ejemplo, te encuentras en la ficha donde se venden unas zapatillas deportivas. Las migas podrían ser las siguientes.

Ofertas » Hombre » Zapatillas » Deportivas

<nav>
    <ol>
        <li><a href="#">Ofertas</a></li>
        <li><a href="#">Hombre</a></li>
        <li><a href="#">Zapatillas</a></li>
        <li><a href="#">Deportivas</a></li>
    </ol>
</nav>
Etiqueta <address>
Descripción Indica la información de contacto: teléfono, e-mail, dirección…
Atributos Globales
Tipo Bloque
<address>
  <a href="mailto:correo@falso.com">correo@falso.com</a><br>
  <a href="tel:+34123456789">123456789</a>
</address>
Etiqueta <article>
Descripción Define un bloque reutilizable y autocontenido, como puede ser una publicación de un foro, comentarios, los resultados de un buscador, artículos de un blog, elementos independientnes, etc.
Atributos Globales
Tipo Bloque
<article>
    <h1>Comentarios</h1>
    <article>
        <h2>Alejandro Magno</h2>
        <p>¿Habéis visto mi espada?</p>
    </article>
    <article>
        <h2>Atila</h2>
        <p>Por el Mar Negro no te has dejado nada.</p>
    </article>
    <article>
        <h2>Qing</h2>
        <p>¿No prefieres una Katana?</p>
    </article>
</article>
Etiqueta <aside>
Descripción Representa un fragmento del documento que esta indirectamente relacionado con el contenido principal. Utilizado para sidebars o menús laterales.
Atributos Globales
Tipo Bloque
<aside>
    <nav>
        <ul>
            <li>
                <a>Inicio</a>
            </li>
            <li>
                <a>Preguntas</a>
            </li>
        </ul>
    </nav>
</aside>

<main>
    <p>Contenido</p>
</main>

Otro ejemplo pero dentro de un contexto.

<article class="comentarios">

    <aside>
        Recuerda que para comentar debes ser un gran conquistador e ir a <a href="registro.html">registro</a>
    </aside>

    <h1>Comentarios</h1>
    <article>
        <h2>Alejandro Magno</h2>
        <p>¿Habéis visto mi espada?</p>
    </article>
    <article>
        <h2>Atila</h2>
        <p>Por el Mar Negro no te has dejado nada.</p>
    </article>
    <article>
        <h2>Qing</h2>
        <p>¿No prefieres una Katana?</p>
    </article>
</article>
Etiqueta <footer>
Descripción Difene el pie de la página, generalmente con fecha de publicación o temas legales.
Atributos Globales
Tipo Bloque
<footer>
    2077 Copyright
</footer>

Puede ser usado dentro de una estructura más pequeña y autocontenida.

<article>
    <header>
        <h2>Título</h2>
        <p>Publicado <time datetime="2077-12-03">Ayer</time></p>
    </header>
    <p>Contenido</p>
</article>

Ejemplo completo

Ahora vamos a ver a una sencilla estructura que es recurrentemente utilizada en el desarrollo.

Previa

Ejemplo sencillo

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Biblioteca</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
    <h1>
        Club de lectura
    </h1>
  </header>

  <section>
    <h2>
        Últimos libros
    </h2>
    <article>
      <header>
        <p>
            Historia de dos Ciudades
        </p>
      </header>
      <p>
        Reflejo del siglo XVIII
      </p>
    </article>
    <article>
      <header>
        <p>
          Cuento de navidad
        </p>
      </header>
      <p>
        Historia de Nochebuena
      </p>
    </article>
    <aside>
      <p>
          Charles Dickens
      </p>
    </aside>
  </section>

  <footer>
    Copyright todos los derechos casi reservados
  </footer>
</body>

9-1 9-2

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario