HTML5 ID attribute tutorial with examples for beginners

id Attribute and Class in HTML

HTML id attribute, class and its usage

id attribute and class its usage in HTML

In this attribute id we use for a unique identity for an HTML element, it can be used by CSS and JavaScript to perform id based tasks with specified value. A hash # symbol will specifies id element in CSS.

Example: Using CSS to style an element with id “firstHeader”: <style> #firstHeader{ background-color: lightgreen; color: yellow; padding: 25px; text-align: left; } </style> <h2 id=” firstHeader”> First H2 Header </h2>

This id attribute can use for any of HTML element. These are case-sensitive id values we need to identify that case-sensitive manner and this id require at least one character. While creating id values we need not to give spaces, commas, etc.



learn html5 tutorial for beginners

Class and ID usage
HTML5 unique id

In Html element can only have one unique id that belongs to that single element to use, using of class name can also be use multiple times in elements.

Example: <style> /* Style the element with id “#firstHeader” */ #firstHeader{ Background-color: lightgreen; color: yellow; padding: 25px; text-align: left; } /* Style all elements with class name “school” */ .school { background-color: lightyellow; color: black; padding : 20px; } </style> <! --A unique element header id --> <h2 id=”firstHeader”> My Schools </h2> <! --same element using multiple times --> <h2 class=”school”> St. Patrics School </h2> <p>This is basic schooling level.</p> <h2 class=”school”> St. Johns School </h2> <p>This is Junior schooling level.</p> <h2 class=”school”> Public School </h2> <p>This is advanced schooling level.</p>

Web development course Data Science courses: Web Development
Online courseOnline Courses: Include Certification
Harisystems is optimized for learning, testing and training. courses are designed to be simplified to improve reading and basic understanding for beginners to expert level. Tutorials and examples are constantly reviewed to avoid errors, however we cannot warrant full correctness of all content. if any found need to correct write us at info@harisystems.com. we Harisystems is not responsible for any with this tutorials, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2007-2023 by Harisystems. All Rights Reserved.
Copyright © Harisystems 2023