Atributos

Casi todas las etiquetas de HTML suelen llevar un atributo con un valor que define algo relativo al contenido al que se refiere esa etiqueta. Por ejemplo aquí estamos definiendo un identificador al párrafo:

<p id="Documentales">
Los documentales no son películas, son grabaciones que exponen un hecho real. Pueden usar técnicas propias del cine.
</p>
Ejemplo de atributo HTML (id)

Existen atributos específicos que solo se pueden usar con ciertas etiquetas, como width o height para indicar tamaño en una imagen (img), y atributos genéricos que valen para cualquier elemento de la página web, como class para aplicar una clase de estilo CSS a un elemento de la página.

En este capítulo se muestran los atributos generales aceptados por todos o la mayoría de los navegadores WEB. Verás que algunos de ellos solo tienen sentido si se usan además programas Javascript en el diseño de la página.

Atributos generales

Los atributos generales pueden aparece en cualquier etiqueta de la página, valen tano para un párrafo <p></p> como para un <div></div> o un bloque en linea <span></span>. Casi todos son booleanos, es decir, que aceptan el valor true o false, salvo algunos que aceptan texo o números.

Atributo Descripción
accesskey

Sirve para especificar una tecla que servirá para dar el foco a al elemento. El valor es la tecla y se activa junto a la tecla ALT o ALT+SHIFT, depende del navegador. Solo tiene sentido en elementos que puedan tener el foco, como campos de formularios o enlaces. En IExplore si pulsas ALT+c verás que se selecciona el enlace escrito a continuación:

<a href="comedia.htm" accesskey="c">comedia</a>

class

Sirve para indicar el nombre de la clase o clases de una hoja de estilos CSS que se apllica al lemento. Estas clases estarán definidas en el propio documento (HEAD) o en un archivo externo.

<div class="cabeceras"> Aparecerá en el formato definido para la clase cabecera en una hoja de estilos CSS </div>

contenteditable

Sirve para indicar si un contenido es editable. Para que tenga utilidad se debe utilizar junto a un script, es decir, programando. El usuario puede modificar el elemento, pero esa modificación no afecta a la página almaceanda en el ervidor solo a la copia que ve en ese momento el usuario.

<p contenteditable="tue">Este párrafo puede er modificado, prueba a escribir aquí, pero al actualizar la páginas se pierde todo</p>

data-* Este atributo se usa para alamcenar información en la página. El asterisco es un comodín (puede ser cualquier palabra). Es útil para dar información extra a los robos de búsqueda entre otras cosas. Este atributo merece un capítulo aparte.
dir

Para la direción del texto. No demasiado útil a menos que escribas páginas con contenido en idiomas que no se lean de izquierda a derecha, como el árabe que se lee de izquierda a derecha. Los valores que admite son

ltr: izquierda a derecha

rtl: derecha a izquierda

auto: en función del idioma de la página

draggable Marca el elemento al que se apllica como arastrable o no, es decir, si puede seleccionarse y arrastrar para soltar en alguna parte de la página. Estas operaciones hacen uso de programación Javascript.
hidden Sirve para indicar que el elemento al que se aplica no es relevante y el explorador no lo mostrará. Realmente no es demasiado útil en el entorno web, donde se usan los estilos para hacer esta ocultación.
id

Este atributo permite asignar un identificador al elemento al que se aplica. Un script o programa puede hacer uso de este valor para manipular el elemento o puede usarse una hoja de estilos para darle el aspecto que queramos.

<table id="atributos">... </table>

lang Para páginas en diferentes idiomas este valor nos da el idioma en el que está escrito el elemento. Se usan los codigos ISO de abreviaturas de los idiomas como es para español, fr para francés, en para inglés... Util para los buscadores
spellcheck Si le damos el valor true el elemento al que se aplica será comprobado ortográficamente. ütil en elementos de formularios donde se vaya a escribir texto.
style

Con este valor podemos definir el estilo (el aspecto) que tendrá el elemento como tipo de letra, colores, tipo de listas.... No se aconseja el uso de estilos en linea, es preferible usar archivos externos, pero puede ser útil para un caso concreto y puntual o para ser manejado por scripts. Para entender el uso por completo es necesario conocer el lenguaje de estilos CSS

<div style="height: 100px; width:200px">Cuadro de 100x200 </div>

tabindex Cuando varios elementos pueden tener el foco dentro de una página el valor aquí almacenado da su número de orden cuando se salta de uno a otro con al tecla TAB o ENTER. La utilidad más evidente es un formulario con varios campos para editar. Aquí podemos definir el campo al que se pasa cuando se termina de rellenar cada input.
title Se puede anotar información sobre el elemento de manera que al pasar el ratón por encima se muestra una pequeña caja con el texto anotado en este atributo. Muy útil para facilitar el uso de las páginas. Coloca el ratón sobre el ejemplo de abajo.

<p title="Los géneros de lectura">Los géneros de literatura que puedes encontrar en esta web son los de la lista... </p>

Algunos de estos atributos los volveremos a ver dentro de los elementos que se van a ir tocando en este manual.