When you start with Basic HTML, most of your coding would be in generic <div> tags with inline styling and no CSS files. As you get more comfortable with HTML, you will come across classes. But what is a class in HTML, and why should we use them?
Class attributes are added to HTML files to help make sites more attractive (with CSS) and functional (with Javascript). In a CSS style sheet, the class attribute is used to point to a class name of a specific element. JavaScript can also utilise class names to access and alter the element’s functionality.
We use classes, so we no longer need to style inline, which is considered bad practice for these 6 reasons.
The rest of this article will cover some basic do’s and don’ts regarding classes and some coding examples. Feel free to jump ahead to the section that will help you the most.
How do you assign a class in HTML?
The class attribute is assigned to an element inside the opening tag of the element. The syntax or format of assigning a class normally looks like this: class= “yourclassname”
Below is an example code of how you can assign the class name of “Fruit” to a <div> element within the basic HTML document structure.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="fruit">
<h2>Pear</h2>
<p>I really like Pears</p>
</div>
</body>
</html>
Bear in mind that the above uses a <div> tag for simplicity. A better practice would be to use Semantic HTML for these 4 Reasons.
How do you name a class in HTML?
One of the first things to consider when naming classes, or anything when coding, is “should I use camel case”? My short answer is unless the language you are writing in requires you to use camel case – don’t do it.
Firstly camelCase is harder to read, and secondly, it is a nightmare to maintain. I have spent countless hours looking for a “bug” because of a calling a class with incorrect capitalisation.
When naming a class in HTML (or any language), you want to be descriptive. Try and stay away from naming elements letters, or something obscure. It will be very difficult to maintain and make it harder for other developers to read and understand your code.
Once you have come up with a descriptive name for your class, I suggest you apply the BEM approach.
BEM is a commonly used naming convention; while it may look strange and even complicated at first glance, it’s pretty simple to understand, and it helps!
Imagine you have a car. The class name of your car would be “car”. But your car is also made up of elements, like the wheels.
In HTML, when an element wraps another element, the wrapped element is called a child element. Using BEM, all children are identified using two underscores and the name of the child element. In this case, the class name for the wheels on your car would be “car__wheels”.
Now imagine you have two cars. One car is red, and one car is blue. Both car elements are exactly the same in structure – they both have wheels, but a characteristic of the main element is different. The main element “car” is our parent element in this case.
When you are adjusting a parent element you use two hyphens to denote the different classes. In this example, the red car would have the class name “car—red”
Below is a code example of exactly the above scenario within two <div> tags.
The <div> is the parent tag while the <p> is the child tag.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="car--red">
<p class="car__wheel">Wheel 1</p>
<p class="car__wheel">Wheel 1</p>
<p class="car__wheel">Wheel 1</p>
<p class="car__wheel">Wheel 1</p>
</div>
</body>
</html>
What is the difference between an Id and a class in HTML
When I started my coding journey, I quickly wondered what the difference between an ID and a class in HTML was.
The main distinction between an id and a class is that “id” is unique to a document or page and can only be used to one element, but “class” may be applied to numerous components on the page.
But there is a very specific reason why the “id” attribute exists in HTML. You can find out what that is in this article.
Conclusion
Adding classes to your HTML elements will help you make your files more manageable and maintainable as you can now take advantage of a separate CSS file rather than styling inline. If adding a CSS file sounds intimidating – don’t let it be, we wrote this article on how to connect a CSS file to your HTML document.
Did you know about the BEM convention, and have you tried applying it?
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
