{"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 con el mismo id en un documento HTML. Usar el atributo id El atributo id especifica una identificaci\u00f3n \u00fanica para un elemento HTML. El valor del atributo id debe ser \u00fanico dentro del […]<\/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":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"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 con el mismo id en un documento HTML. Usar el atributo id El atributo id especifica una identificaci\u00f3n \u00fanica para un elemento HTML. El valor del atributo id debe ser \u00fanico dentro del…","_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}]}}