Home | Clases | Introducción a las aplicaciones web con HTML5, CSS3 y Javascript | Estructura de un documento HTML

Estructura de un documento HTML


Estructura de un documento HTML

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas.

La primera etiqueta que debemos encontrarnos SIEMPRE, en la primera línea del archivo y sin espacios o líneas que la precedan, es el tipo de documento:

<!DOCTYPE html >


Lo siguiente que debemos hacer es construir la estructura html, en la medida de lo posible especificando el atributo del idioma lang en el que está escrito la página:

<!DOCTYPE html >
<html lang="es">

</html>


Una vez dentro de la estructura en árbol de html y antes de empezar a escribir el contenido, debemos declarar la etiqueta head, responsable, entre otras cosas, de definir:

  • el juego de caracteres en el que está escrito el documento, y que en el caso del idioma español será utf-8 a través de una etiqueta tipo meta charset
  • el título, a través de la etiqueta title
  • la descripción de nuestro documento, a través de la etiqueta meta description
  • las palabras clave de nuestro documento, separadas por comas a través de la etiqueta meta keywords
  • enlaces a archivos CSS y de fuentes, a través de etiquetas tipo link
  • código Javascript, a través de la etiqueta script
  • y muchas otras cosas...

Y por fin, declararemos la etiqueta body, correspondiente al cuerpo de nuestro documento, esto es, la parte visible.

El siguiente código muestra la estructura completa de una página web sencilla :

<!DOCTYPE html >
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS, Jajascript">
<title>Título de la página</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>


Otro importante elemento que va dentro de la cabecera del documento es link. Uno de los usos más comunes para link es la incorporación de archivos con estilos CSS, donde el atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href. En nuestro caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo style.css es un archivo CSS con estilos requeridos para presentar la página en pantalla, algo que veremos más adelante. También utilizaremos la etiqueta link para añadir tipografías de fuentes.

Para facilitar la comprensión del contenido, se recomienda al alumno la visualización del siguiente video, extraído del canal de YouTube pildorasinformáticas:

Conceptos básicos


Estructura del cuerpo

La estructura del cuerpo (el código entre las etiquetas body) generará la parte visible del documento.

HTML siempre ofreció diferentes formas de construir y organizar la información dentro del cuerpo de un documento, primero mediante tablas con la etiqueta table, y posteriormente con el surgimiento de webs más interactivas y la integración de HTML, CSS y Javascript mediante el uso de etiquetas div o contenedor divisor del cuerpo.

El problema es que ni table ni div dan información del tipo de contenido, algo poco importante para el usuario pero necesario para que los navegadores interpreten qué tipo de información hay en cada bloque del documento.

Poniendo como ejemplo una página de un blog, normalmente nos encontramos con 5 partes diferenciadas, tal y como muestra la siguiente imagen:

Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript

  • Cabecera (elemento header): espacio donde usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la página.

  • Barra de navegación (elemento nav): menú o lista de enlaces con el propósito de facilitar la navegación a través del sitio.

  • Información principal (elementos section y article): ubicada en el centro y en el caso de un blog normalmente con un listado de artículos, productos, imágenes o similar.

  • Barra lateral (elemento aside): es opcional, y podría mostrar, por ejemplo, una lista de enlaces apuntando hacia cada uno se esos ítems, un calendario de eventos o anuncios.

  • Institucional o pie (elemento footer): es el área en donde normalmente se muestra información acerca del sitio web, el autor o la empresa, además de algunos enlaces con respecto a reglas, términos y condiciones y toda información adicional que el desarrollador considere importante compartir.



De este modo, si el esquema clásico de diseño de una página web es similar al mostrado en la siguiente figura de la izquierda, HTML5 incorpora nuevos elementos que proporcionan dicha información, y que convertirían el diseño anterior en la siguiente estructura HTML5 (figura de la derecha):

Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript
Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript


Volviendo a nuestro ejemplo anterior, la estructura completa de nuestro sitio web introduciendo los nuevos elementos quedaría así:

<!DOCTYPE html >
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS, Jajascript">
<title>Título de la página</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
Primera sección de la web
<article> Artículo 1 </article>
<article> Artículo 2 </article>
<article> etc </article>
</section>
<section>
Segunda sección de la web
<article> Artículo 1 </article>
</section>
<aside>
<p> Texto 1 del aside </p>
<p> Texto 2 del aside </p>
<p> etc </p>
</aside>
<footer>
Todos los derechos reservados © 2017
</footer>
</body>
</html>


El siguiente vídeo extraído del canal de YouTube pildorasinformaticas sirve para afianzar todo lo visto hasta el momento:

Nuevos elementos de estructura en HTML5


Dentro del cuerpo

