The id attribute on an element assigns an identifier to that element.
The identifier must be unique across the page.
The id is a global attribute that can be applied to any HTML element.
A form with elements.
Each element has its own unique id.
<form id="userform" action="/tutorial/action.html" >
<fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
<legend id="userlegend">User Information</legend>
<input id="firstname" type="text" placeholder="First name" name="firstname"><br /><br />
<input id="lastname" type="text" placeholder="Last name" name="lastname"><br /><br />
<input id="email" type="text" placeholder="Email" name="email"><br /><br />
<input id="usersubmit" type="submit" value="Submit" />
</fieldset>
</form>
The id attribute serves as a unique identifier for an HTML element.
The id value must be unique on the web page.
JavaScript uses the id to quickly locate an element on the page.
The id can also be used for CSS styling.
Tip: id is a global attribute that can be applied to any HTML element.
<tag id="value" />
| Value | Description |
|---|---|
| value | A unique alphanumeric string. The id value must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). |
An id attribute on an <input> element.
Clicking the button will toggle the background color.
<form>
<label for="city">City</label>
<input type="text" id="city" name="city"
style="background-color:white;"/>
</form>
<br /><br />
<button onclick="toggle();">Toggle background</button>
<script>
let toggle = () => {
let element = document.getElementById("city");
if (element.style.backgroundColor === "white"){
element.style.backgroundColor = "seashell";
} else {
element.style.backgroundColor = "white";
}
}
</script>
The id attribute is a global attribute that can be applied to any element.
Click on any tag for an example of that element using an id attribute.
| Tag with id | Description |
|---|---|
| <a> | Creates a link (hyperlink) to another page |
| <abbr> | Defines an abbreviation |
| <address> | Specifies contact information for the page's author |
| <area> | Specifies a map area for an image |
| <article> | Defines a container for independent and self contained text |
| <aside> | Creates a content area that is related to the primary content on a page |
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <b> | Specifies bold text |
| <base> | Sets the base URL for all relative URLs on a page |
| <blockquote> | Defines a section with text quoted from another source |
| <body> | Specifies a container for the page's content with text, links, images, etc. |
| <button> | Creates a clickable button that can contain text or an image |
| <canvas> | Creates a graphics container where JavaScript can draw. |
| <caption> | Specifies a caption for a table |
| <code> | An element that is used to display computer code |
| <col> | Specifies column properties for a table |
| <colgroup> | Specifies one or more columns for table formatting purposes. |
| <data> | Links content to a machine-readable set of related data |
| <datalist> | Specifies a list of options for a textfield (<input>) element |
| <dd> | Adds a description of a term or name to a <dl> element |
| <del> | Marks deleted text |
| <details> | A control that can show and hide additional details |
| <div> | Creates a division or section on a page |
| <dl> | Defines a description list |
| <dt> | Adds a term or name to a <dl> element |
| <em> | Marks text that needs emphasis |
| <embed> | Creates a container for an external resource or plug-in |
| <fieldset> | Groups related form elements and displays a box with a legend around these |
| <figcaption> | Adds a caption to a <figure> (image) element |
| <figure> | Displays self-contained content, usually an image |
| <footer> | Defines a footer section on a page or a section of a page |
| <form> | Defines a data entry area that contains input elements |
| <h1>-<h6> | Defines text headings in 6 different sizes |
| <header> | Defines a header section on a page or a section of a page |
| <i> | Specifies italic text |
| <iframe> | Creates a frame in which another web page can be embedded |
| <img> | Creates an image |
| <input> | Creates an input field in which data can be entered |
| <ins> | Marks inserted text |
| <kbd> | Specifies keyboard input often with CTRL, SHIFT, or ALT |
| <label> | Creates a label or brief description before input elements |
| <legend> | Defines a caption for a fieldset |
| <li> | Defines a list item. Used in <ol> and <ul> elements |
| <link> | Defines a link to an external source, such as a style sheet |
| <main> | Specifies a container for the main content of the page |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <mark> | Displays marked or highlighted text |
| <meta> | Provides metadata about the web page |
| <meter> | Creates a measurement control, like a guage |
| <nav> | Creates a container for navigation links |
| <noscript> | When the browser has disabled scripting, the noscript content displays |
| <object> | Embeds external objects in a page, such as, audio, video, image, or PDF |
| <ol> | Creates a numerically or alphabetically ordered list |
| <optgroup> | Groups related options in a <select> element (dropdown control) |
| <option> | Adds an item to a <select> element (dropdown control) |
| <output> | Displays output results of a calculation |
| <p> | Creates a paragraph |
| <param> | Adds parameters to an <object> element |
| <picture> | Adds images with a bit more flexibility than the <img> element |
| <pre> | Displays pre-formatted text in fixed-width font -- usually computer code |
| <progress> | Creates a control that displays progress of a task |
| <q> | Creates a short quotation enclosed with quotation marks |
| <samp> | Displays sample output from coumputer code |
| <script> | Adds JavaScript to a page. Either server-side or client-side |
| <section> | Defines a piece of content that can stand on its own |
| <select> | Creates a dropdown control |
| <small> | Displays text in a smaller font size |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <span> | Container for one or more inline text elements |
| <strong> | Indicates text that is important or with high urgency |
| <style> | Adds CSS style elements to a page |
| <sub> | Marks subscript text where characters display lower and in smaller font |
| <summary> | Adds a heading to a <details> element. Clicking it toggles the details |
| <sup> | Marks superscript text where characters display higher and in smaller font |
| <svg> | Creates an vector image |
| <table> | Creates an HTML table with rows and colums, much like a spreadsheet |
| <tbody> | Marks the table body in an HTML table |
| <td> | Creates an HTML table cell |
| <template> | Creates a hidden content holder that can be copied by JavaScript |
| <textarea> | Creates a multi-line text input control, for example for messages |
| <tfoot> | Marks the table footer in an HTML table |
| <th> | Creates an HTML table header cell |
| <thead> | Marks the header rows in an HTML table |
| <time> | Creates a human-readable date/time item |
| <tr> | Creates a table row with either <th> or <td> elements |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <u> | Specifies underlined text |
| <ul> | Creates an unordered, bulleted list |
| <var> | Defines its content as a variable |
| <video> | Creates a video player on a page |
Here is when id support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
