Inicio > Blog > Atributos HTML Parte 1

Atributos HTML Parte 1

HTMLATRIBUTOSCARACTERISTICASUI

Introducción

HTML (Hyper Text Markdown Language) es el componente mas básico de la web, es lo que define el significado y la estructura de un sitio web y su contenido. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia y presentación de una pagina web, como lo es CSS o la funcionalidad y comportamiento, con JavaScript

HTML utiliza marcas para etiquetar el contenido de un sitio o una página web y mostrarlo al usuario, estas marcas incluyen “elementos” especiales como <head>, <title>, <body>, <header>, <footer>, <a>, <p>, <span>, <div> y muchísimas otras mas. En el post anterior vimos teníamos una etiqueta <div> que tenia un id="root, el id es un atributo de la etiqueta div que acabábamos de hacer.

Hoy estudiaremos los atributos que pueden contener las etiquetas HTML, los atributos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

Los atributos se utilizan para almacenar mas información sobre los elementos de una etiqueta HTML, constan de una relación nombre = "valor" y se colocan el la etiqueta de apertura, se recomienda encarecidamente escribir sus valores entre comillas para evitar errores, aunque no es obligatorio.

Atributos globales

Son atributos comunes para todas los elementos HTML; se pueden usar en todos los elementos, aunque es posible que no tengan ningún efecto en algunos.

Los atributos globales se pueden especificar en todos los elementos HTML, incluso aquellos no especificados en el estándar, esto significa que cualquier elemento no estándar debe permitir estos atributos, por ejemplo, los navegadores compatibles con HTML5 ocultan el contenido marcado con <foo hidden>...</foo> aunque <foo> no sea un elemento HTML válido.

Entre los atributos globales mas utilizados están:

  • id: define un identificador (ID) que debe ser único para todo el documento. Su propósito es identificar el elemento al vincularlo al escribir un script o aplicarle un estilo (con CSS). Ejemplo: <div id="root"></div>
  • class: Es una lista separada por espacios de las clases del elemento. Las clases permiten que CSS y JavaScript seleccionen y accedan a los elementos específicos a través de los selectores de clases o funciones como el metodo getElementByClassName Ejemplo: <div class="container main-content"></div>
  • style: contiene declaraciones de estilo CSS que se aplicarán al elemento. Hay que tener en cuenta que se recomienda que los estilos CSS se definan en un archivo o archivos separados. Este atributo y el elemento <style> principalmente tienen el propósito de permitir un estilo rápido, por ejemplo, con fines de prueba. Ejemplo: <div style="color: blue; font-size: 2em">Hola mundo</div>
  • title: contiene un texto que representa información de advertencia relacionada al elemento que pertenece. El valor del atributo title aparece cuando se pasa el cursor por el elemento. Ejemplo: <div title="enviar formulario">Enviar</div>
  • data-*: forma una clase de atributos, denominada atributos de datos personalizados que permite el intercambio de información de propiedad entre el HTML y su representación en el DOM que pueden utilizar los scripts Ejemplo: <div data-user-id="12345" data-role="admin"></div>
  • lang: establece el idioma de un documento o un elemento Ejemplo: <HTML lang="es">
  • tabindex: es un numero entero que indica si un elemento puede tomar el foco de entrada (es enfocable) si debe participar en la navegación secuencial del teclado.
    • Un valor negativo significa que el elemento se debe poder enfocar, pero no es accesible mediante la navegación secuencial del teclado.
    • 0 significa que el elemento se debe poder enfocar y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma.
    • Un valor positivo significa que el elemento se debe poder enfocar y ser accesible mediante la navegación secuencial del teclado, el orden en el que se enfocan los elementos es el valor creciente del tabindex. Ejemplo:
<div>
  <p>Elementos para ver el tab index, selecciona el primer input y presiona tabulacion</p>
  <input type="text" tabindex="1" placeholder="haz click aqui">
  <input type="text" tabindex="3" placeholder="y este es el tercero">
  <input type="text" tabindex="2" placeholder="este es el segundo">
  <input type="text" tabindex="-1" placeholder="y este no se selecciona">
</div>

  • aria-*: Proporciona información adicional para la accesibilidad. Los atributos ARIA mejoran la accesibilidad de las aplicaciones web. Ejemplo: <button aria-label="Cerrar ventana">X</button>

  • hidden: Es un atributo universal con el que se puede ocultar un elemento. Se puede utilizar en elementos que se necesita ocultar hasta que el usuario no haya iniciado sesión. Ejemplo:

<p>El elemento de abajo estará oculto</p>
<p hidden> Este elemento está oculto</p>
  • dragable: es un atributo que indica si un elemento es arrastrable (draggale) o no. Ejemplo: <p draggable="true">Hazme click y arrestrame</p>

Ejemplos:

See the Pen Atributos HTML by MIguel José (@borgesmj) on CodePen.

Estos son 10 de los atributos globales mas utilizados, en otra publicación veremos algunos de los atributos específicos. Recuerda visitarme en mis redes sociales, las encontraras en el pie de página.

Fuente: