Nabila Abubakar

Posted on Nov 6, 2023 • Edited on Nov 21, 2023 • Originally published at beela303.hashnode.dev

IDs vs Classes in HTML

#webdev #html #css #beginners

INTRODUCTION

IDs and classes can be confusing especially to new developers and I have to admit when I first got into coding I didn't know which to use. I made this guide to help web developers struggling to grasp this.

*WHAT IS AN ID?
*
An ID is a unique identifier that can be used only once in a HTML file.

<div id="id-name">

Content

</div>

WHAT IS A CLASS?

A class can be used as many times as you want in a HTML file.

<div id="id">
    <div class="class-name">
    </div>

    <div class="class-name">
    </div>

    <div class="class-name">
    </div>
</div>

DIFFERENCE BETWEEN AN ID AND A CLASS

Let's say we have a project named portfolio, this project has three HTML files :

Index.html

Web.html

About.html

Each HTML file can only use a particular ID once but a class many times. If you want to use a particular style with the name "class-name" in a HTML file more than one time then a class is most suitable but if it's only going to be used once then an ID is for you.

I hope this article was able to help you understand the difference, comment if you have any question concerning this.