Iniciarse en el mundo de la programación web es una decisión que cada vez más personas toman, entonces, te felicito por haber llegado hasta acá en el curso. Pero, debo decirte, que a partir de acá, las cosas se comenzarán a complicar un poco, porque empezaremos a introducir dos conceptos nuevos, las etiquetas y los atributos.
Entonces, primero definiremos y veremos todo sobre las etiquetas HTML, y luego, haremos lo propio con los atributos. — Pero, ¡no te preocupes!, aún no hay que aprenderlas todas. Este es un listado, que iremos utilizando como consulta durante todo el curso.
¿Qué es una etiqueta HTML?
Antes de entrar en materia, conviene explicar de que vamos a hablar. Las etiquetas HTML son pequeños bloques de código, que indican al navegador como debe interpretar el contenido recogido entre dichas etiquetas.
Por ejemplo, si queremos «pintar» un párrafo de texto, hay una etiqueta específica para que el navegador interprete ese texto como un párrafo. Estas etiquetas cuentan además con atributos que podemos añadir y que en sí, pueden determinar como será el comportamiento específico que tendrá la etiqueta. Te dejo por aquí un listado de atributos HTML para complementar esta entrada.
Las etiquetas HTML comienzan siempre con el símbolo de menor que «<» y finalizan con el símbolo de mayor que «>». Entre medias de estos dos símbolos irá el nombre de la etiqueta que queremos que el navegador interprete.
Todas las etiquetas HTML están compuestas por una etiqueta de apertura, y una etiqueta de cierre. Aunque hay excepciones, como por ejemplo la etiqueta para cargar una imagen que son llamadas etiquetas huérfanas, ya que solo tienen etiqueta de apertura.
Las etiquetas de cierre se construyen con una barra «/» justo antes de la propia etiqueta y los símbolos «<» y «>». Resumiendo, si queremos «pintar» un párrafo en la página web, abriremos con la etiqueta de apertura de párrafo «<p>», y cerraríamos con la etiqueta de cierre «</p>».
<p>Esto es un párrafo</p>Una vez que conocemos que son las etiquetas y como implementarlas en nuestro código web, pasemos a ver un listado de las etiquetas HTML más comunes.
Listado etiquetas Html
A continuación voy a indicarte cuales son las etiquetas HTML más usadas y también te indicaré su finalidad. Voy a centrarme en las principales etiquetas y sobre todo las que están soportadas en HTML 5. Ahí van:
Etiquetas iniciales o de raíz
<!DOCTYPE html>: Indica al navegador que el documento está basado en el estándar HTML5
<html> </html>: Representa la raíz de un documento HTML. Todos los demás elementos de la estructura HTML deben estar dentro de esta etiqueta. Entonces, arrancaremos y terminaremos nuestros documentos con esta etiqueta.
Metadatos del documento
<head> </head>: Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de metadatos, irán dentro de las etiquetas de apertura y cierre del head. Importante explicar que estos metadatos del documento, es información para el navegador y no contenido que será visible en la página web. A excepción de la etiqueta <title> que veremos a continuación.
<title> </title>: Etiqueta usada para definir el título de la página web. Es lo que vemos en la pestaña del navegador, sí no la indicamos, se generará un nombre genérico en la pestaña.
<link>: Se usa para enlazar recursos externos al documento HTML. El ejemplo más común son las hojas de estilos CSS.
<meta>: Etiqueta usada para definir otros metadatos que no se pueden definir con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio, o la descripción del mismo. Esta etiqueta antes tenía valor SEO, pues, los desarrolladores definían muchas etiquetas <meta> con palabras clave. Pero, esto dejó de ser así hace bastante tiempo, pues, con la llegada del Hummingbird, las búsquedas se volvieron más semánticas e interpretativas, entonces no había que decirle al navegador de qué se trata el sitio.
<style> </style>: Etiquetas usadas para introducir código CSS en línea, es decir, en el propio documento HTML.
Etiquetas de secciones o para estructurar el HTML
<body> </body>: Al contrario que la etiqueta de metadatos <head>, todo lo que se inserte en el <body> se mostrará en el documento de tu página web. También, con esta etiqueta pasará lo mismo que con el <body>, pues, requiere de las propias etiquetas de apertura y cierre.
<nav> </nav>: Usadas para definir el contenido que será la sección de navegación de la web.
<main> </main>: Se usa para definir el contenido principal del documento. Solamente puede existir uno por documento.
<section> </section>: Define una sección del documento.
<article> </article>: Define contenido independiente de la web.
<aside> </aside>: Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido relacionado con la web pero de poca importancia.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se utilizan para explicar brevemente el contenido que irá a continuación. Es decir, estas etiquetas te separarán el documento con diversos títulos y subtítulos. Para profundizar, te recomiendo visitar el post que habla a detalle sobre las etiquetas h, y su relación con el posicionamiento web.
<header> </header>: Se usan para definir la cabecera la página web. Suele contener el logotipo, menú de navegación, etc.
<footer> </footer>: Usadas para definir el pie de página.
Etiquetas para la agrupación de contenido
<p> </p>: Etiqueta usada para escribir párrafos de texto.
<hr>: Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
<pre> </pre>: Usada para pegar texto manteniendo el pre formato propio del texto.
<blockquote> </blockquote>: Se usan para indicar que el contenido es texto citado.
<ol> </ol>: Etiquetas para crear una lista ordenada, en inglés sería ordered list. Es decir, la que tiene números.
<ul> </ul>: Etiquetas para crear una lista desordenada, otra vez, en inglés sería unordered list. Esta es la que no tiene números.
<li> </li>: Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
<dl> </dl>: Usada para crear una lista de definiciones.
<dt> </dt>: Representa un término definido por la siguiente etiqueta <dd>
<dd> </dd>: Se usa para definir los términos listados antes que él.
<figure> </figure>: Indica una figura ilustrada como parte del documento HTML5.
<figcaption> </figcaption>: Utilizada para definir la leyenda de una figura.
<div> </div>: Etiqueta común utilizada para crear un contenedor genérico.
Etiquetas semánticas para texto
<a> </a>: Etiqueta utilizada para crear hiperenlaces (hyperlinks) en el documento HTML.
<strong> </strong>: Etiqueta para definir una palabra o conjunto de ellas como importantes, es lo que escribimos cómo negrita. Tiene una cierta importancia en el SEO de la página.
<small> </small>: Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autoría, u otros textos que no son esenciales para la comprensión del documento.
<cite> </cite>: Para indicar el título de una obra.
<sub> </sub> y <sup> </sup>: Etiquetas utilizadas para representar un subíndice o superíndice.
<mark> </mark>: Usada para resaltar texto cómo si de un resaltador se tratase. El color se definirá automáticamente cómo amarillo fosforescente, a menos que se declare otro color.
<span> </span>: Etiqueta HTML sin ningún significado específico. Se usa conjuntamente con los atributos «class» o «id» para atribuirle ciertas características. Más adelante veremos su significado.
<br>: Etiqueta utilizada para crear un salto de línea, en inglés se llama line break.
Etiquetas para incrustar contenido
<img>: Etiqueta para «pintar» una imagen en la página web.
<iframe> </iframe>: Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal. En el curso lo utilizaremos de ejemplo más adelante.
<embed>: Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML. Es muy frecuente utilizarla cuando queremos integrar videos de YouTube en nuestro sitio web, entre otros.
<object> </object>: Utilizada llamar a un recurso externo de la web. Este recurso será tratado como una imagen, o un recurso externo para ser procesado por un plugin.
<video> </video>: Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
<audio> </audio>: Usada para cargar en una web un archivo de audio o stream de audio.
<source>: Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o <audio>.
<svg> </svg>: Se usa para llamar a una imagen vectorizada. Es decir, las famosas imagenes .svg.
Etiquetas para la creación de tablas
<table> </table>: Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas, es decir, requiere de más etiquetas para funcionar correctamente.
<caption> </caption>: Usada para indicar el título de la tabla.
<colgroup> </colgroup>: Etiqueta utilizada para agrupar dos o más columnas de una tabla.
<tbody> </tbody>: Usada para describir los datos concretos de una tabla.
<thead> </thead>: Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
<tfoot> </tfoot>: Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de una tabla.
<tr> </tr>: Se usa para indicar una fila de celdas de una tabla.
<td> </td>: Usada para definir una celda de una tabla.
<th> </th>: Etiqueta que se usa para definir el encabezado de una celda.
Etiquetas para la creación de formularios
<form> </form>: Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas de formulario deben ir siempre dentro de estas etiquetas de apertura y cierre de formulario.
<fieldset> </fieldset>: Etiqueta que representa un conjunto o agrupación de elementos de un formulario. «Pinta» un recuadro alrededor de las etiquetas que estén contenidas dentro del <fieldset>.
<legend> </legend>: Etiqueta ligada a <fieldset>. Indica el título del <fieldset>. Podríamos decir que es legend, porque es la leyenda del título.
<label> </label>: Se usa para definir el nombre o título de un control del formulario.
<input>: Pinta un campo de introducción de datos para el usuario. Es de las principales etiquetas de un formulario.
<button> </button>: Etiqueta utilizada para representar un botón en el formulario y botones en general.
<select> </select>: Input que permite una selección entre un conjunto de opciones.
<option> </option>: Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>.
<textarea> </textarea>: Añade un campo al usuario para que pueda introducir texto en unas líneas máximas de texto que el desarrollador puede definir.
Otras etiquetas discontinuadas
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. Por eso, ahora tenemos que definir y entender, qué son los atributos.
¿Qué es un atributo HTML?
Antes de entrar en materia, y que veas todos los atributos HTML que ahora mismo existen, quiero explicarte que son exactamente. Un atributo HTML es un valor o propiedad que le sumás a una etiqueta HTML. Este otorgará una propiedad o comportamiento específico a la propia etiqueta, por lo que es muy importante que los conozcas todos.
Por este motivo, es importante guardar esta lección del curso para consultar en más de una ocasión. Cosa que haremos en la cursada, pues, es probable que frecuentemente tengamos que citar esta lección, ya que es mucho contenido para aprender en una lección.
Entonces, para añadir el atributo, bastará con que lo introduzcas en la propia etiqueta de inicio del elemento HTML en cuestión. Un ejemplo sería el siguiente, donde vamos a añadir el atributo «id» a una etiqueta <div>:
<div id="nombre"></div>Cómo te habrás fijado el atributo se añade dentro de la etiqueta HTML inicial. También verás que aunque el atributo es «id», este contiene un valor que le hemos asignado, en este caso «nombre».
Tipos de atributos HTML
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 usuales 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:
- Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML.
- Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas.
- Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript.
- Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web.
Atributos básicos
Los siguientes cuatro atributos básicos se pueden aplicar prácticamente a todas las etiquetas HTML:
| Atributo | Descripción |
|---|---|
id = "texto" | Establece un identificador único a cada elemento dentro de una página HTML |
class = "texto" | Establece la clase CSS que se aplica a los estilos del elemento |
style = "texto" | Establece de forma directa los estilos CSS de un elemento |
title = "texto" | Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento) |
La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo, estos atributos solo 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.
Atributos para internacionalización
Estos atributos son útiles para aquellas páginas que muestran sus contenidos en varios idiomas y para 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 |
dir | Indica la dirección del texto (útil para los idiomas que escriben de derecha a 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. Los idiomas se indican mediante un código estandarizado (es para español, en para inglés, etc.), tal y como se explicará más adelante en la sección idioma del enlace del capítulo 4.
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).
Atributos de eventos
Estos atributos solo se utilizan en las páginas web que incluyen código JavaScript para realizar acciones dinámicas sobre los elementos 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. Usando JavaScript y los siguientes atributos, es posible responder de forma adecuada a cada evento.
| Atributo | Descripción | Elementos que pueden usarlo |
|---|---|---|
onblur | Deseleccionar el elemento | <button>, <input>, <label>, <select>, <textarea>, <body> |
onchange | Deseleccionar un elemento que se ha modificado | <input>, <select>, <textarea> |
onclick | Pinchar y soltar el ratón | Todos los elementos |
ondblclick | Pinchar dos veces seguidas con el ratón | Todos los elementos |
onfocus | Seleccionar un elemento | <button>, <input>, <label>, <select>, <textarea>, <body> |
onkeydown | Pulsar una tecla (sin soltar) | Elementos de formulario y <body> |
onkeypress | Pulsar una tecla | Elementos de formulario y <body> |
onkeyup | Soltar una tecla pulsada | Elementos de formulario y <body> |
onload | La página se ha cargado completamente | <body> |
onmousedown | Pulsar (sin soltar) un botón del ratón | Todos los elementos |
onmousemove | Mover el ratón | Todos los elementos |
onmouseout | El ratón «sale» del elemento (pasa por encima de otro elemento) | Todos los elementos |
onmouseover | El ratón «entra» en el elemento (pasa por encima del elemento) | Todos los elementos |
onmouseup | Soltar el botón que estaba pulsado en el ratón | Todos los elementos |
onreset | Inicializar el formulario (borrar todos sus datos) | <form> |
onresize | Se ha modificado el tamaño de la ventana del navegador | <body> |
onselect | Seleccionar un texto | <input>, <textarea> |
onsubmit | Enviar el formulario | <form> |
onunload | Se abandona la página (por ejemplo al cerrar el navegador) | <body> |
Atributos de foco
Cuando el usuario selecciona un elemento en una aplicación, se dice que «el elemento tiene el foco del programa». Si por ejemplo un usuario hace clic 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 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 = "letra" | Establece una tecla de acceso rápido a un elemento HTML |
tabindex = "numero" | Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767 |
onfocus, onblur | Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el 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 precisamente 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.
Lista de atributos propias del HTML5
| Atributo | Etiqueta HTML5 | Descripción |
|---|---|---|
| accept | <form>, <input> | Tipos de archivos aceptados por el servidor. Puedes definirlos con valores separados por comas, por ejemplo: .doc, .ods, .txt, etc. O también puedes indicarle un conjunto de tipos de archivos, como por ejemplo: «video/*» o «audio/*» |
| accept-charset | <form> | Define una lista de caracteres soportados en el formulario. Por ejemplo: accept-charset=»ISO-8859-1″ |
| accesskey | Atributo Global | Podrás configurar un botón de tu teclado para que se ejecute acción en la página web. Por ejemplo, un enlace hacia la página de contacto o la home. |
| action | <form> | El atributo especifica la URL dónde se enviarán los datos recogidos en el formulario, a menudo un archivo .php dentro del mismo servidor. |
| align | <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> | Especifica el alineamiento horizontal del elemento. Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar. |
| alt | <applet>, <area>, <img>, <input> | Texto alternativo que se mostrará en el navegador en caso de que la imagen no se pueda mostrar. Muy importante de cara a accesibilidad. |
| async | <script> | Indica que el script debe ejecutarse de forma asíncrona. |
| autocomplete | <form>, <input> | Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador. |
| autofocus | <button>, <input>, <keygen>, <select>, <textarea> | El elemento debe tener el foco automáticamente una vez se cargue la página web. |
| autoplay | <audio>, <video> | Hace que el audio o video comience a reproducirse una vez se cargue la página web. |
| bgcolor | <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> | Te permite añadir un color de fondo al elemento HTML. El color debe ser añadido en el modo de color RGB, por ejemplo #FF00AA. Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar. |
| border | <img>, <object>, <table> | Permite definir un borde al elemento HTML. Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar. |
| buffered | <audio>, <video> | Con este atributo podrás definir un rango de tiempo del elemento multimedia que será usado como buffer. |
| charset | <meta>, <script> | Atributo necesario par definir la codificación de caracteres de la página o del script. |
| checked | <command>, <input> | Usado para definir que un elemento HTML debe estar marcado por defecto al cargar la página web. |
| cite | <blockquote>, <del>, <ins>, <q> | Contiene una URL que apunta a la fuente de la cita o cambio. |
| class | Atributo Global | Otorga una clase creada en CSS a un elemento HTML. Se usa principalmente para aplicar estilos a elementos con propiedades en común. |
| code | <applet> | Especifica la URL del archivo de tipo applet que será cargado y ejecutado. |
| color | <basefont>, <font>, <hr> | Atributo usado para indicar el color del texto de un elemento. Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar. |
| cols | <textarea> | Dentro de una etiqueta <textarea>, se usa para definir el número de columnas que tendrá el campo de texto. |
| colspan | <td>, <th> | Dentro de una tabla, define el número de columnas que una celda debe ocupar. |
| content | <meta> | Un atributo que permite definir el contenido de la etiqueta HTML <meta> que acompaña. |
| contenteditable | Atributo Global | Define si el contenido del elemento HTML podrá ser editable o no. |
| contextmenu | Atributo Global | Define el ID del elemento <menu> que servira como menú de contexto para otro elemento. |
| controls | <audio>, <video> | Indica si el navegador debe mostrar los controles multimedia del reproductor integrado al usuario. |
| coords | <area> | Un conjunto de valores que especifican las coordenadas dentro de la etiqueta area. |
| data | <object> | Especifica la URL, absoluta o relativa del objeto o recurso. |
| data-* | Atributo Global | Permite asociar atributos presonalizados a un elemento HTML. |
| datetime | <del>, <ins>, <time> | Permite definir la fecha y hora asociadas con el elemento. |
| default | <track> | Con este atributo podrás definir que por defecto, una pista por ejemplo de subtítulos esté habilitada. Siempre y cuando las preferencias del usuario no indiquen algo diferente. |
| defer | <script> | Indica que el código debe ser ejecutado despues de que la página este cargada. |
| dir | Atributo Global | Con este atributo puedes definir la dirección del texto en un elemento HTML. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda). |
| dirname | <input>, <textarea> | Similar a la anterior. Indica la dirección del texto asociada con el elemento al momento de enviar el formulario. |
| disabled | <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> | Permite que un elemento HTML esté deshabilitado y el usuario no pueda interactuar con el. |
| download | <a>, <area> | Si este atributo se añade al elemento HTML, el recurso indicado podrá descargarse al dispositivo del usuario. |
| draggable | Atributo Global | Define si el elemento puede ser arrastrado. |
| enctype | <form> | Define el tipo de contenido del formulario cuando el método del mismo es POST. |
| for | <label>, <output> | Atributo usado para asociar o describir elementos que pertenecen a éste. |
| form | <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> | Atributo para indicar el formulario al que pertenece el elemento. |
| headers | <td>, <th> | A través de «ids» indicados en los encabezados de una tabla <th> podrás asociarlos a diferentes elementos de la tabla <td>. Muy útil de cara a la accesibilidad y por lo tanto para el SEO. |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Permite especificar la altura de los elementos HTML indicados. Este atributo sigue funcionando pero no es aconsejable usarlo ya que está en desuso. Lo recomendable es usar reglas CSS en su lugar. |
| hidden | Atributo Global | Este atributo permite indicar que el elemento HTML no debe ser visible. Es habitual usarlo por ejemplo, para ocultar elementos que no deben ser visibles inicialmente pero que después de una acción si deben verse. |
| high | <meter> | El atributo especifica el intervalo donde el atributo «value» tomara el valor como alto. |
| href | <a>, <area>, <base>, <link> | La URL de un recurso asociado. |
| hreflang | <a>, <area>, <link> | Especifica el lenguaje del recurso asociado. |
| http-equiv | <meta> | Indica una directiva que puede alterar el comportamiento de la página y como es leída por los exploradores. |
| id | Atributo Global | Usado para asignar un identificador único a un elemento HTML. Usado generalmente para acceder al mismo desde CSS o Javascript. No pueden existir dos «ids» iguales en una misma página web. |
| ismap | <img> | Indica que la imagen es parte de un mapa de imagen del servidor. |
| itemprop | Atributo Global | Atributo que permite dar más información a Google acerca de imágenes o datos dentro de cualquier tipo de etiquetas. Por ejemplo se puede indicar propiedades como: actores , clasificación, género, etc . |
| label | <track> | Especifica el título de la pista con un formato legible por el usuario. Usado conjuntamente con el atributo «for» |
| lang | Atributo Global | Define el lenguaje utilizado en el elemento. |
| language | <script> | Define el lenguaje (de programación) utilizado en el script. |
| list | <input> | Identifica una serie de valores predefinidos para ser sugeridos al usuario en un menú desplegable. |
| loop | <audio>, <bgsound>, <marquee>, <video> | Atributo que habilita al medio a volver a reproducirse desde el principio cuando llega al final. |
| low | <meter> | Similar al atributo high, solo que en este caso, permite definir cuando un valor estará en el rango bajo. |
| max | <input>, <meter>, <progress> | Define el máximo valor aceptado. |
| maxlength | <input>, <textarea> | Define el mayor número de caracteres aceptados. |
| media | <a>, <area>, <link>, <source>, <style> | Indica el tipo de medio para el cual el recurso vinculado fue creado. |
| method | <form> | Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST. |
| min | <input>, <meter> | Define el valor mínimo aceptado. |
| multiple | <input>, <select> | Atributo que define si se puede introducir múltiples valores. |
| muted | <video> | Al reproducir un contenido audiovisual, este atributo indica si el audio será silenciado inicialmente al cargar la página. |
| name | <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> | Nombre del elemento. Utilizado a menudo por el servidor para identificar los campos en el envío de formularios. |
| novalidate | <form> | Con este atributo indicamos al formulario que no valide el contenido del mismo. |
| open | <details> | Indica si los detalles de la página seran mostrados cuando cargue la misma. |
| optimum | <meter> | Con este atributo se define el valor numérico óptimo. |
| pattern | <input> | Este atributo define una expresión regular con la cual el valor del elemento debe ser validado antes de aceptar el contenido del mismo. |
| ping | <a>, <area> | Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo. |
| placeholder | <input>, <textarea> | Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo de un formulario por ejemplo. Muy util de cara a la accesibilidad. |
| poster | <video> | Atributo que permite añadir una imagen que se mostrará mientras se carga un video en una web. En caso de que la URL del video este «rota», el poster seguirá cargándose consiguiendo con esto no ver un hueco vacio en la web. |
| preload | <audio>, <video> | Indica si el recurso o partes del mismo deben ser precargadas. |
| readonly | <input>, <textarea> | Con este atributo se define si el elemento puede o no ser editado por el usuario. |
| rel | <a>, <area>, <link> | Especifica la relación entre el objeto destino y el objeto enlace. Importante de cara una correcta optimización SEO. |
| required | <input>, <select>, <textarea> | Con este atributo hacemos que la etiqueta Html sea, o no, de obligada cumplimentación. |
| reversed | <ol> | Con este atributo podemos modificar el comportamiento estándar de una lista ordenada haciendo que se vea listada en orden descendente en lugar de ascendente. |
| rows | <textarea> | Define el número de filas en un área de texto. |
| rowspan | <td>, <th> | Define el número de filas que una celda de una tabla debe abarcar. |
| sandbox | <iframe> | Lista de restricciones a ser desactivadas en el iframe. |
| scope | <th> | En una tabla permite definir las celdas que la cabecera deberá ocupar en este elemento. |
| seamless | <iframe> | Indica si el iframe debe ser cargado como parte del mismo documento. |
| selected | <option> | Define un valor que aparecerá por defecto seleccionado al cargar la página. |
| size | <input>, <select> | Define el ancho del elemento (en píxeles). En este caso es mejor por tanto usar reglas CSS. En cambio. si el atributo del elemento es del tipo «text» o «password», entonces es el número de caracteres que se podrán introducir. |
| span | <col>, <colgroup> | Indica el número de columnas que se agrupan en una tabla. |
| spellcheck | Atributo Global | Con este atributo se permite que un texto pueda ser autocorregido ortográficamente, o no. |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | La URL del contenido integrable en la etiqueta HTML que lo acompaña. |
| srcdoc | <iframe> | Especifica el contenido de la página incluida. |
| srclang | <track> | Especifica el lenguaje del contenido de la pista. |
| srcset | <img> | Este atributo define diferentes versiones de la imagen para mostrar una o otra según el tipo de pantalla. |
| start | <ol> | Define el número inicial de la lista ordenada (si es diferente a 1). |
| style | Atributo Global | Define los estilos CSS que anulan los estilos establecidos previamente. En este caso son llamados estilos en línea ya que se introducen directamente en la etiqueta HTML en cuestión. |
| target | <a>, <area>, <base>, <form> | Con este atributo se determina el marco destino en un vínculo. Valores especiales: «_blank» indica una nueva ventana, «_parent» indica el marco padre del marco que contiene el código fuente, «_self» indica el marco donde está el código fuente y «_top» indica la ventana completa del navegador. |
| title | Atributo Global | Texto a ser mostrado cuando el cursor esté sobre el elemento. Muy útil de cara a la usabilidad y para una correcto posicionamiento SEO. |
| type | <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> | Define el tipo de elemento HTML. |
| usemap | <img>, <input>, <object> | Indica la URL parcial de un image map asociado con el elemento. Note: Este atributo no puede ser usado si el elemento <img> desciende de un <button> o <a> |
| value | <button>, <option>, <input>, <li>, <meter>, <progress>, <param> | Define el valor predeterminado a ser mostrado al cargar la página. |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Para los elementos enumerados aquí, esto establece el ancho del elemento. Aunque como en caso anteriores, lo correcto sería usar reglas CSS. |
| wrap | <textarea> | Indica la forma en la cual el texto debe ser envuelto. |
Utilizando las etiquetas
La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando solo 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>Ejemplo de enlace sin destino URL</a>.
</p>
<p>
<a href="http://www.tupacbruch.com">Ejemplo con URL, que se direcciona al Home de tupacbruch</a>.
</p>
</body>
</html>Así se vería el ejemplo:
Además de las etiquetas HTML que aquí te he mostrado, existen muchas más. Pero sinceramente, creo que con este listado podrás hacer el 99% de las páginas web. Y si tienes dudas con alguna etiqueta, o bien has encontrado alguna de la que no te he hablado aquí y quieres saber más, consulta el siguiente enlace de la web oficial de la w3 ↗.
En la página del World Wide Web Consortium o W3C, encontrarás toda la información oficial pertinente al HTML.
