El HTML es un lenguaje de marcas (o etiquetas) que se utiliza para crear páginas web. Sus siglas provienen del inglés Hypertext Markup Language, que significa «lenguaje de marcado de hipertexto». ¿Qué significa realmente?
El término «hipertexto» hace alusión al hecho de que las páginas se pueden enlazar unas con otras. La expresión de «lenguaje de marcas» se refiere a los elementos que se utilizan para crear la estructura de contenidos de una página web.
¿Qué es un elemento?
En el mundo de los lenguajes de marcas como el HTML y el XML, un elemento es una porción de código que puede contener etiquetas de apertura y de cierre, atributos, texto, imágenes, etc. Lo más habitual es encontrar una etiqueta de apertura con atributos, contenido de texto y una etiqueta de cierre. Por ejemplo:
<p class="selector">Texto encerrado</p>
El ejemplo anterior se trata de un elemento que define un párrafo de texto y tiene un atributo. Descomponiéndolo en partes, tenemos que <p> es la etiqueta de apertura y </p> es la etiqueta de cierre. Entre estas dos etiquetas hay un texto que aparecerá en pantalla. El código class="selector" es el atributo, que en este caso sirve para estilizar el párrafo y se utiliza en hojas de estilo CSS.
Existen elementos que no tienen etiqueta de cierre. Este es el caso de los elementos de imagen. Este es un ejemplo de imagen en HTML:
<img src="/fotos/pez-azul.png" width="300" height="150">
Descomponiendo este elemento, tenemos que existe una única etiqueta HTML llamada <img> que contiene varios atributos. En este ejemplo hay tres atributos: el que define la ruta de la imagen en el directorio con una dirección relativa y otros dos que definen las dimensiones de la imagen.
Por tanto, debe quedar claro que los elementos y las etiquetas no son lo mismo. Resumiendo: las etiquetas son porciones de código que dan comienzo o terminan un elemento, mientras que los elementos son las partes del documento que se mostrarán en el navegador web.
¿Qué es una etiqueta?
Como ya se ha dicho, una etiqueta es una porción de código que sirve para iniciar o finalizar un elemento. Las etiquetas de apertura empiezan con el símbolo «menor que» (<) y terminan con el símbolo «mayor que» (>), quedando así: <etiqueta>. Las etiquetas de cierre incluyen además una barra después del símbolo «menor que», quedando así </etiqueta>.
¿Qué es un atributo?
Un atributo es un parámetro o valor adicional que permite configurar elementos. De esta forma se puede optimizar o ajustar un elemento para adaptarlo a las necesidades de cada caso. Cada elemento puede tener atributos diferentes. Por ejemplo, un elemento de imagen tiene atributos para definir sus dimensiones.
El formato del atributo está compuesto por dos partes separadas por el símbolo «igual». La primera parte indica el atributo que se pretende definir, y la segunda parte contiene el valor, que en ocasiones puede ir entre comillas.
Ejemplo de atributo:
<etiqueta nombre="valor">Contenido</etiqueta>
Estructura básica del HTML
Antes que nada es importante conocer la estructura básica que permite crear una página HTML. Esta estructura consiste en una serie de etiquetas que definen el tipo de documento HTML, el encabezado y el cuerpo. Es la siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Título del documento</title>
</head>
<body>
<h1>Titular del artículo</h1>
<p>Un párrafo de pocas palabras.</p>
<p>Otro pequeño párrafo en HTML.</p>
</body>
</html>
Tal y como se puede observar en el anterior fragmento de código, muchos de los elementos tienen etiqueta de apertura y etiqueta de cierre; de esta manera se incluye el contenido dentro de ellas. Además, en este ejemplo las hemos sangrado de forma jerárquica para facilitar su lectura, aunque no es obligatorio hacerlo.
Los elementos se pueden anidar unos dentro de otros. De hecho, es obligatorio que dentro del elemento <html> exista el elemento <body>, y es dentro de este último elemento donde se empieza a insertar el contenido de la página web. Comencemos por ver y comprender la declaración del DOCTYPE.
DOCTYPE
La declaración <!DOCTYPE> se utiliza para definir el tipo de documento (HTML o XML) y la versión utilizada. Así, el navegador web puede entender la versión de HTML que se está utilizando. Cabe destacar que una declaración no es una etiqueta. A veces la identificamos con las siglas «DTD».
El DOCTYPE debe ser siempre la primera declaración que aparece en el documento. Si no se establece correctamente, el contenido de la página podría visualizarse de forma inapropiada. Por lo tanto, añadir el DOCTYPE en un documento garantiza que el navegador web utilizará las especificaciones relevantes.
Esta es la sintaxis completa del DOCTYPE:
<!DOCTYPE [Elemento raiz] [Disponibilidad] "[+/-]//[Organizacion]//[Tipo] [Nombre]//[Idioma]" "[URL]">
- DOCTYPE: Se indica que la declaración es DOCTYPE.
- Elemento raíz: Se indica el elemento de nivel superior o raíz, también conocido como root-element. Puede ser html, xml, math…
- Disponibilidad: Se indica la disponibilidad del identificador. Si se trata de un identificador público se utiliza PUBLIC. Otros valores pueden ser SYSTEM o URL, cuando se usa un identificador de sistema o una URL, respectivamente.
- +/-: Dependiendo de la organización que ha creado el DTD se usa «+» o «-». Si es la W3C se usa el símbolo «-».
- Organización: Se indica la organización que ha creado el DTD.
- Tipo: Se indica el tipo de documento.
- Nombre: Se indica el nombre del DTD, que expresa la versión.
- Idioma: Se indica el idioma del DTD, normalmente es EN.
- URL: La URL del DTD en el que se detalla la plantilla de la estructura del documento. Se puede descargar y editar.
Ejemplos de DOCTYPE
HTML5:
<!DOCTYPE html>
HTML 4.01 (estricto):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 (transitorio):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 (frameset):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 (estricto):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
MathML 1.0:
<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 1.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">
SVG 1.1 (full):
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
El elemento <html>
El elemento <html> constituye la raíz de un documento HTML, y por tanto, es el que va justo después del DOCTYPE. El resto de elementos descienden del elemento <html>. Además, sólo puede haber un <html> en el documento. Este elemento contiene los elementos <head> y <body>.
El elemento <head>
El elemento <head> es el que contiene información general del sitio web y de la página en cuestión. Por ejemplo: contiene el título de la página, la inclusión de hojas de estilo CSS y de código JavaScript, la carga de tipografías alternativas, la definición de la codificación o la inclusión de iconos (faviconos), entre otros. Al igual que ocurre con <html>, sólo puede haber un <head> en el documento.
Lista de elementos que pueden ser usados dentro de <head>:
<title><meta><link><base><style><script><noscript>
El elemento <title>
Para indicar el título del documento se utiliza el elemento <title>. Es obligatorio que todos los documentos tengan un título, y debe ir dentro del elemento <head>, tal y como ya se comentó en el apartado anterior. El contenido de este elemento será mostrado en la barra de título de la ventana o pestaña del navegador web.
Este elemento puede contener texto y entidades de caracteres, pero no puede contener código. Se recomienda usar caracteres comunes para que sean visibles en cualquier navegador y en cualquier dispositivo.
El elemento <body>
El elemento <body> es el que contiene todos los elementos visibles de un documento HTML. Por lo tanto, es aquí donde introduciremos los elementos de contenido de forma anidada, tales como las cabeceras o titulares (headings), párrafos, imágenes, vídeos, enlaces y un largo etcétera. Lo mismo que sucede con <html> y <head>, sólo puede haber un <body> en el documento.
