La cantidad de elementos y atributos en HTML es enorme. 

Vamos a hacer una selección de los que serían los elementos más importantes. Con esto tenemos más que suficiente para crear incluso páginas web avanzadas y ya tienen que ser necesidades muy específicas para que realmente se necesite más.

Como referencia con todas las etiquetas HTML, accedemos a esta página web en la que encontraremos un listado completo, junto con los detalles de cada una.

Y si queremos aprender HTML a fondo, recomendamos este libro online gratuito:

Introducción a XHTML

Etiquetas básicas de estructura y cabecera

Empezamos por los elementos que conforman la estructura básica que vimos antes (<html>, <head> y <body>) y elementos que nos resultarán ahora un tanto “abstractos” con información adicional sobre la página (<meta>, <title> y <link>) y que irán dentro de la etiqueta <head>.

Salvo de <title> (que determina el nombre de la página que veremos en la pestaña del navegador), de estos últimos, de momento no nos preocupamos. Son un poco más avanzados e iremos hablando más de ellos en los momentos adecuados.

  • Elemento raíz: <html>
  • Información del documento: <head>
  • Cuerpo del documento: <body>
  • Meta-información: <meta>
  • Título de página: <title>
  • Enlace a recursos (hojas de estilo, etc.): <link>

Etiquetas para títulos, párrafos, enlaces, imágenes y formatos básicos de texto

Éstas son las etiquetas para crear la estructura básica de una página HTML:

Etiquetas para dar más estructura: divisiones, tablas y listas

Para darle una estructura un poco más sofisticada e interesante a una página, las listas y tablas son elementos totalmente esenciales.

Por otra parte, las etiquetas <div> permiten crear divisiones o zonas en una página. Una división básica de una página podría ser, por ejemplo, una cabecera, el cuerpo del contenido, una barra lateral y un pie. Esto es, por ejemplo, el formato básico de un blog típico.

Aunque para sacarles realmente partido necesitamos aprender también CSS ya que es con las reglas CSS cómo se “maqueta” esta parte, es decir, se definen cosas como la alineación de una división, sus dimensiones, etc.

En HTML dispones de las siguientes etiquetas para crearlas:

Interaccionar con el usuario con formularios

HTML también está preparado para crear interacciones sencillas con los usuarios mediante formularios. Eso sí, si usamos formularios en el lado del servidor necesitas algún tipo de programa que reciba esa información y la sepa procesar para guardar, por ejemplo, la información que recojas en una base de datos.

Esto es, por cierto, otra ventaja de usar aplicaciones como WordPress para nuestra web, aquí estas cosas ya las tenemos hechas y podemos crear formularios para recoger sus datos en una base de datos sin saber nada de programación.

Ejemplos típicos y muy simples serían un formulario de contacto a través del cual se genera un email que recibes en tu cuenta de email o un formulario de pedidos para que le gente nos envíe sus pedidos.

Para los formularios se usan las etiquetas <form> e <input>, pero son un poco más complicadas de usar y, por tanto, cómo usarlas exactamente se sale un poco del marco de esta página. Se puede encontrar información en  este enlace.

Los documentos HTML siguen una estricta organización. Cada parte del documento está diferenciada, declarada y englobada con etiquetas específicas.

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 raíz 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.

<head>

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 cómo 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>

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>

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=»archivoestilos.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 archivoestilos.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).