Hasta ahora hemos visto algunas etiquetas 'sueltas' que nuestro navegador puede representar y que nos permiten hacernos una idea de cómo es y para que sirve el Html. Pero tenemos que pensar que el objetivo final es que la información esté en Internet accesible potencialmente por todo el mundo, por lo que tendría que poder ser interpretable por cualquier agente (navegador o buscador).
Estructura mínima
Un documento html 'bien formado' debería tener como mínimo una estructura como la siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" /><head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>MIS COSAS</title> <meta name="description" content="Cosas variadas." />
<meta name="keywords" content="colores,textos,adivinanzas" /> </head> <body> <article> Contenido del documento </article> </body> </html>
La etiqueta <!DOCTYPE> indica que el documento se ajusta a las especificaciones de HTML5. No tiene etiqueta de cierre.
Las etiquetas <html> y </html> delimitan todo el documento, que a su vez se divide en dos partes, <head> (cabeza) y <body> (cuerpo), con sus correspondientes etiquetas de cierre. La palabra "lang=es" indica que el contenido del documento está en castellano.
Cabeza del documento
En <head> va una serie de información que no es parte del documento en sí, aunque puede influir en su representación y en el tratamiento que hagan con él los buscadores. Hay algunas etiquetas específicas para esta sección, entre las que destacamos las siguientes por su importancia:
La etiqueta <title> contiene el título del documento. En los navegadores este título no se muestra en el cuerpo del documento, sino en la barra superior de la ventana (y en la pestaña en los más modernos). Es importante también para los buscadores.
La etiqueta <meta> se utiliza para poner información sobre
propiedades del documento, llamadas 'metadatos'. Con uno de sus atributos se
especifica el 'nombre del dato' y con el otro su 'valor'. La linea "viewport" es un indicador para dispositivos móviles.
No tiene etiqueta de cierre.
En la 'estructura mínima', con la etiqueta <meta> se está informando de cual es el tipo de documento y la codificación de caracteres utilizada en éste.
Otro ejemplo de <meta>, con el que se informa del autor del documento:
<meta name="author" content="José Pérez">
Cuerpo del documento
En <body> es donde va el documento propiamente dicho. Dentro del "cuerpo" se suele poner la etiqueta "article" util en dispositivos para ciegos.
Al cuerpo del documento también se le puede dar una estructura usando las etiquetas siguientes.
CABECERAS
Las cabeceras nos permiten dividir un documento en secciones mediante una jerarquía de títulos. Se introducen por medio de la etiqueta <hn> (de header), donde n es un número de 1 a 6, de mayor a menor importancia relativa. Veamos un ejemplo:
<h1>Cabecera de nivel 1</h1> <h2>Cabecera de nivel 2</h2> <h3>Cabecera de nivel 3</h3> <h4>Cabecera de nivel 4</h4> <h5>Cabecera de nivel 5</h5> <h6>Cabecera de nivel 6</h6>
Que en el navegador se representan de la siguiente manera:
DIVISIONES O BLOQUES
Con la etiqueta <div> podemos agrupar bloques del documento con características comunes. Las etiquetas <div> pueden anidarse.
Con la etiqueta <p> podemos formar párrafos. No pueden anidarse etiquetas <p>.
En cuanto a su representación por un navegador, ambas provocan un salto de línea, con la diferencia de que <p> introduce además una línea en blanco.
Un atributo común de estas etiquetas es align, con el que podemos alinear el texto contenido en ellas a la izquierda (left, por defecto), a la derecha (right), al centro (center) o a derecha e izquierda (justify). Podemos verlo con un ejemplo:
<div align="center"> <p>Párrafo centrado</p> <p align="left">Párrafo alineado a la izquierda</p> <p align="justify">Párrafo alineado a izquierda y derecha (si es más largo que una línea, pues si no fuera así quedaría alineado a la izquierda)</p> <div align="right"> Texto alineado a la derecha </div> texto centrado </div>
Visualización en el navegador:
Comentarios
En cualquier parte del documento html se pueden poner comentarios, que serán ignorados por los agentes que accedan a él y sólo se verán al editar o consultar el código fuente del mismo.
Los comentarios se delimitan con dos marcadores especiales, <!-- al inicio y --> al final:
<!-- Esto es un ejemplo de comentario en html -->
<!-- Esto es otro ejemplo de comentario en html -->
Si quiere ver en detalle como es una estructura HTML5 pulse en esta línea.