El contenido de nuestra página estará compuesto por diferentes elementos visuales tales como títulos, textos, imágenes, videos y aplicaciones interactivas, entre otros. Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura.

Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript
Así, del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento article, normalmente ubicado dentro de un elemento de tipo section, nos permite identificar cada una de estas partes.

El elemento article no está limitado por su nombre (no se limita, por ejemplo, a artículos de noticias). Este elemento fue creado con la intención de contener unidades independientes de contenido, por lo que puede incluir mensajes de foros, artículos de una revista digital, entradas de blog, comentarios de usuarios, productos de una tienda online, etc... Lo que hace es agrupar porciones de información que están relacionadas entre sí independientemente de su naturaleza.


Como una parte independiente del documento, el contenido de cada elemento article tendrá su propia estructura. Para definir esta estructura, podemos aprovechar la versatilidad de los elementos header y footer estudiados anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento.

Dentro de cada elemento header, en la parte superior del cuerpo o al comienzo de cada article, incorporamos elementos h1 para declarar un título. Básicamente, las etiquetas h1 son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular.

Para ello, podemos aprovechar el resto de las etiquetas H, como h1, h2, h3, h4, h5 y h6, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento hgroup, que nos permite agrupar título y subtítulo para que los navegadores generen correctamente la estructura:

Nota: si no tenemos subtítulo, esta etiqueta hgroup no es necesaria.

<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
</header>
Aquí el texto del artículo
</article>
</section>


La etiqueta figure fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento. Antes de que este elemento sea introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc... Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del documento. Así, por ejemplo, la forma correcta de insertar una imagen en nuestra estructura HTML5 sería:

<figure>
<img src="ruta-de-la-imagen/imagen.jpg">
<figcaption>
Pie de foto para la imagen
</figcaption>
</figure>


Como resumen de lo anterior y del final del capítulo, se recomienda al alumno la visualización de los siguientes videos, extraídos del canal de YouTube pildorasinformáticas:

Estructura del cuerpo y nuevos elementos
figure figcaption y Nuevos elementos


Se detallan a continuación algunas otras etiquetas introducidas en HTML5 y que se han comentado en el video anterior:

  • La etiqueta mark fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este caso es un resultado de búsqueda.
  • La etiqueta em es para indicar énfasis, reemplazando la etiqueta i que se utilizaba antes.
  • La etiqueta strong es para indicar importancia, marcando en negrita el texto dentro de ella, y sustituye a la etiqueta b que se utilizaba antes.
  • La etiqueta small tiene el propósito de presentar la llamada letra pequeña, como impresiones legales, descargos, etc...
  • La etiqueta cite se utiliza para presentar títulos de libros, películas, etc.
  • La etiqueta address se debe utilizar para encerrar direcciones de correo electrónico o enlaces a páginas web
  • El elemento time nos permite declarar un texto comprensible para humanos y navegadores que representa fecha y hora


<span>
Mi<mark>coche</mark> es rojo, esto es un <em>texto enfatizado</em> y esto es un <strong>texto importante<strong>.
</span>
<span>
Esto es <small>letra pequeña</small> y esto es el <cite>título de una película</cite>.
</span>
<address>
<a href="http://www.google.es">Enlace a Google</a>
</address>
<time datetime="2017-10-09T12:10:45" pubdate>publicado el 09-10-2017 a las 12:10:45</time>


Mi coche es rojo, esto es un texto enfatizado y esto es un texto importante
Esto es letra pequeña y esto el título de una película
Enlace a Google


Listas y Tablas

<!--declaración de una lista-->
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ul>

<!--declaración de una tabla-->
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Alba</td>
<td>García</td>
<td>27</td>
</tr>
<tr>
<td>Sonia</td>
<td>López</td>
<td>21</td>
</tr>
</table>

Lo que generará algo como esto:

  • Ítem 1
  • Ítem 2
  • Ítem 3


NombreApellidoEdad
AlbaGarcía 27
SoniaLópez 21


Ejercicios propuestos:

  • Realizar una página web siguiendo las especificaciones anteriores que se asemeje lo más posible a la mostrada en el documento PDF proporcionado por el profesor.
  • Realizar una página web siguiendo las especificaciones HTML5 que incluya un listado de, al menos, 10 películas de tu interés. Cada article de cada película debe incluir, al menos, foto con pie de foto, título, subtítulo, año, director, protagonistas y descripción. Por último, al pinchar en cada una de ellas, debe abrirse un enlace en una pestaña nueva que lleve al sitio web oficial de la película o, en su defecto, a la Wikipedia de esa película.

Fecha de publicación: 08/09/2019
Asignaturas: aplicaciones web
Temas: aplicaciones web
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos