HTML id Attribute - HTML Global Attributes

Definition and Usage

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

Browser Support

Syntax

<element id="id">

Attribute Values

Value	Description
id	Specifies a unique id for the element. Naming rules: Must contain at least one character Must not contain any space characters

How to Use the id attribute to manipulate text with JavaScript

See id Example.

index.html

Example: HTML

<!DOCTYPE HTML>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Output should be:

How to Use the id attribute to link to an element with a specified id within a page

There is a link at the bottom of the page!

index.html

Example: HTML

 <html>
<body>

<h2><a id="top">Some heading</a></h2>

<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>

<a href="#top">Go to top</a>

</body>
</html>

Output should be:

How to Use the id attribute to style text with CSS

Id uses to the css and html Style.

index.html

Example: HTML

<!DOCTYPE HTML>
<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">Horje is the best!</h1>

</body>
</html>

Output should be:

html id attribute

HTML accesskey Attribute	HTML Global Attributes
HTML class Attribute	HTML Global Attributes
HTML contenteditable Attribute	HTML Global Attributes
HTML data-* Attributes	HTML Global Attributes
HTML dir Attribute	HTML Global Attributes
HTML draggable Attribute	HTML Global Attributes
HTML enterkeyhint Attribute	HTML Global Attributes
HTML hidden Attribute	HTML Global Attributes
HTML id Attribute	HTML Global Attributes
HTML inert Attribute	HTML Global Attributes
HTML inputmode Attribute	HTML Global Attributes
HTML lang Attribute	HTML Global Attributes
HTML popover Attribute	HTML Global Attributes
HTML spellcheck Attribute	HTML Global Attributes
HTML style Attribute	HTML Global Attributes
HTML tabindex Attribute	HTML Global Attributes
HTML title Attribute	HTML Global Attributes
HTML translate Attribute	HTML Global Attributes
HTML Global Attributes	HTML Global Attributes

Single Articles

How to Use the id attribute to manipulate text with JavaScript	HTML Global Attributes
How to Use the id attribute to link to an element with a specified id within a page	HTML Global Attributes
How to Use the id attribute to style text with CSS	HTML Global Attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Global Attributes
Uploaded by:	Admin

Reffered: https://www.w3schools.com/tags/att_global_id.asp