# ID de HTML

El atributo `id` en [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/) sirve para poder **identificar de manera única** elementos específicos en un documento HTML. Esto permite que puedan ser manipulados mediante [CSS](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-css/) o JavaScript.

## ¿Qué es el HTML ID?

El ID en HTML es un **[atributo HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/atributos-html/) que se utiliza para la identificación única de un [elemento HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-element/)**. Un ID debe ser único en todo el documento HTML; un documento HTML en el que dos elementos comparten un ID no es sintácticamente correcto. El atributo `id` se usa frecuentemente en combinación con CSS o JavaScript para aplicar estilos específicos o realizar acciones concretas en un elemento determinado.

Nota Si deseas aprender HTML, nuestro [tutorial para principiantes de HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/) te puede ayudar.

## ¿Para qué se necesita un ID en HTML?

El ID en HTML puede ser muy útil. Se utiliza siempre que **una acción deba aplicarse a un solo elemento**. Casos importantes para el uso del atributo `id` incluyen:

- **Diseño de la página web con CSS**: con un ID, puedes aplicar reglas de CSS a un solo elemento HTML. Esto es útil cuando deseas resaltar un elemento específico.
- **Interacción con JavaScript**: en JavaScript, se pueden usar los ID para acceder a elementos HTML específicos y cambiar sus propiedades o contenido. Esto es una parte fundamental del desarrollo web dinámico.
- **Hipervínculos y anclas**: los ID se pueden usar para crear puntos de anclaje dentro de una página, permitiendo saltar directamente a una sección específica de la página al hacer clic en un enlace con el ID correspondiente.

Consejo Con el atributo `id`, se le puede asignar una ID a **cualquier** elemento HTML.

## Sintaxis del ID en HTML

Para definir un ID en HTML, debes **añadir el atributo `id` al elemento correspondiente y especificar el nombre de ID deseado**. Observa el siguiente ejemplo de código:

```HTML
<p id="Testid">A este párrafo se le ha asignado la ID “Testid”.</p>
```

Mediante el atributo `id`, se ha asignado la ID “Testid” al párrafo HTML. La utilidad de los ID en HTML se puede ilustrar con este ejemplo más detallado:

```HTML
 
<html> 
<head> 
    <style> 
        #header { 
            background-color: blue; 
            padding: 20px; 
            text-align: center; 
        } 
    </style> 
</head> 
 
<body> 
<h1 id="header">Un ejemplo de ID en HTML</h1> 
<p>El header es un ejemplo de uso de ID en HTML.</p> 
<div class="hash d-none" hidden>hash_239c1dae85da5ab55b458ae5dc5ee27f977e2a31</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body> 
</html>
```

A la [cabecera HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/cabecera-en-html/) se le asigna la ID “header”. Como [CSS está incrustado en el código HTML](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/css-en-html/), las reglas de CSS correspondientes para la ID “header” se aplican a la cabecera.

## Diferencias entre ID y clase en HTML

Tanto el atributo `id` como el atributo `class` se utilizan para identificar y estilizar elementos HTML, pero tienen diferentes características y usos.

- **Unicidad**: un ID debe ser único dentro del documento, mientras que una [clase HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/clases-html/) se puede aplicar a varios elementos, permitiendo que un grupo de elementos se manipule simultáneamente.
- **Especificidad**: los ID tienen una mayor especificidad que las clases. El ID en HTML tiene prioridad cuando se aplican tanto el ID como una clase al mismo elemento HTML. En caso de estilos contradictorios, la clase puede ser sobrescrita por el ID.
- **Referencia en CSS**: para referenciar ID en CSS, se debe usar el símbolo de almohadilla (#). Para referenciar clases, necesitas usar el punto (.).


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/id-de-html/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/id-de-html/) for AI/LLM consumption.