Ejemplo de estructura global con HTML5
|
Los documentos HTML siguen una estricta organización. Cada parte del documento está diferenciada, declarada y englobada con etiquetas específicas. En este tutorial vamos a ver como construir la estructura global de un documento HTML con los nuevos elementos incorporados en HTML5. |
Doctype
En primer lugar, tenemos que indicar el tipo de documento que estamos creando. En HTML5 esto es muy sencillo:
<!DOCTYPE html>
Esta línea deberá ser la primera línea del documento, sin espacios ni líneas previas. Esto es una manera de activar el modo estándar y forzar a los navegadores a interpretar el HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea.
<html>
Después de declarar el tipo de documento, se construye la estructura del árbol con HTML. El elemento raiz del árbol es el elemento <html>. Este elemento engloba todo el código HTML.
<!DOCTYPE html>
<html lang="es">
</html>
El atributo lang en la etiqueta de inicio <html> es el único atributo que debemos especificar en HTML5. Este atributo define el lenguaje del contenido del documento que estamos creando- en este caso, es para español.
HTML5 es muy flexible con respecto a la estructura y los elementos utilizados en su desarrollo. El elemento <html> puede ser incluido sin atributos o no ser incluido.
Sin embargo, por compatiblidad y otras razones, se recomienda seguir unas reglas básicas. En este tutorial vamos a aprender como construir un documento HTML siguiendo un manual de buenas prácticas.
<head>
Sigamos con la construcción de nuestra plantilla. El código HTML incluido en las etiquetas <html> tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de HTML, la primera sección es el "head" y la segunda el "body". El siguiente paso, por tanto, es crear dos secciones en el código, utilizando esos dos elementos; <head> y <body>.
El elemento <head> va en primer lugar, y como el resto de los elementos estructurales, tiene un tag de apertura y otro de cierre.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
El "tag" no ha cambiado con respecto a otras versiones y su función es la misma. Dentro de los "tags" <head>, definiremos el título de nuestra página, declararemos la codificación de caracteres, incluiremos cualquier información general que queramos sobre el documento, e incorporaremos archivos externos con los estilos, scripts o incluso imágenes necesarias para mostrar la página.
A excepción del título y algunos iconos, el resto de la información incluida en el documento dentro de las etiquetas <head> no será visible.
<body>
La siguiente sección que forma parte de la organización principal del documento HTML es el "body". Este "cuerpo" es la parte visible del documento y viene especificado con la etiqueta <body>.
Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
<meta>
A continuación vamos a desarrollar la cabecera del documento. Existen algunas modificaciones e innovaciones dentro de esta sección, y una de ellas es la etiqueta que define la codificación de los caracteres del documento. Es la etiqueta meta y especifica como se debe presentar el texto dentro de la pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
La modificación para este elemento de HTML5, es como en muchos casos, una simplificación. La etiqueta meta nueva para la codificación de caracteres es más corta y más simple. Igualmente, se puede cambiar utf-8 por la codificación que se prefiera, y se pueden añadir otras etiquetas meta como "description" o "keywords", tal y como se ve en el ejemplo que tenemos a continuación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
</head>
<body>
</body>
</html>
Nota: Como vemos, la etiqueta <meta> especifica el tipo y el atributo content declara su valor, pero ninguno de estos valores serán mostrados en la pantalla.
En HTML5, no es necesario poner una barra de cierre, pero se recomienda por razones de compatibilidad.
<title>
La etiqueta
<title>, como siempre, especifica el título del documento, y no hay nada nuevo en HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
</head>
<body>
</body>
</html>
Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la ventana.
<link>
Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se utiliza para incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de <link>, es el de insertar un archivo CSS externo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
</body>
</html>
En HTML5, ya no hay que especificar el tipo de hoja de estilo que estamos insertando, por lo que el atributo type ha sido eliminado.
Solamente necesitamos dos atributos para incluir nuestro archivo de estilos: rel y href. El atributo rel se refiere a la relación entre el documento y el archivo que estamos incluyendo. En este caso tiene el valor= "stylesheet", lo que le indica al navegador que el archivo edu4javastyles.css es un archivo CSS con estilos necesarios para mostrar la página.
Nota: Una hoja de estilos es un conjunto de reglas de formato que nos va a ayudar a cambiar la presentación de nuestro documento- por ejemplo, el tamaño o el color del texto.
Sin estas reglas, el texto y otros elemento se mostrarán en la pantalla utilizando los estilos estándares suministrados por los navegadores (tamaño y colores por defecto).
Nuestro código se vería así;
| << Tutorial HTML5. Introducción | Estructura del cuerpo- HTML5 >> |