Estructura básica
2. Estructura básica de un documento HTML2.1 DOCTYPE2.2 Elementos de la cabecera

<< Estructura de una etiqueta Ejemplo página web >>

2. Estructura básica de un documento HTML

En general, cualquier página web en HTML debe tener la extensión .html. El navegador será el encargado de mostrar el contenido de una página web.

Un documento HTML tiene una estructura básica similar a la siguiente:

<!DOCTYPE ...>
<html ...>
   <head>
        ...
   </head>
   <body>
       ...
   </body>
</html>

En esta estructura nos encontramos:

  • <!DOCTYPE html>: Nos indica el tipo de documento que es, es obligatorio. 
  • <html>… </html>: Este elemento encierra todo el contenido de la página entera, se le conoce como el elemento raíz. Es recomendable incluir dentro de la etiqueta html el atributo lang seguido del idioma de la página. En el siguiente ejemplo veremos cómo indicar que el documento está en español (lang="es"), pero este atributo no es obligatorio, hoy en día desde la versión HTML5 este atributo se puede prescindir y el documento validaría y funcionaría correctamente.
<html lang="es">
   ….
</html>
  • <head>…</head>: Actúa como un contenedor de todo aquello que queremos incluir en la web pero que no es contenido visible (metadatos). Dentro de este elemento se incluyen las keywords, las hojas de estilo CSS, la declaración de caracteres, etc.
  • <body>...</body>: Encierra todo el contenido que deseas mostrar, ya sea texto, imágenes, etc.

2.1 DOCTYPE

Como hemos visto en el punto anterior es lo primero que aparece en un documento html y sirve para indicar qué versión del lenguaje se está utilizando.

<!DOCTYPE html>

2.2 Elementos de la cabecera

La siguiente parte del documento es la sección <head>, donde deberemos incluir:

  • <title>: El título de la página web
  • <meta>: Las metaetiquetas que describen el documento, la codificación y la información a la que pueden acceder los motores de búsqueda (keywords)
  • Las referencias a archivos externos que necesita la web como hojas de estilos(<link>) o scripts(<script>), estos elementos los veremos en las siguientes unidades.

2.2.1 Las metaetiquetas, <meta>

Las metaetiquetas se utilizan para indicar el juego de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración del área visible e una página (viewport), que será diferente dependiendo del dispositivo.

Las metaetiquetas utilizan dos atributos: name para indicar el nombre de la metaetiqueta y content, para indicar su contenido, a excepción de la metaetiqueta de la codificación de caracteres que sólo utiliza el atributo charset.

<meta charset="UTF-8"> 
<meta name="description" content="Mi primera página web en html5">
<meta name="keywords" content="web html5">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

charset

Define la codificación de caracteres que se utiliza en el documento. Este elemento se ha simplificado en HTML5, y se reduce a:

<meta charset="utf-8">

La codificación predeterminada en HTML5 es UTF-8, que cubre casi todos los caracteres, signos de puntuación y símbolos del mundo.

Es importante que la declaración de caracteres se encuentre dentro de los 512 primeros caracteres del documento. También es importante que esté antes de cualquier elemento de contenido (como el <title>). Una buena práctica sería poner la codificación como la primera etiqueta dentro del bloque <head>.

description

Se utiliza para describir brevemente el contenido de una página web. La descripción aparece debajo del título y URL de la página en los resultados del motor de búsqueda. Para permanecer visible dentro de Google debe tener entre 140-160 caracteres. Se recomienda que para tener un buen posicionamiento tenga una descripción de forma significativa y que incluya alguna de sus palabras claves.

<meta name="description" content="Mi primera página web en html5">

keywords

Define una serie de palabras relacionadas con el contenido de la página web que pueden resultar útiles para los motores de búsqueda, aunque su uso cada vez tiene menos influencia en el posicionamiento web, por ejemplo, Google lo ignora.

<meta name="keywords" content="web html5">

author

Indica el nombre del autor de la página web.

<meta name="author" content="Rosa Medina">

viewport

Configura el área visible de la página web para que se visualice bien en todos los dispositivos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Con el anterior código estamos indicándole al navegador:

  • width=device-width: Ajusta el ancho de la página al ancho de la pantalla del dispositivo.
  • initial-scale=1.0: Establece el nivel de zoom inicial cuando el navegador carga la web por primera vez. Al poner 1 no se aplica zoom, si por ejemplo no queremos que se pueda hacer zoom se pondría: maximun-scale=1.0

2.2.2. Elemento <title>

El elemento <title> es el título de la página web, se escribe entre las etiquetas <title> y </title> y se muestra en la barra de título del navegador.

<title>Mi primera página web</title>

2.2.3. Elemento <script>

Para utilizar JavaScript en nuestra página, debemos indicarle a nuestro HTML que vamos a cargar un script, para ello, utilizaremos la etiqueta <script>. Esta etiqueta admite dos atributos:

  • src: Dirección URL del script externo a cargar
  • type: Este atributo puede ser:
  •              (sin atributo type): Es el script clásico, se carga en modo tradicional
  •              module: Carga JavaScript como módulo (permite import y export)

De momento, en el caso de tener que usar algún script nos centraremos en el script clásico.

<< Estructura de una etiqueta Ejemplo página web >>