Los últimos tutoriales de desarrollo web

Los atributos HTML


Atributos proporcionan información adicional sobre los elementos HTML.

Un atributo HTML es un modificador de un tipo de elemento HTML. Un atributo o bien modifica la funcionalidad predeterminada de un tipo de elemento o proporciona funcionalidad para determinados tipos de elementos que no pueden funcionar correctamente sin ellos. En la sintaxis HTML, se añade un atributo a una etiqueta de inicio HTML.


Los atributos HTML

  • Elementos HTML pueden tener attributes
  • Atributos proporcionan additional information acerca de un elemento
  • Atributos siempre se especifican en the start tag
  • Atributos vienen en pares de nombre / valor como: name="value"

Descripción

Atributos HTML en general, aparecen como pares de nombre-valor, separados por =, y se escriben dentro de la etiqueta inicial de un elemento, después del nombre del elemento:

<tag attribute="value">content to be modified by the tag</tag>

Cuando los nombres de etiqueta el tipo de elemento HTML, y el atributo es el nombre del atributo, establecido en el valor proporcionado. El valor puede estar entre comillas simples o dobles, aunque los valores que constan de ciertos caracteres se pueden dejar sin comillas en HTML (pero no XHTML) .Leaving valores de atributos sin comillas es considerado inseguro.

Aunque la mayoría de los atributos se proporcionan como nombres y valores apareados, algunos afectan al elemento simplemente por su presencia en la etiqueta de inicio del elemento (como el atributo ismap para el elemento img).

La mayoría de los elementos pueden tomar cualquiera de varios atributos comunes:

El atributo id proporciona un identificador único en todo el documento para un element.This se puede utilizar como selector CSS para proporcionar propiedades de presentación, por los navegadores para centrar la atención en el elemento específico, o mediante secuencias de comandos para modificar el contenido o la presentación de un elemento. Añade a la URL de la página, la URL se dirige directamente el elemento específico dentro del documento, típicamente un sub-sección de la página. Por ejemplo, el ID "atributos".

El atributo de clase proporciona una forma de clasificar elementos similares. Esto puede ser usado para los propósitos semánticas, o con fines de presentación. Semánticamente, por ejemplo, las clases se utilizan en microformatos. Presentationally, por ejemplo, un documento HTML puede utilizar la clase designación = "notación" para indicar que todos los elementos con este valor de clase están subordinadas al texto principal del documento. Esos elementos podrían ser reunidos y presentados como notas al pie de una página en lugar de aparecer en el lugar en el que se producen en el código HTML. Otro uso sería la presentación como un selector CSS.

Un autor puede utilizar el estilo de códigos no attributal propiedades de presentación a un elemento en particular. Se considera una mejor práctica utilizar ID o la clase de un elemento atributos para seleccionar el elemento con una hoja de estilo, aunque a veces esto puede ser demasiado engorroso para un simple y específico o aplicación especial de propiedades de estilo.

El atributo de título se utiliza para unir explicación subtextual a un elemento. En la mayoría de los navegadores de este atributo se muestra como lo que se refiere a menudo como ayuda.

El elemento de abreviatura, abbr, se puede usar para demostrar estos diversos atributos:

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

Este ejemplo muestra como HTML; en la mayoría de los navegadores, apuntando el cursor en la abreviatura debe mostrar el texto del título "Hypertext Markup Language".

La mayoría de los elementos también toman el lenguaje relacionado con los atributos lang y dir.


El lang Atributo

El lenguaje del documento puede ser declarada en el <html> etiqueta.

El lenguaje se declara en el lang atributo.

La declaración de una lengua es importante para las aplicaciones de accesibilidad (screen readers) y motores de búsqueda:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Las dos primeras letras especificar el idioma (en) . Si hay un dialecto, utilizar dos cartas más (US) .


El title Atributo

Párrafos HTML se definen con el <p> etiqueta.

En este ejemplo, la <p> elemento tiene un atributo de título. El valor del atributo es " About w3im " :

Ejemplo

<p title="About w3ii">
w3ii is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Inténtalo tú mismo "

