Etiquetas y atributos HTML

Este tutorial ha sido planeado para presentar los conceptos básicos del código HTML, a usuarios que nunca han escrito un sitio web a mano. Escribir documentos HTML es en escencia escribir etiquetas, atributos y contenido. Es por ello que nos enfocaremos en explicar como un elemento, sus etiquetas, atributos y contenido deben ser utilizados.

A lo largo de este documento puedes encontrar muchos elementos, atributos y código JavaScript, los cuales no son explicados apropiadamente. Esto se debe a que el objetivo de este tutorial es el de enfocarse en la sintaxis general y no en las características de cada elemento. Para los detalles de los elementos de HTML5 consulta la lists de elementos de HTML.

Elementos y etiquetas

HTML es un lenguaje de marcas compuesto por un conjunto de elementos que son la base de su estructura. Estos elementos conforman una caja de herramientas que los autores pueden utilizar para dar forma a sus documentos. Por ejemplo, puedes encontrar elementos que insertan párrafos, videos u otros documentos, o elementos que marcan citas, texto importante o los títulos de libros, películas, trabajos y otras obras.

El trabajo llevado a cabo por los navegadores es vital en este esquema, siendo éstos los responsables del procesamiento y transformación de los elementos en documentos representados. Con respecto a esto, los autores deben considerar que algunos elementos no tienen una representación tangible: su propósito es el de proveer significados semánticos a la porción de documento que afectan. A veces, la información provista por estos elementos semánticos, es usada por diferentes tipos de agentes de usuario (navegadores, motores de búsqueda, procesadores de documentos, etc) para extraer información adicional acerca del documento y sus partes.

Un elemento HTML está normalmente compuesto por dos etiquetas: la etiqueta de apertura y la etiqueta de cierre. Una etiqueta de apertura se compone del nombre del elemento encerrado por los símbolos menor-que "<" y mayor-que ">". La etiqueta de cierre se construye de igual manera que la de apertura pero, en este caso, el nombre del elemento es precedido por una barra diagonal ("/"). En el siguiente ejemplo, verás las etiquetas de apertura y cierre para el elemento b.

Ten presente que los elementos no son etiquetas. Los elementos están representados por etiquetas en el código. Sin embargo son habitualmente considerados, de manera errónea, la misma cosa.

<b>Texto importante</b>
Texto importante

Como puedes ver, allí están las etiquetas de apertura ("<b>") y de cierre ("</b>"). Ahora, el texto que ves en el medio, "Texto importante", es conocido como el contenido del elemento. A medida que progreses en el aprendizaje de este lenguaje, verás que algunos elementos no están pensados para (y no tienen permitido) tener contenido. Estos son los elementos vacíos.

Cada uno de los muchos elementos en HTML5 tiene un propósito específico y particular. Algunos son exclusivamente semánticos, otros tienen un impacto en la representación del documento y otros ambas cosas.

Además de etiquetas y contenido, un elemento puede tener atributos y eventos. Mientras que los atributos definen valores o propiedades para ser utilizadas por los navegadores en el procesamiento del documento, los eventos pueden ser empleados para especificar comportamientos o acciones a ser desempeñadas cuando ciertas condiciones se cumplen, como por ejemplo, cuando el usuario hace un click sobre el elemento.

Atributos y eventos comparten una misma sintaxis: se deben insertar dentro de la etiqueta de apertura como una lista de items separados por espacios, luego del nombre del elemento y precedida por un espacio. Cada uno de estos ítems se compone de un nombre (para el atributo o evento), el signo igual ("=") y el valor o función (a veces opcionalmente) encerrado entre comillas. El siguiente ejemplo muestra un elemento b con un atributo (style) y un evento (onclick).

<b style="color: red" onclick="cambiarColor(this.parentNode)">Texto importante</b>
Texto importante

Contenido

El contenido de un elemento es, hablando en términos generales, todo aquello que se encuentra entre sus etiquetas de apertura y cierre. Dependiendo del elemento, esto puede ir desde absolutamente nada a un trozo de documento HTML. Este contenido es lo que será afectado por la funcionalidad o significado del elemento. Por ejemplo, el elemento em brinda énfasis a su contenido, y los navegadores habitualmente muestran su texto con un estilo de fuente particular para hacerlo sobresalir del texto normal.

Algunos elementos, conocidos como elementos vacíos, no tienen permitido poseer contenido y su declaración consiste únicamente en la etiqueta de apertura con cualquier cantidad de atributos y eventos.

En el siguiente ejemplo hay tres elementos, cada uno con un tipo distinto de contenido: el párrafo (elemento p), conteniendo a otros elementos; una palabra con énfasis (elemento em), conteniendo sólo texto; y un botón (elemento input (type=button)), el cual es un elemento vacío.

<p>Es este un día <em>lluvioso</em>? <input type="button" value="Sí"></p>

Es este un día lluvioso?

123Próx