HTML Tutorial for Beginners 14 – IDs and Classes
In our previous HTML tutorial, we looked at how to create a basic web page. We will now look at how to add some more functionality to our page by using IDs and classes.
An ID is a unique identifier that can be used to target an element on a page. For example, we could create a button with the ID “submit” and then use JavaScript to execute a function when the button is clicked.
A class is a group of elements that can be styled in the same way. For example, we could create a class called “button” and then style all the buttons on our page with the same properties.
To add an ID or a class to an element, we use the id and class attributes respectively. For example, here is a button with the ID “submit” and the class “button”:
We can then use JavaScript to target the button with the ID “submit” and execute a function when it is clicked:
document.getElementById(“submit”).onclick = function() { // Code to execute when button is clicked };
We can also use CSS to style the button with the class “button”:
.button { background-color: blue; color: white; }
This will style all buttons on the page with a blue background and white text.
