Curso Práctico HTML5 – Definición tipo documento

Siguiente capítulo dedicado al lenguaje de programación HTML5, el nuevo estándar para la creación de páginas web, este capítulo define la estructura básica de una página web y la especificación del tipo de documento del lenguaje HTML5.

Al utilizar un lenguaje estructurado, como es HTML5, se ha de tener una estructura básica para la creación de la pagina web, al igual que otros lenguajes estructurados se ha de cumplir con un etiquetado inicial que determina como está compuesta la página.



Estructura básica de una página en HTML5

Si se observa el código fuente de una página Web básica, se pueden distinguir tres partes bien diferenciadas, un ejemplo de una página básica en HTML5 sería el siguiente:

Código fuente:

<!DOCTYPE html>
<html>
<head>
<title>Primer Ejercicio HTML 5</title>
</head>
<body>
<p>Esperamos que <strong> aprendoencasa.com</strong> sea un lugar donde estéis cómodos</p>
</body>
</html>

Como se puede observar en primer lugar se encuentra la definición del tipo de documento, el cual se especifica con la etiqueta <!DOCTYPE , seguidamente se encuentra la etiqueta <html> que especifica el principio y fin del documento HTML, entre las etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento cuyas etiquetas correspondientes son <head> y <body>. A continuación se explica con detalle cada uno de estos apartados.

Definición del tipo de documento DOCTYPE

La primera línea de un documento HTML5, es una etiqueta especial llamada DOCTYPE, esta línea indica al navegador el tipo de documento que va a leer. En lenguajes como XHTML 1.0 se aplica también la definición del tipo de documento pero la línea que se indica seria parecida a la siguiente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Como se puede observar es una línea que no permite una lectura fácil de la misma, ya que se incluyen en ellas la especificación del tipo de documento, así como la ubicación del mismo en el sitio web del consorcio W3C, y hace bastante complicada la compresión por parte del usuario así como el recordar de memoria la especificación del tipo de documento.

Esto forzaba a la mayoría de diseñadores o programadores web a copiar y pegar la línea de especificación de documento de un archivo a otro. La nueva versión del lenguaje HTML5 mejora considerablemente la especificación del tipo de documento, ya que se ha incluido una especificación de tipo de documento corta y de fácil aprendizaje.

Cuando observe el código fuente de cualquier pagina Web, es normal encontrarse con la etiqueta que sirve para especificar el DTD (Definición del Tipo de Documento) al principio del documento.

Esta etiqueta se denomina <!DOCTYPE> e indica que versión de XHTML o HTML se utiliza en el documento, para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al documento.

Otra de las aplicaciones que tiene la etiqueta con respecto a los navegadores es la de activar el modo estándar o estricto, o el modo de compatibilidad (“quirk”). El no utilizar actualmente la etiqueta de definición del documento puede suponer que el navegador no interprete en su visualización la página como debe y por lo tanto presentar diferencias en el formato de la página entre distintos navegadores.

Es por ello que es importante especificar el tipo de documento, ya que garantiza que el navegador actué de forma estricta y no se produzcan diferencias en la interpretación del código HTML recibido.

Para realizar la especificación del tipo de documento y que este se correspondan con la definición del lenguaje HTML5, se ha de emplear la siguiente etiqueta.

<!DOCTYPE html>

Como se puede ver es simple y fácil de recordar, ya que solo se ha de especificar la palabra clave “html”, la cual indica que el documento es un documento estructurado con el lenguaje HTML5.

Se ha de tener en cuenta que muchas veces en los documentos que se creen se considera como un buen estilo de diseño, el incluir o especificar el lenguaje natural que se utiliza para crear el documento, para realizar esta acción es conveniente añadir a la etiqueta de inicio de pagina <html>, el atributo que permite especificar el lenguaje, quedando la misma de la siguiente forma.

<html lang="es">

    Al igual que es conveniente especificar el lenguaje también es conveniente, especificar el juego de codificación de caracteres que se ha de utilizar para realizar la visualización de la página, de esta forma se hace coincidir los símbolos que componen el lenguaje natural utilizado para la creación del documento, con los símbolos que se visualizan en el navegador. Para realizar esta acción se ha de utilizar la siguiente etiqueta, especificando la misma dentro de la cabecera del documento.

<meta charset="utf-8">

El ejemplo especificado aquí, indica que se utilice la codificación utf-8, entre las codificaciones más utilizadas, encontramos la utf-8 y la ISO-8859-1, utilizada esta ultima para la codificación de caracteres de lengua latina. El siguiente ejemplo muestra una estructura de página con lenguaje y codificación de caracteres especificada.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Primer Ejercicio HTML 5</title>
</head>
<body>
<p>Esperamos que <strong>aprendoencasa.com</strong> sea un lugar donde estéis cómodos</p>
</body>
</html>