Lección 9: Contenido | Curso HTML

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 ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario