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 o el destino a un enlace:
<p id="Documentales">
Los documentales no son películas, son grabaciones que exponen un hecho real. Pueden usar técnicas propias del cine.</p>
<a href="example.com" target="_blank"</a>
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 genéricos
Estos atributos genéricos pueden aparece en cualquier etiqueta de la página, valen tanto 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 texto o números.
| Atributo | Descripción |
|---|---|
| accesskey | Sirve para especificar una tecla que servirá para dar el foco 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. Si pulsas ALT+c verás que se selecciona el enlace escrito a continuación: |
| 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. Se pueden asignar varias clases separando sus nombres con espacios.<div class="cabecera azul"> |
| 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 almacenada en el servidor solo a la copia que ve en ese momento en su navegador. <p contenteditable="true">Este párrafo puede er modificado, prueba a escribir aquí, pero al actualizar la página se pierde todo</p> |
| data-* | Este atributo se usa para almacenar 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 derecha a izquierda. 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 arrastrarse 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 (display:none o visibillity:(hidden o collapse)). |
| 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 definir un estilo para ese elemento. No deben repetirse en una misma página web. <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 la 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.