HTML - Atributos

Hemos visto algunas etiquetas HTML y su uso como etiquetas de encabezado. <h1>, <h2>, etiqueta de párrafo <p>y otras etiquetas. Los usamos hasta ahora en su forma más simple, pero la mayoría de las etiquetas HTML también pueden tener atributos, que son bits adicionales de información.

Un atributo se utiliza para definir las características de un elemento HTML y se coloca dentro de la etiqueta de apertura del elemento. Todos los atributos se componen de dos partes: unaname y un value

  • los namees la propiedad que desea establecer. Por ejemplo, el párrafo<p> elemento en el ejemplo lleva un atributo cuyo nombre es align, que puede utilizar para indicar la alineación del párrafo en la página.

  • los valuees lo que desea que se establezca el valor de la propiedad y siempre entre comillas. El siguiente ejemplo muestra tres valores posibles del atributo de alineación: left, center y right.

Los nombres y valores de los atributos no distinguen entre mayúsculas y minúsculas. Sin embargo, el World Wide Web Consortium (W3C) recomienda atributos / valores de atributo en minúsculas en su recomendación de HTML 4.

Ejemplo

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Esto mostrará el siguiente resultado:

Atributos fundamentales

Los cuatro atributos principales que se pueden usar en la mayoría de los elementos HTML (aunque no en todos) son:

  • Id
  • Title
  • Class
  • Style

El atributo de identificación

los idEl atributo de una etiqueta HTML se puede utilizar para identificar de forma única cualquier elemento dentro de una página HTML. Hay dos razones principales por las que es posible que desee utilizar un atributo id en un elemento:

  • Si un elemento lleva un atributo id como identificador único, es posible identificar solo ese elemento y su contenido.

  • Si tiene dos elementos con el mismo nombre dentro de una página web (u hoja de estilo), puede usar el atributo id para distinguir entre elementos que tienen el mismo nombre.

Discutiremos la hoja de estilo en un tutorial separado. Por ahora, usemos el atributo id para distinguir entre dos elementos de párrafo como se muestra a continuación.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

El atributo del título

los titleEl atributo da un título sugerido para el elemento. Ellos sintaxis para eltitle atributo es similar como se explica para id atributo -

El comportamiento de este atributo dependerá del elemento que lo lleve, aunque a menudo se muestra como información sobre herramientas cuando el cursor pasa sobre el elemento o mientras el elemento se está cargando.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Esto producirá el siguiente resultado:

Ahora intente llevar el cursor sobre "Ejemplo de etiqueta de título con título" y verá que cualquier título que haya utilizado en su código aparece como una descripción emergente del cursor.

El atributo de clase

los classEl atributo se usa para asociar un elemento con una hoja de estilo y especifica la clase de elemento. Aprenderá más sobre el uso del atributo de clase cuando aprenda Hoja de estilo en cascada (CSS). Así que por ahora puedes evitarlo.

El valor del atributo también puede ser una lista de nombres de clases separados por espacios. Por ejemplo

class = "className1 className2 className3"

El atributo de estilo

El atributo de estilo le permite especificar reglas de hojas de estilo en cascada (CSS) dentro del elemento.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Esto producirá el siguiente resultado:

En este momento, no estamos aprendiendo CSS, así que continuemos sin preocuparnos mucho por CSS. Aquí, debe comprender qué son los atributos HTML y cómo se pueden usar al formatear el contenido.

Atributos de internacionalización

Hay tres atributos de internacionalización, que están disponibles para la mayoría (aunque no todos) de los elementos XHTML.

  • dir
  • lang
  • xml:lang

El atributo dir

los dirEl atributo le permite indicar al navegador la dirección en la que debe fluir el texto. El atributo dir puede tomar uno de dos valores, como puede ver en la siguiente tabla:

Valor Sentido
ltr De izquierda a derecha (el valor predeterminado)
rtl De derecha a izquierda (para idiomas como hebreo o árabe que se leen de derecha a izquierda)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Esto producirá el siguiente resultado:

Cuando se usa el atributo dir dentro de la etiqueta <html>, determina cómo se presentará el texto en todo el documento. Cuando se usa dentro de otra etiqueta, controla la dirección del texto solo para el contenido de esa etiqueta.

El atributo lang

los langEl atributo le permite indicar el idioma principal utilizado en un documento, pero este atributo se mantuvo en HTML solo por compatibilidad con versiones anteriores de HTML. Este atributo ha sido reemplazado por elxml:lang atributo en nuevos documentos XHTML.

Los valores del atributo lang son códigos de idioma de dos caracteres estándar ISO-639. ChequeHTML Language Codes: ISO 639 para obtener una lista completa de los códigos de idioma.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Esto producirá el siguiente resultado:

El atributo xml: lang

El atributo xml: lang es el reemplazo XHTML del atributo lang . El valor del atributo xml: lang debe ser un código de país ISO-639 como se mencionó en la sección anterior.

Atributos genéricos

Aquí hay una tabla de algunos otros atributos que se pueden usar fácilmente con muchas de las etiquetas HTML.

Atributo Opciones Función
alinear derecha, izquierda, centro Alinea las etiquetas horizontalmente
valignar arriba, medio, abajo Alinea verticalmente las etiquetas dentro de un elemento HTML.
bgcolor valores numéricos, hexadecimales, RGB Coloca un color de fondo detrás de un elemento
antecedentes URL Coloca una imagen de fondo detrás de un elemento.
carné de identidad Usuario definido Nombra un elemento para usar con hojas de estilo en cascada.
clase Usuario definido Clasifica un elemento para su uso con hojas de estilo en cascada.
anchura Valor numérico Especifica el ancho de tablas, imágenes o celdas de tabla.
altura Valor numérico Especifica la altura de las tablas, imágenes o celdas de una tabla.
título Usuario definido Título "emergente" de los elementos.

Veremos ejemplos relacionados a medida que procedamos a estudiar otras etiquetas HTML. Para obtener una lista completa de etiquetas HTML y atributos relacionados, consulte la referencia a la lista de etiquetas HTML .