{"id":196,"date":"2024-05-21T09:42:20","date_gmt":"2024-05-21T07:42:20","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=196"},"modified":"2024-05-21T09:42:20","modified_gmt":"2024-05-21T07:42:20","slug":"37-el-atributo-id","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/37-el-atributo-id\/","title":{"rendered":"37. El atributo id"},"content":{"rendered":"\n

El atributo id<\/em><\/strong> es usado para especificar un \u00fanico id<\/strong> para un elemento HTML. No se puede tener m\u00e1s de un elemento con el mismo id<\/strong> en un documento HTML.<\/p>\n\n\n\n

Usar el atributo id<\/h2>\n\n\n\n

El atributo id<\/em> <\/strong>especifica una identificaci\u00f3n \u00fanica para un elemento HTML. El valor del atributo id<\/em> <\/strong>debe ser \u00fanico dentro del documento HTML.<\/p>\n\n\n\n

El atributo id<\/em> <\/strong>se usa para apuntar a una declaraci\u00f3n de estilo espec\u00edfica en una hoja de estilo. Tambi\u00e9n lo utiliza JavaScript<\/strong> para acceder y manipular el elemento con la identificaci\u00f3n espec\u00edfica.<\/p>\n\n\n\n

La sintaxis para id<\/em> <\/strong>es: escriba un car\u00e1cter hash (#), seguido de un nombre de id. Luego, define las propiedades CSS<\/strong> entre llaves {}.<\/p>\n\n\n\n

En el siguiente ejemplo, tenemos un elemento <h1><\/em><\/strong> que apunta al nombre de identificaci\u00f3n \u00abmyHeader\u00bb. Este elemento <h1><\/em><\/strong> se dise\u00f1ar\u00e1 de acuerdo con la definici\u00f3n de estilo #myHeader en la secci\u00f3n de encabezado.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}<\/strong>
<\/style>
<\/head>
<body><h1 id=\u00bbmyHeader\u00bb>My Header<\/h1><\/body>
<\/html><\/p>\n\n\n\n

\n

Nota<\/strong>: \u00a1El id<\/em> <\/strong>distingue entre may\u00fasculas y min\u00fasculas!<\/p>\n\n\n\n

Nota<\/strong>: El id<\/em> <\/strong>debe contener al menos un car\u00e1cter, no puede comenzar con un n\u00famero y no debe contener espacios en blanco (espacios, tabulaciones, etc.).<\/p>\n<\/blockquote>\n\n\n\n

Diferencias entre class e id<\/h2>\n\n\n\n

Un class<\/em> <\/strong>puede ser utilizado por varios elementos HTML, mientras que un id<\/em> <\/strong>solo debe ser utilizado por un elemento HTML dentro de la p\u00e1gina.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n<style>\n\/* Style the element with the id \"myHeader\" *\/\n#myHeader {\nbackground-color: lightblue;\ncolor: black;\npadding: 40px;\ntext-align: center;\n}\n\n\/* Style all elements with the class name \"city\" *\/\n.city {\nbackground-color: tomato;\ncolor: white;\npadding: 10px;\n} \n<\/style>\n<\/head>\n<body>\n\n<h2>Difference Between Class and ID<\/h2>\n<p>Un nombre de clase puede ser usado por m\u00faltiples elementos HTML,\nmientras que un id s\u00f3lo puede ser utilizado por un elemento<\/p>\n\n<!-- An element with a unique id -->\n<h1 id=\"myHeader\">My Cities<\/h1>\n\n<!-- Multiple elements with same class -->\n<h2 class=\"city\">London<\/h2>\n<p>London is the capital of England.<\/p>\n\n<h2 class=\"city\">Paris<\/h2>\n<p>Paris is the capital of France.<\/p>\n\n<h2 class=\"city\">Tokyo<\/h2>\n<p>Tokyo is the capital of Japan.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
Marcadores HTML con ID y enlaces<\/h2>\n\n\n\n
Los marcadores HTML se utilizan para permitir que los lectores salten a partes espec\u00edficas de una p\u00e1gina web. Los marcadores pueden ser \u00fatiles si su p\u00e1gina es muy larga. Para usar un marcador, primero debes crearlo y luego preparar un enlace. Luego, cuando se hace clic en el enlace, la p\u00e1gina se desplazar\u00e1 a la ubicaci\u00f3n con el marcador.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
Primero creamos un identificador con el atributo id<\/em><\/strong><\/p>\n\n\n\n
<h2 id=\"C4\">Chapter 4<\/h2><\/pre>\n\n\n\n
Despu\u00e9s a\u00f1adimos un enlace al identificador en la misma p\u00e1gina.<\/p>\n\n\n\n
<a href=\"#C4\">Jump to Chapter 4<\/a><\/pre>\n\n\n\n
Tambi\u00e9n podemos a\u00f1adir un enlace al identificador de otra p\u00e1gina de la siguiente manera.<\/p>\n\n\n\n
<a href=\"html_demo.html#C4\">Jump to Chapter 4<\/a><\/pre>\n\n\n\n
Usando id en Javascript<\/h2>\n\n\n\n
JavaScript<\/strong> tambi\u00e9n puede usar el atributo id<\/em> <\/strong>para realizar algunas tareas para ese elemento espec\u00edfico. JavaScript<\/strong> puede acceder a un elemento con una identificaci\u00f3n espec\u00edfica con el m\u00e9todo getElementById()<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<body>\n\n<h2>Using The id Attribute in JavaScript<\/h2>\n<p>JavaScript can access an element with a specified\n id by using the getElementById() method:<\/p>\n\n<h1 id=\"myHeader\">Hello World!<\/h1>\n<button onclick=\"displayResult()\">Change text<\/button>\n\n<script>\nfunction displayResult() {\ndocument.getElementById(\"myHeader\").innerHTML = \"Have a nice day!\";\n}\n<\/script>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
El atributo id es usado para especificar un \u00fanico id para un elemento HTML. No se puede tener m\u00e1s de un elemento…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":36,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-196","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"El atributo id es usado para especificar un \u00fanico id para un elemento HTML. No se puede tener m\u00e1s de un elemento...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/196\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/196\/revisions\/198"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}