Atributos HTML

Los atributos HTML se pueden decir como palabras especiales que se usan dentro de las etiquetas de apertura y son responsables de controlar el comportamiento de un elemento. Son un modificador del tipo de elemento HTML. Este modificador puede hacer dos trabajos. Puede modificar la funcionalidad predeterminada de un elemento o puede proporcionar la funcionalidad a cualquier elemento que no pueda funcionar correctamente sin ellos. Sintácticamente, se agrega un atributo a la etiqueta de inicio HTML. Hay diferentes tipos de atributos que se han identificado. Estos incluyen los atributos requeridos, los atributos opcionales, los atributos estándar y los atributos de eventos. Los atributos requeridos son aquellos que son necesarios para un tipo de elemento particular para que la función funcione correctamente. El atributo opcional se puede usar para modificar la funcionalidad predeterminada de un tipo de elemento. Los atributos estándar son compatibles con una gran cantidad de tipos de elementos y los atributos de eventos se pueden usar para generar tipos de elementos que pueden especificar los scripts que se ejecutan en circunstancias específicas. Los atributos generalmente aparecen como pares de nombre-valor y están separados por '=' (signo igual). Se escriben dentro de la etiqueta de inicio de un elemento después del nombre del elemento.

Atributos HTML diferentes

Echemos un vistazo a los diferentes atributos HTML y cómo funcionan en detalle.

Atributos centrales

Hay cuatro atributos principales que se utilizan principalmente. Para nombrar estos son los siguientes:

  • ID: este atributo de HTML se puede usar fácilmente para identificar de forma exclusiva un elemento que está presente en una página HTML. La identificación de usuario se puede usar cuando un elemento lleva un atributo de identificación como un identificador único, lo que hace posible identificar el elemento y su contenido o esto se usa cuando hay dos elementos que tienen el mismo nombre dentro de una página web. El atributo ID puede ayudar a identificar fácilmente la diferencia entre los elementos que tienen el mismo nombre.
  • El atributo de título: este atributo hace el trabajo de dar un título sugerido para un elemento en particular. Depende del operador cómo se comportará y, aunque generalmente no se muestra como información sobre herramientas cada vez que el cursor pasa sobre el elemento o si tiene que mostrarlo cuando el elemento se está cargando. También se usa para explicar un elemento al pasar el mouse sobre él. El comportamiento puede diferir con diferentes elementos y, en general, su valor se muestra al cargar o al pasar el puntero del mouse sobre él.
  • El atributo de clase: la asociación de este atributo se realiza con un elemento de la hoja de estilo. El usuario debe especificar la clase del elemento. Se puede aprender más sobre este atributo cuando se aprende la hoja de Estilo en cascada. El valor aquí también puede ser una lista de nombres de clase separados por espacios. Por ejemplo: class = "className1 className2 className3"
  • El atributo de estilo: este atributo le permite especificar las reglas de la hoja de estilo en cascada dentro de cualquier elemento. Puede proporcionar varios efectos de hoja de estilo en cascada a los elementos HTML, como aumentar el tamaño de fuente. También puede cambiar la familia de fuentes y el color.

Después de los atributos centrales, tenemos algunos atributos de internacionalización. Son los siguientes:

Atributo de internacionalización

  • Dir: el atributo dir le ayuda a indicarle al navegador la dirección en la que debe seguir un texto. Este atributo generalmente puede tomar dos valores. Estos pueden ser LTR y RTL. LTR significa de izquierda a derecha y este es el valor predeterminado, mientras que RTL significa de derecha a izquierda. Cuando este atributo se usa dentro de la etiqueta, determina cómo se debe representar un texto en todo el documento. También se puede usar para controlar la dirección del texto desde solo el contenido de la etiqueta.
  • El atributo Lang: este atributo ayuda a mostrar el idioma principal que se utiliza en un documento. Este atributo se puede mantener en HTML para que sea compatible con versiones anteriores de HTML. También se puede reemplazar por el atributo XML: lang en los nuevos documentos XHTML. Los valores de los atributos lang son estándar ISO-639 y tienen códigos de idioma de dos caracteres. Declarar un idioma es importante para acceder a la aplicación y a los diferentes motores de búsqueda.
  • El atributo XML-Lang: se supone que este atributo es el reemplazo del atributo lang. El valor del atributo XML-lang debe tener el código de país como se mencionó anteriormente.

Además de estos, hay muchos atributos genéricos que se describen a continuación.

Atributo Genérico

  • Alinear atributo: este atributo es útil cuando desea tener algunos elementos de su página a su disposición. Puede cambiar la alineación a la izquierda, a la derecha o al centro de la página. La alineación predeterminada para todos los elementos se establece a la izquierda. Esto se puede cambiar usando este atributo de alineación.
  • Atributo Src: si un usuario necesita insertar una imagen en una página web, entonces debemos usar el etiqueta con el atributo src. Podemos especificar la dirección de la imagen como el valor del atributo dentro de la comilla doble. Puede usar el atributo src como se muestra a continuación para incluir la imagen en la página web.


src Attribute


  • Atributo Alt: Este atributo se usa como una etiqueta alternativa que se puede usar para mostrar algo si el atributo principal que es etiqueta que no muestra el valor original que se le asigna. Esto puede describir la imagen a un desarrollador que la está utilizando al final de la codificación. Si la imagen principal falla, la imagen alternativa se puede usar para mostrar.
  • El atributo de ancho y alto : este atributo se puede usar para ajustar el alto y el ancho de una imagen.

Example:

Width and Height


<

  • El atributo Href: este atributo se utiliza cuando el usuario desea dirigir a un enlace específico a cualquier dirección. Este atributo se usa junto con la etiqueta. Cuando el enlace se coloca en el atributo href a donde debe dirigirse, se vincula al texto que se muestra dentro de la etiqueta. Cuando el usuario hace clic en este texto, será redirigido a la dirección del enlace. La opción predeterminada para abrir esta página en la misma pestaña. Si utiliza el atributo de destino, puede establecer su valor en _blank. Esto redirigirá a otra pestaña u otra ventana según la configuración de su navegador.

Atributo de datos

HTML también proporciona atributos de datos personalizados que lo ayudan a agregar información relacionada con usted en las etiquetas HTML. Estos no son específicos de HTML5 y se pueden usar en todos los elementos HTML. El atributo data - * nos ayuda a personalizar nuestros propios atributos de datos personalizados, puede almacenar los datos de forma privada en la página o la aplicación.

Para personalizar, los datos se dividen en dos partes:

  1. Nombre del atributo: debe tener al menos un carácter y no debe tener letras mayúsculas. Este nombre también puede tener como prefijo 'data-'.
  2. Valor de atributo: el valor de un atributo puede ser cualquier cadena.

La sintaxis para el atributo de datos es la siguiente:

  • Gitanjali

    • Propiedad de atributo DOM

    Para obtener los objetos NamedNodeMap, se deben usar las propiedades de atributo en HTML DOM. Devolverá el grupo de atributos de nodo. NamedNodeMap también representa la colección de objetos de atributo y se puede acceder por número de índice. Este número de índice comienza en 0.

    La sintaxis para usar esto es: node.attributes

    El valor que se devuelve son los objetos NamedNodeMap que están presentes en la colección de nodos. Si el usuario usa Internet Explorer 8 o cualquiera de las versiones anteriores, la propiedad de atributos devolverá todos los atributos posibles para cualquier elemento y esto puede generar más valores de los esperados.

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Atributos globales

    HTML también proporciona atributos globales que se pueden usar con cualquier elemento HTML. Los atributos son los siguientes.

    • Tecla de acceso : especifica una tecla de acceso directo para activar o enfocar cualquier elemento.
    • Traducir: si se utiliza este atributo, especifica si el contenido del elemento se traducirá o no.
    • Clase: especifica uno o más nombres de clase para un elemento.
    • Título: este atributo especifica información adicional sobre un elemento.
    • Contenteditable: para especificar si el contenido es editable o no, se puede utilizar este atributo.
    • Tabindex: especifica el orden de tabulación de un elemento.
    • Dir: especifica la dirección del texto para cualquier contenido de un elemento.
    • Corrección ortográfica: el usuario puede especificar explícitamente si tiene que revisar la ortografía y la gramática verificadas o no.
    • Arrastrable: especifica si un elemento debe ser arrastrable o no.
    • Dropzone: especifica si los datos arrastrados se copian, mueven o vinculan cuando se sueltan.

    Atributos del evento

    HTML tiene la capacidad de desencadenar acciones cuando se producen algunos eventos. Los atributos del evento pueden ser los siguientes.

    Onload: se dispara una vez que la página ha terminado de cargarse.

    Onmessage: Esto se puede decir como un script que se ejecuta cuando se activa el mensaje.

    Onstorage: este es un script que se ejecutará cuando se actualice un área de almacenamiento web.

    Onerror: este script se ejecuta cuando se produce un error.

    Onpagehide: este script se puede usar cuando un usuario puede navegar fuera de una página.

    Atributos de evento de formulario

    Estos eventos son provocados por acciones dentro de un formulario HTML.

    Onblur: se activa tan pronto como el elemento pierde el foco.

    Onchange: se activa tan pronto como cambia el valor de un elemento.

    Oncontextmenu: se ejecuta cuando se activa un menú contextual.

    Onfocus: se activa tan pronto como el elemento obtiene el foco.

    Oninput: el script debe ejecutarse cuando el elemento recibe una entrada.

    Onsearch: se activa cuando el usuario escribe algo en el campo de búsqueda.

    Oninvalid: se activa cuando un elemento que se ingresa no es válido.

    Atributos clave del evento

    Onkeydown: se activa cuando se presiona una tecla.

    onkeypress: se activa cuando se presiona una tecla.

    Onkeyup: se activa cuando un usuario suelta una clave.

    Atributos de eventos del mouse

    Onclick: se activa cuando el mouse hace clic en un elemento.

    Onmousemove: se activa cuando el puntero del mouse se mueve mientras está sobre un elemento.

    Onmouseip: se activa cuando se suelta un botón del mouse sobre un elemento.

    Onwheel: se activa cuando la rueda del mouse rueda hacia arriba o hacia abajo sobre un elemento

    Atributos de evento de arrastre

    Ondrag: se activa cuando se arrastra un elemento.

    Ondragleave: el script se ejecuta cuando un elemento deja un destino de caída válido.

    Ondrop: se activa cuando se suelta el elemento arrastrado

    Onscroll: el script se ejecuta cuando se desplaza la barra de desplazamiento de un elemento.

    Conclusión - Atributos HTML

    HTML es la tecnología más antigua que se está utilizando para crear diferentes aplicaciones web. Con el tiempo, HTML ha evolucionado gradualmente y proporciona muchas características para los elementos que están presentes. Proporciona una amplia variedad de atributos que ayudan a que la aplicación sea más efectiva. Estos incluyen los atributos básicos, que son los básicos y se usan con mayor frecuencia. También proporciona atributos de internacionalización que permiten cambios de idiomas. El atributo de datos ayuda a almacenar datos y personalizarlos de la manera que el usuario quiere que sean. Con todo esto, también tiene atributos globales que se pueden usar con cualquier elemento y en cualquier lugar. También tiene atributos de evento que se activan cuando se produce cualquier tipo de evento. Como resultado, hace que la aplicación web o página web sea muy interactiva. HTML demuestra que todavía está en el juego de desarrollo de aplicaciones web debido a todas estas características. Con estos, el atributo de estilo que se puede usar con CSS lo hace más hermoso y atractivo de usar. Por lo tanto, haga uso de todos los atributos que están presentes y tenga una aplicación web increíble de su elección de la manera fácil.

    Artículos recomendados

    Esta ha sido una guía para los atributos HTML. Aquí hemos discutido los conceptos y diferentes atributos de HTML. También puede consultar los siguientes artículos para obtener más información:

    1. ¿Qué es HTML en términos simples?
    2. Aprenda cómo funciona HTML
    3. ¿Qué es el XML?
    4. Principales estilos de lista HTML
    5. Comparaciones de HTML vs XML

    Categoría:

    Herramientas de desarrollo web