html – class used to apply styling to muliple elements but using id also,we can apply styles.what is the difference?-ThrowExceptions

Exception or error:
<!DOCTYPE html>

<html>
    <head>
        <style>
        #p01
        {
        color: blue;
        }
        </style>
    </head>
    <body>
        <div id="p01">

            <p>I am different.</p>
            <p>Second Option</p>

        </div>

    </body>
</html>

 
<!DOCTYPE html>
<html>
    <head>
        <style>
         .p01 {
          color: blue;
         }
        </style>
    </head>
    <body>
        <div class="p01">

            <p>I am different.</p>
            <p>Second Option</p>

        </div>

    </body>
</html>

Many websites mentioned id is used when the styling is unique to only a particular element but id can also be used to more than one element with the same id.
For the above two HTML codes I am getting the same output. Then what is the exact difference between them?

How to solve:

It’s okay when you’re doing an assignment (not sure if your tutor will be satisfied).
It’s definitely not okay when you’re working on a real project.
Not good for SEO, Google lighthouse will mark it as a bad practice and you may never know how Javascript will work on multiple ids in different browsers.
Read this for more information: Two HTML elements with same id attribute: How bad is it really?

Leave a Reply

Your email address will not be published. Required fields are marked *