{"id":184,"date":"2024-10-11T03:39:13","date_gmt":"2024-10-11T03:39:13","guid":{"rendered":"https:\/\/techkubo.com\/html\/?p=184"},"modified":"2025-05-10T04:07:23","modified_gmt":"2025-05-10T04:07:23","slug":"html-id-attribute","status":"publish","type":"post","link":"https:\/\/techkubo.com\/html\/html-id-attribute\/","title":{"rendered":"HTML ID Attribute"},"content":{"rendered":"\n

The id<\/code> attribute uniquely identifies an HTML element within a page. Each ID must be unique, making it useful for linking, styling, and scripting specific elements.<\/p>\n\n\n\n

<\/p>\n\n\n\n

HTML ID Attribute Syntax<\/strong><\/h2>\n\n\n\n

Explanation of Syntax:<\/strong><\/p>\n\n\n\n

    \n
  • tagname<\/code>: The name of the HTML element (e.g., <div><\/code>, <h2><\/code>).<\/li>\n\n\n\n
  • id=\"unique_id\"<\/code>: The id<\/code> attribute provides a unique identifier for the element.<\/li>\n<\/ul>\n\n\n\n
    <tagname id="unique_id">Content<\/tagname><\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    HTML ID Attribute Example Code<\/strong><\/h2>\n\n\n\n
    Explanation of Code:<\/strong><\/p>\n\n\n\n
      \n
    • The code starts with the <!DOCTYPE html><\/code> declaration and the opening <html><\/code> tag.<\/li>\n\n\n\n
    • The <head><\/code> section includes metadata and a CSS style for the #main-content<\/code> ID, which gives it a light blue background and padding.<\/li>\n\n\n\n
    • The <body><\/code> section contains:\n
        \n
      • An <h1><\/code> tag with a welcome message.<\/li>\n\n\n\n
      • A <div><\/code> tag assigned the unique ID “main-content,” allowing for specific styling and identification. Inside the <div><\/code>, a <p><\/code> tag describes the content area.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • The id<\/code> attribute is beneficial for referencing specific elements in CSS and JavaScript, ensuring that each element can be individually styled or manipulated without affecting others.<\/li>\n<\/ul>\n\n\n\n
        <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>ID Attribute Example<\/title>\n    <style>\n        #main-content {\n            background-color: lightblue;\n            padding: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Welcome to My Website<\/h1>\n    <div id="main-content">\n        <p>This is the main content area with a unique ID.<\/p>\n    <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        <\/p>\n\n\n\n
        HTML Labs<\/strong><\/h2>\n\n\n\n