Al mover el puntero del ratón sobre el elemento, el título se muestra como un consejo.


El href Atributo

Los vínculos HTML se definen con el <a> etiqueta. La dirección del enlace se especifica en el href atributo:

Ejemplo

<a href="http://www.w3ii.com">This is a link</a>
Inténtalo tú mismo "

Usted aprenderá más acerca de los vínculos y la <a> etiqueta más adelante en este tutorial.


Los atributos de tamaño

Imágenes HTML se definen con la <img> etiqueta.

El nombre de archivo de la fuente ( src ) , y el tamaño de la imagen ( width y height ) son proporcionados como atributos:

Ejemplo

<img src="w3ii.jpg" width="104" height="142">
Inténtalo tú mismo "

El tamaño de la imagen se especifica en píxeles: width = "104" significa 104 píxeles de pantalla ancha.

Va a aprender más sobre las imágenes y el <img> etiqueta más adelante en este tutorial.


El alt Atributo

El alt atributo especifica un texto alternativo que se utilizará, cuando un elemento HTML no se puede mostrar.

El valor del atributo puede ser leído por "screen readers" . De esta manera, alguien "listening" a la página web, es decir, una persona ciega, puede "hear" el elemento.

Ejemplo

<img src="w3ii.jpg" alt="w3ii.com" width="104" height="142">
Inténtalo tú mismo "

Sugerimos: Usar siempre en minúsculas Atributos

El estándar HTML 5 no requiere nombres de atributos en minúsculas.

El title atributo puede escribirse con mayúscula o minúscula como Title y / o TITLE .

W3C recomienda minúsculas en HTML 4, y exige minúsculas para los tipos de documentos más estrictas como XHTML.

minúsculas es la más común. minúsculas es más fácil de escribir.
En w3ii siempre usamos minúsculas nombres de atributos.


Sugerimos: siempre hay que indicar valores de atributos

El estándar HTML 5 no requiere comillas alrededor de los valores de atributo.

El href atributo, se demostró anteriormente, se puede escribir como:

Ejemplo

<a href=http://www.w3ii.com>
Inténtalo tú mismo "

W3C recommends cotizaciones en HTML 4, y exige cotizaciones de los tipos de documentos más estrictas como XHTML.

A veces es necesario el uso de comillas. Esto no se mostrará correctamente, ya que contiene un espacio:

Ejemplo

<p title=About w3ii>
Inténtalo tú mismo "

Utilizando comillas son los más comunes. omitiendo las cotizaciones pueden producir errores.
En w3ii siempre usamos comillas alrededor de valores de atributos.


Comillas simples o dobles?

Las comillas dobles de estilo son los más comunes en HTML, pero solo estilo también se pueden utilizar.

En algunas situaciones, cuando el valor del atributo en sí contiene comillas dobles, es necesario el uso de comillas simples:

<p title='John "ShotGun" Nelson'>

O viceversa:

<p title="John 'ShotGun' Nelson">

Resumen del capítulo

  • Todos los elementos HTML pueden tener atributos
  • El HTML title atributo proporciona adicional "tool-tip" información
  • El HTML href atributo proporciona información de direcciones para los enlaces
  • Los HTML width y height atributos proporcionan información para las imágenes
  • El HTML alt atributo proporciona el texto para lectores de pantalla
  • En w3ii siempre usamos lowercase HTML nombres de atributos
  • En w3ii siempre quote atributos con comillas dobles

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »


Los atributos HTML

A continuación se muestra una lista alfabética de algunos atributos de uso frecuente en HTML:

Atributo Descripción
alt Especifica un texto alternativo para una imagen
disabled Especifica que un elemento de entrada debe ser desactivada
href Especifica la dirección URL (web address) para un enlace
id Especifica un identificador único para un elemento
src Especifica la dirección URL (web address) de una imagen
style Especifica un estilo CSS en línea para un elemento
title Especifica información adicional sobre un elemento (displayed as a tool tip)

Una lista completa de todos los atributos para cada elemento HTML, aparece en nuestro: Referencia de Etiquetas HTML .