Capítulo 2 HTML
Capítulo 2 HTML
Características básicas
2.1. Lenguajes de etiquetas
Uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo almacenar la
información en los archivos digitales. Como los primeros archivos sólo contenían texto sin formato, la solución
utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en números.
De esta forma, para almacenar un contenido de texto en un archivo electrónico, se utiliza una tabla de
conversión que transforma cada carácter en un número. Una vez almacenada la secuencia de números, el
contenido del archivo se puede recuperar realizando el proceso inverso.
Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de almacenar los contenidos de
texto con formato. En otras palabras, ¿cómo se almacena un texto en negrita? ¿y un texto de color rojo? ¿y
otro texto azul, en negrita y subrayado?
Utilizar una tabla de conversión similar a las que se utilizan para textos sin formato no es posible, ya que
existen infinitos posibles estilos para aplicar al texto. Una solución técnicamente viable consiste en almacenar la
información sobre el formato del texto en una zona especial reservada dentro del propio archivo. En esta zona
se podría indicar dónde comienza y dónde termina cada formato.
No obstante, la solución que realmente se emplea para guardar la información con formato es mucho más
sencilla: el archivo electrónico almacena tanto los contenidos como la información sobre el formato de esos
contenidos. Si por ejemplo se quiere dividir el texto en párrafos y se desea dar especial importancia a algunas
palabras, se podría indicar de la siguiente manera:
<parrafo>
Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial.
</parrafo>
1
Aprendiendo el codigo HTML como si estuviese en primero
El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica
mediante la palabra </parrafo>. De la misma manera, para asignar más importancia a ciertas
palabras del texto, se encierran entre <importante> y </importante>.
El proceso de indicar las diferentes partes que componen la información se denomina marcar (markup en
inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan
etiquetas.
Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente
manera:
Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y
terminado con el carácter >
Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios
en blanco) y terminado con el carácter >
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales
están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML
significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. Además de
HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las
personas y de los sistemas electrónicos. La principal desventaja es que pueden aumentar mucho el tamaño del
documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada
head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los
2
Aprendiendo el codigo HTML como si estuviese en primero
navegadores muestran como título de sus ventanas).
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de texto sin
formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit,
Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open Office. Si utilizas
sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi, pero no utilices
KOffice ni Open Office.
Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se
muestre con el siguiente aspecto:
3
Aprendiendo el codigo HTML como si estuviese en primero
Figura 2.3. Aspecto que muestra el primer documento HTML en cualquier navegador
Si ya estás viendo tu primera página HTML en el navegador, prueba a pulsar sobre el menú Ver > Código fuente y
podrás ver el código HTML de la página que está cargada en el navegador. De hecho, puedes ver el código
HTML de cualquier página de Internet mediante la opción Ver > Código fuente. Prueba a ver el código HTML de
tu página preferida y verás cuantas etiquetas puede llegar a tener una página compleja.
Volviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un
documento HTML (<html>, <head>, <body>):
<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede
colocarse antes o después de la etiqueta <html> (con una sola excepción que se verá más adelante).
En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo
que se coloque fuera de la etiqueta <html> se ignora.
<head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el
propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos
indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se
utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior
izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer
ejemplo en cualquier navegador y observa dónde se muestra el título de la página).
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se
muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento
contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.
4
Aprendiendo el codigo HTML como si estuviese en primero
Figura 2.4. Esquema de las etiquetas principales que contiene un documento HTML
Ejercicio 1
Figura 2.5. Página HTML sencilla que resalta algunas partes del texto
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que practicamente se entiende sin estudiar el significado de sus etiquetas
principales.</p>
</html>
5
Aprendiendo el codigo HTML como si estuviese en primero
2.3. Etiquetas y atributos
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que
componen una página:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption,
center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1,
h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map,
menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select,
small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar: applet, basefont,
center, dir, font, isindex, menu, s, strike, u.
A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas complejas.
Algunos elementos como las imágenes y los enlaces requieren cierta información adicional para estar
completamente definidos.
La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando sólo la etiqueta <a> no
es posible establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiqueta por cada
enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional
llamada atributos.
De esta forma, se utiliza la misma etiqueta <a> para todos los enlaces de la página y se utilizan los atributos
para indicar la dirección a la que apunta cada enlace.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fáciles de indicar:
<a>Soy un enlace incompleto, porque no tengo dirección de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la página de Google</a>.
</p>
</body>
</html>
6
Aprendiendo el codigo HTML como si estuviese en primero
Figura 2.6. Los atributos permiten personalizar las etiquetas HTML
El primer enlace del ejemplo anterior no está completamente definido, ya que no apunta a ninguna dirección.
El segundo enlace, utiliza la misma etiqueta <a>, pero añade información adicional mediante un atributo llamado
href. Los atributos se incluyen dentro de la etiqueta de apertura. Por ahora no es importante comprender la
etiqueta <a> ni el atributo href, ya que se explicarán con todo detalle más adelante.
No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de
atributos disponibles. Además, cada atributo también indica el tipo de valor que se le puede asignar. Si el valor
de un atributo no es válido, el navegador ignora ese atributo.
Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los atributos son comunes a
muchas o casi todas las etiquetas. De esta forma, es habitual explicar por separado los atributos comunes de las
etiquetas para no tener que volver a hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes
se dividen en cuatro grupos según su funcionalidad:
Atributo Descripción
class = Establece la clase CSS que se aplica a los estilos del elemento
La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo, estos
7
Aprendiendo el codigo HTML como si estuviese en primero
atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript.
Respecto al valor de los atributos id y class, sólo pueden contener guiones medios (-), guiones bajos (_), letras
y/o números, pero no pueden empezar por números. Además, los navegadores distinguen mayúsculas de
minúsculas y no se recomienda utilizar letras como ñ y acentos, ya que no es seguro que funcionen
correctamente en todas las versiones de todos los navegadores.
2) Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios
idiomas o aquellas que quieren indicar de forma explítica el idioma de sus contenidos:
Atributo Descripción
lang = "codigo de idioma" Indica el idioma del elemento mediante un código predefinido
xml:lang = "codigo de
idioma"
Indica el idioma del elemento mediante un código predefinido
Indica la dirección del texto (útil para los idiomas que escriben de derecha a
dir
izquierda)
En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio incluirlo
siempre que se incluye el atributo lang.
Como la palabra internacionalización es muy larga, se suele sustituir por la abreviatura i18n (el
número 18 se refiere al número de letras que existen entre la letra i y la letra n de la palabra
internacionalización).
3) Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript.
Atributo Descripción
onclick, ondblclick, onmousedown, onmouseup, onmouseover, Permiten controlar los eventos producidos
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup sobre cada elemento de la página
Cada vez que el usuario pulsa una tecla, mueve su ratón o pulsa cualquier botón del ratón, se produce un
evento dentro del navegador. Utilizando JavaScript y los atributos anteriores, es posible responder de forma
adecuada a cada evento.
Cuando el usuario selecciona un elemento de la interfaz de una aplicación, se dice que "el elemento tiene el
foco del programa". Si por ejemplo un usuario pincha con su ratón sobre un cuadro de texto y comienza a
escribir, ese cuadro de texto tiene el foco del programa, llamado "focus" en inglés. Si el usuario selecciona
8
Aprendiendo el codigo HTML como si estuviese en primero
después otro elemento, el elemento original pierde el foco y el nuevo elemento es el que tiene el foco del
programa.
Los elementos de las páginas web también pueden obtener el foco de la aplicación (en este caso, el foco del
navegador) y HTML define algunos atributos específicos para controlar cómo se seleccionan los elementos.
Atributo Descripción
accesskey =
Establece una tecla de acceso rápido a un elemento HTML
"letra"
tabindex = Establece la posición del elemento en el orden de tabulación de la página. Su valor debe
"numero" estar comprendido entre 0 y 32.767
Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el
onfocus, onblur
foco
Cuando se pulsa repetidamente la tecla del tabulador sobre una página web, el navegador selecciona de forma
alternativa todos los elementos de la página que se pueden seleccionar (principalmente los enlaces y los
elementos de formulario). El atributo tabindex permite alterar el orden en el que se seleccionan los elementos,
por lo que es muy útil cuando se quiere controlar de forma precisa cómo se seleccionan los campos de un
formulario complejo.
Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rápida a cualquier
elemento. Aunque la tecla de acceso rápido se establece mediante HTML, la combinación de teclas necesarias
para activar ese acceso rápido depende del navegador. En el navegador Internet Explorer se pulsa la tecla ALT
+ la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el navegador Opera se
pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsa Ctrl + la tecla definida.
En el resto de la documentación, se emplearán las palabras "básicos", "i18n", "eventos" y "foco" respectivamente
para referirse a cada uno de los grupos de atributos comunes definidos anteriormente.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML
es mucho más que una etiqueta, ya que está formado por:
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún
9
Aprendiendo el codigo HTML como si estuviese en primero
texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos
de texto:
La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una etiqueta de
apertura (<p>), contiene cero o más atributos (class="normal"), dispone de un contenido de texto (Esto es un párrafo)
y finaliza con una etiqueta de cierre (</p>).
Por tanto, si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas
(dos etiquetas <p> de apertura y dos etiquetas </p> de cierre). De todas formas, aunque estrictamente no son lo
mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".
Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea (inline
elements en inglés) y elementos de bloque (block elements en inglés).
La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponible en
la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible
hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Por su parte, los elementos
en línea sólo ocupan el espacio necesario para mostrar sus contenidos.
<html>
<head>
<title>Ejemplo de elementos en línea y elementos de bloque</title>
</head>
<body>
<p>Los párrafos son elementos de bloque.</p>
<a href="http://www.google.com">Los enlaces son elementos en línea</a>
<p>Dentro de un párrafo, <a href="http://www.google.com">los enlaces</a>
siguen siendo elementos en línea.</p>
</body>
10
Aprendiendo el codigo HTML como si estuviese en primero
</html>
La siguiente imagen muestra cómo visualizan los navegadores el código HTML anterior (mediante CSS se han
añadido bordes que muestran el espacio ocupado por cada elemento):
El primer párrafo contiene un texto corto que sólo ocupa la mitad de la anchura de la ventana del navegador.
No obstante, el espacio reservado por el navegador para el primer párrafo llega hasta el final de esa línea, por
lo que resulta evidente que los elementos <p> son elementos de bloque.
Por otra parte, el primer enlace del ejemplo anterior también tiene un texto corto que ocupa solamente la
mitad de la anchura de la ventana del navegador. En este caso, el navegador sólo reserva para el enlace el sitio
necesario para mostrar sus contenidos. Si se añade otro enlace en esa misma línea, se mostraría a
continuación del primer enlace. Por tanto, los elementos <a> son elementos en línea.
Por último, el segundo párrafo sigue ocupando todo el espacio disponible hasta el final de cada línea (por ser
un elemento de bloque) y el enlace que se encuentra dentro del párrafo sólo ocupa el sitio necesario para
mostrar sus contenidos (por ser un elemento en línea).
La mayoría de elementos de bloque pueden contener en su interior elementos en línea y otros elementos de
bloque. Los elementos en línea sólo pueden contener texto u otros elementos en línea. En otras palabras, un
elemento de bloque no puede aparecer dentro de un elemento en línea. En cambio, un elemento en línea
puede aparecer dentro de un elemento de bloque y dentro de otro elemento en línea.
Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite,
code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup,
textarea, tt, u, var. Los elementos de bloque definidos por
HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex,
menu, noframes, nos-cript, ol, p, pre, table, ul.
Los siguientes elementos también se considera que son de bloque: dd, dt, frame-set, li, tbody, td,
tfoot, th, thead, tr.
11
Aprendiendo el codigo HTML como si estuviese en primero
Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del,
iframe, ins, map, object, script.
La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final son páginas con un código
HTML desordenado, difícil de mantener y muy poco profesional. Afortunadamente, XHTML soluciona estos
problemas añadiendo ciertas normas en la forma de escribir las etiquetas y atributos.
A continuación se muestran las cinco restricciones básicas que introduce XHTML respecto a HTML en la
sintaxis de sus etiquetas:
12
Aprendiendo el codigo HTML como si estuviese en primero
4) Los atributos no se pueden comprimir:
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
Como el estándar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la etiqueta <br> se
debería cerrar de forma seguida: <br></br>. Para que el código resulte más cómodo de escribir, XHTML permite
en estos casos escribir de forma abreviada una etiqueta que se abre y se cierra de forma consecutiva.
En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para
indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto. En la forma compacta es
habitual equivocarse con la posición del carácter /.
Además de estas cinco restricciones básicas, XHTML incluye otros cambios más avanzados respecto a HTML:
1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que se encuentran
antes y después del valor. Además, se eliminan todos los espacios en blanco sobrantes dentro del
valor de un atributo. En otras palabras, si en el interior de un atributo se incluyen varios espacios en
blanco seguidos, se eliminan todos salvo un único espacio en blanco utilizado para separar las
diferentes palabras.
2. Como se explicará más adelante al hablar de la etiqueta <script>, el código JavaScript debe encerrarse
entre unas etiquetas especiales (<![CDATA[ y ]]>) para evitar que el navegador interprete de forma
errónea caracteres como & y <.
3. Las páginas XHTML deben prescindir del atributo name para identificar de forma única a los
elementos. En su lugar, siempre debe utilizarse el atributo id. De hecho, en la versión 1.0 del estándar
XHTML, el atributo name se ha declarado obsoleto para las etiquetas a, applet, form, frame, iframe, img y
13
Aprendiendo el codigo HTML como si estuviese en primero
map.
14
Aprendiendo el codigo HTML como si estuviese en primero