La estructura del documento

El cuerpo del documento

El cuerpo de un documento (body) es simplemente el contenedor para su parte representable. Este es el lugar donde debes comenzar a escribir tu contenido (agregando títulos, párrafos, imágenes, etc.) y la sección a la que tus visitantes accederán inmediatamente cuando la página se cargue.

La gran mayoría de los elementos en HTML pueden ser utilizados dentro de este contenedor. Por ejemplo, puedes poner aquí todos los elementos creados en la pŕactica de tutorial anterior (Etiquetas y atributos) para tener una versión más completa de ese documento. De hecho, en la siguiente práctica lo harás.

Práctica

En esta práctica, construiremos una estructura básica de documento, que nos será útil para el desarrollo de las siguientes prácticas u otro proyecto cualquiera. Así que crea un nuevo archivo (como se ha visto en el tutorial "¿Cómo empezar?") y alista tus dedos.

Para empezar, pondremos en nuestro archivo la primera cosa que todo documento HTML debería tener para encajar en el estándar: la DTD. Como estamos escribiendo un documento HTML5, usaremos la declaración !DOCTYPE correspondiente a esta versión.

<!DOCTYPE html>

El próximo paso en nuestra práctica es agregar el contenedor principal (elemento html), dentro del cual el documento entero estará contenido. Con este elemento, también estableceremos cuál es el lenguage por defecto utilizado en el documento, declarando el atributo lang con la etiqueta de lenguaje correspondiente.

<!DOCTYPE html>
<html lang="es-AR">
 
</html>

Puedes ver como hemos dejado un espacio entre las etiquetas de apertura y cierre de html. Esto es algo que haremos seguido, en aquellos casos (como este) en que sabemos que agregaremos más elementos dentro.

A continuación, y para ahorrarnos tiempo, agregaremos de una vez dos partes más: el encabezado (head) y el cuerpo (body). Recuerda que estos elementos deben ser insertados, en ese orden, como contenido de html.

<!DOCTYPE html>
<html lang="es-AR">
  <head>
 
  </head>
  <body>
 
  </body>
</html>

Desde aquí, todo lo que resta es agregar el título (title) a la sección del encabezado y algo de contenido al cuerpo, que tomaremos presetado del tutorial anterior ("Etiquetas y atributos"). Si te sientes creativo, intenta agregar algunos otros elementos de esta lista, pero no vayas demasiado lejos: muchos de estos elementos serán tratados en los tutoriales siguientes.

No ovlides que el título debería describir concisamente los contenidos tratados en el documento.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Este soy yo, aprendiendo HTML por mi cuenta</title>
  </head>
  <body>
    <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
  </body>
</html>

Eso es todo por ahota. Con esta práctica has creado un marco que puedes utilizar como base para proyectos futuros. Tómate un descanso y nos encontramos en el pŕoximo tutorial.

Próximo tutorial ›

Prev12