Sección 2.3

El cuerpo del documento HTML

Contenido para la página

Como mencionábamos en la sección anterior, el cuerpo de un documento HTML contiene los contenidos en sí de la página. El cuerpo está contenido dentro de un elemento <body>.

Recordemos la estructura básica de un documento HTML5:

<!DOCTYPE html>
<html>
  <head>
    <!-- Aquí pondremos el contenido de la cabecera -->
  </head>
  <body>
    <!-- Aquí pondremos el contenido del cuerpo -->
  </body>
</html>

A lo largo de este tema iremos viendo en detalle cómo funciona cada etiqueta. A modo de resumen, empezaremos con un resumen de las etiquetas más utilizadas en el cuerpo de un documento en HTML5:

<p>, <pre>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <address>
Salto de línea <br />
Tipo de información <abbr> <cite> <code> <em> <kbd> <strong>
Elemento carácter <b> <i> <small> <sub> <sup>
Bloque de cita: <blockquote>
División: <div>, <article>, <header>, <section>, <aside>, <nav>, <footer>

En general, las etiquetas se organizan siguiendo las siguientes normas:

  • Las etiquetas de bloque se pueden poner dentro de las etiquetas de contenedores o dentro de la etiqueta <body>
  • No se deberían incluir etiquetas de bloque dentro de otras etiquetas de bloque.
  • Las etiquetas inline deberían aparecer siempre dentro de las etiquetas de bloque.
  • Las etiquetas contenedoras pueden tener dentro etiquetas de bloque y otras etiquetas contenedoras.

Etiquetas de bloque

Entre las etiquetas de bloque destacamos las siguientes:

Elemento <p>

Contiene el texto de un párrafo. El navegador no muestra los espacios en blanco ni los saltos de línea adicionales que escribamos dentro de un párrafo. Podemos incluir algunas características de estilo dentro de la propia etiqueta pero no es aconsejable.

<p>Esto es un párrafo. Aunque escriba       varios espacios


y saltos de línea saldrá todo de manera compacta</p>
<p align="center">Centrado</p>
<p align="right">Alineado a la derecha</p>

Añade el código anterior (con sus espacios y todo) dentro del elemento <body> del código que tienes al principio de la página.

Guarda el archivo y prueba a abrirlo en tu navegador. Observa lo que sucede con los espacios y saltos de línea que tenías al principio.

Elemento <pre>

Contiene un párrafo con texto preformateado, es decir, se tienen en cuenta espacios en blanco y líneas en blanco. Dentro de estos párrafos se usa un tipo de letra de ancho fijo por lo que se suele utilizar para escribir texto como código fuente:

<p>En JavaScript podemos definir una función de la siguiente forma:</p>
<pre>
var nombre = function() {
  // Código de la función
};
</pre>
Prueba este fragmento de código en tu página de ejemplo y observa cómo lo representa tu navegador.

Elementos <h1>…<h6>

Definenen encabezados de secciones (de nivel 1 a 6)

<h1>Sección 1</h1>
<h2>Sección 1.1</h2>
<p>Texto normal.</p>
<h3>Sección 1.1.1</h3>
<p>Texto normal.</p>
Prueba este fragmento de código en tu página de ejemplo y observa cómo lo representa tu navegador.

Elemento <address>

Contiene información de contacto del autor de la página:

<address>Autor: Juan Antonio Recio (UCM) <br />
Última modificación: 28 de febrero de 2014
</address>
Prueba este fragmento de código en tu página de ejemplo y observa cómo lo representa tu navegador.

Etiquetas inline

Son las que se utilizan para generalmente dentro de otros párrafos. Algunas etiquetas inline se usaban para definir directamente el formato del texto (por ejemplo <b>, <i>, etc.) pero esto no es recomendable y es preferible no usarlo en los documentos HTML5.

Aunque existen otras como <hr/>, <abbrv>, <cite> o <dfn>, destacaremos principalmente las siguientes:

Elementos de espacio

Son elementos que sirven para romper líneas y añadir espacios en blanco:

Elementos de importancia en el texto

Para marcar la importancia de unas palabras dentro del texto se usan las siguientes etiquetas:

La recomendación de usar <em> y <strong> encierra un matiz sutil: La etiqueta <i> significa “pon este texto en cursiva”, mientras que la etiqueta <em> significa “este texto hay que enfatizarlo”.

Las nuevas marcas hablan de la semántica del fragmento, sin explicitar el formato. Después, el navegador o las CSS podrán decidir mostrar el texto enfatizado en cursiva o con un formato alternativo.

Código

Si queremos incrustar código en mitad de un párrafo (o de cualquier etiqueta de bloque), en lugar de <pre>, deberemos usar el elemento <code>

<p>En C, el punto de entrada de ejecución es la función <code>int main()</code>, que puede tener parámetros</p>

Elementos de edición de texto

Se usan para mostrar que se ha modificado una página con respecto a una versión anterior:

<p>La nota final es <del>suspenso</del> <ins datetime="20130625">aprobado</ins>.</p>
Prueba este fragmento de código en tu página de ejemplo y observa cómo lo representa tu navegador. Prueba a pasar el cursor sobre la palabra “aprobado”.

Etiquetas de contenedores de texto

Estas etiquetas sirven para, principalmente, organizar la estructura de la página. Las más utilizadas son las siguientes:

Agrupaciones y divisiones

El elemento <div> o división es el elemento más importante para agrupar diversos elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc.) y dar la estructura de formato de la página (anteriormente en muchos casos se usaban tablas para dar dicha estructura).

Una división no puede insertarse dentro de una etiqueta inline (<strong>, <em>, etc.) o de un bloque de texto (párrafo <p>, encabezado <h1> … <h6>, etc), pero sí puede insertarse dentro de una tabla o de otra división <div>.

Sin embargo, si lo que se quiere crear es un grupo de elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas dentro de un párrafo) se utiliza el elemento <span>

Con las hojas de estilos y los atributos genéricos class e id daremos formato a estas agrupaciones. En caso de los elementos <div> estas hojas de estilo se usan incluso para definir la posición de los distintos elementos.

<div id="cuentoCaperucita">
    <div class="titulo">Caperucita Roja</div>
    <div class="cuento">
        <p>Andaba sola <span class="rojo">Caperucita Roja</span>
        y se encontró <span class="feroz">al lobo feroz</span></p>
    </div>
</div>

Puedes probar el fragmento de código anterior, pero verás que los atriburos “titulo”, “cuento”, “rojo” y “feroz” no hacen nada.

Más adelante podremos usar estos atributos para asociar formatos a los distintos elementos contenidos dentro de los <div> o los <span.

Citas

El elemento <blockquote> se usa para incluir una cita larga, que puede contener varios párrafos u otras etiquetas. El texto dentro de esta etiqueta se suele mostrar con márgenes a izquierda y derecha, aunque lo más conveniente es definir el formato deseado en la hoja de estilo. Se puede indicar el origen de la cita con el atributo cite.

<p>El candidato a la presidencia fue locuaz en su discurso:</p>
<blockquote cite="http://www.buenasnoticias.org/entrevista12.html">
<p>Prometo que voy a respetar los servicios sociales, naturalmente. Miente quien infunda alguna sospecha al respecto. </p>
<p>Y bla bla bla...</p>
</blockquote>

Elementos de estructura semántica

Estos elementos se han incorporado nuevos en HTML5 e indican la estructura semántica de la página. Son similares a los elementos <div> pero llevan implícito el significado relacionado con la estructura.

Organizacion de los elementos semanticos

Aunque existen muchos los siguientes son los elementos semánticos más importantes: