revision:
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.
The id attribute is a global attribute, and can be used on any HTML element. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
"id" attribute used as bookmark:
First, create a bookmark with the "id attribute", then add a link to the bookmark from within the same page or add a link to the bookmark from another page.
using the id attribute in JavaScript:
The "id attribute" can be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the getElementById() method.
<element id=" "></element>
The syntax for "id" in CSS: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.
codes:
<h4 id="myHeader">Hello World!</h4>
<button style="margin-left:3vw;" onclick="changeText()">Change text</button>
<script>
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
codes:
<h1 id="top">HTML - attributes - id</h1>
<p class="spec"><a href="#top">Jump to top</p>
When present, it specifies that the image is part of a server-side image map (an image map is an image with clickable areas). When clicking on a server-side image map, the click coordinates are sent to the server as a URL query string. The coordinates sent to the server are relative to the top-left corner of the image. The coordinates are appended to the end of the URL in the following form: URL?x,y, where x and y are the coordinates of the click.
Note: the ismap attribute is allowed only if the <img> element is a descendant of an <a> element with a valid "href" attribute.
<img ismap>
This attribute has no values. Specifying the ismap attribute with an arbitrary value has the same effect as specifying it with no value.
For example, all of the following declarations have the same effect: ismap, ismap="true", ismap="false", ismap="on", ismap="ismap".
Although Boolean attributes may be used with no value in HTML, for XHTML compatibility, always use the ismap attribute in the following format: ismap="ismap".
Click the image, and the click coordinates will be sent to the server as a URL query string.
codes:
<a href="action_page.php">
<img src="../pics/cartoon.jpg" alt="my website" width="150" height="132" ismap>
</a>
<p class="spec">Click the image, and the click coordinates will be sent to the server as a URL query string.</p>
Move the mouse over the image, and watch the statusbar.
Click on the image, and watch the location bar.
codes:
<a href="#">
<img src="../pics/cartoon.jpg" alt="cartoon" width=300" height="150" ismap>
</a>
<p class="spec">Move the mouse over the image, and watch the statusbar.</p>
<p class="spec">Click on the image, and watch the location bar.</p>