HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
HTML Classes & Ids (Attributes)
The class and the id attributes are mainly part of the CSS section. However, classes and Ids are heavily used in javascript also.
What are HTML Classes
Think of a normal class. It can hold many students under a single name or class - eg grade 12
Likewise a class is used to identify a group of elements which are related
The main purpose of classes and Ids are used to identify each element in the HTML document uniquely. So we can configure and change each elements
When a change is made to a class. All the elements which were part of the class will be affected
We will see a simple CSS example
RunAs you can see the elements which were defined for a particular class got affected by the style. This saves us a lot of time rather than defining the inline style for each element
Classes can also be used in javascript and not just in CSS
The basic idea is that a class is used to uniquelu identify a group of related elements so they can be all accessed at once
Html Ids
Id is more precise and specific. You can only have one element with the particular id name. Which means it can not repeat
This is used when you want to style or access a specific element
Let's see an example
RunIn theory you can have many ids with the same name in the same document. But this is wrong!
So only a single element is styled
You dont have to know the CSS syntax as it is part of the CSS topic. Just understand the concept
Another use of Ids
There is another use of Ids
It is used by links to direct users to a specific location of the same html document or in different html document - this is called HTML bookmarks!
This is an example
RunThis is very useful especially when you want to direct the user to a specific page of an HTMl webpage or document
You also can direct the user to a different section of a different website by adding the # at the end of the url of a web address. However, you must make sure that the selected webpage has an id of the same name or else the HTMl page will load normally
Here is a simple example
Learn coding(HTML and CSS) now
The HTML class and Ids are very useful an important in HTMl coding. So hope you understand the concept