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.

Cabecera de la página o elemento

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!

Contenido principal

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

<body>
    <header>
        Cabecera
    </header>

    <main>
        Contenido
    </main>
</body>

Sección

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>

Menú de navegación

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>

Dirección

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>

Elemento reutilizable

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

<section>
    <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>
</section>

Sección lateral o complementaria

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 href="#">Inicio</a>
            </li>
            <li>
                <a href="#">Preguntas</a>
            </li>
        </ul>
    </nav>
</aside>

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

Otro ejemplo pero dentro de un contexto.

<section 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>
</section>

Pie de la página o elemento

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>

Que no ser confundido con <hgroup>.

Grupo de titulos

Etiqueta	`<hgroup>`
Descripción	Representa un encabezado seguido, o posterior, a un contenido relacionado.
Atributos	Globales
Tipo	Bloque

<hgroup>
	<h1>Camilo José Cela (1989)</h1>
	<p>Premio Nobel de Literatura</p>
</hgroup>

Cita

Etiqueta	`<blockquote>`
Descripción	Indica que un texto es una cita externa.
Atributos	Globales
Tipo	Bloque

Etiqueta	`<cite>`
Descripción	Señala a quien se cita.
Atributos	Globales
Tipo	Linea

<blockquote>
    <p>Más vale reinar en el Infierno, que servir en el Cielo.</p>
    <footer><cite>John Milton</cite>, Poeta inglés, considerado tras Shakespeare como el más grande poeta en lengua inglesa.</footer>
</blockquote>

Más vale reinar en el Infierno, que servir en el Cielo.

John Milton, Poeta inglés, considerado tras Shakespeare como el más grande poeta en lengua inglesa.

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>

Actividad 1

Crea una estructura HTML para el artículo de un periódico. No olvides incluir:

Título.
Autor.
Fecha de publicación.
Artículo.
Comentarios.

Actividad 2

Crea 2 páginas diferentes usando la estructura similar al ejercicio anterior.

Listado de discos de Jazz.
Ficha del disco.

Incluye, además, los siguientes apartados.

Navegador entre páginas.
Migas de pan.
Buscador.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario