0

I have two elements inside a container. I don't need to give the two inner elements any id or class since they require no CSS or JS references.

Is giving them an id just for the purposes of communicating their purpose good practice? Or should I leave an HTML comment instead?

4

HTML provides you with the means to comment you markup

<div id="this_is" class="not_a_comment">Hello</div>
<!-- this is a comment -->

id is used to refer to elements from your javascript files

class is used to apply css style classes on your elements

As a rule of thumb don't add any attributes to an element when you first write it, but only when you actually need it. this will keep your markup clean.

2

It would have been nice to have seen a code sample, but I would recommend using a HTML5 semantic element name if it serves the same purpose as a id or a comment. Example: You could use <nav> instead of <div id="nav"> or <footer> instead of <div id="footer">

  • Agreed. Side note: I attempt to keep questions as general as possible so as to benefit as wide an audience as possible. I think it's better than having the question for my specific code sample. – Garrett Apr 29 '17 at 22:01
1

Neither id nor class is meant for comments. If you think some type of explanation is needed place a comment. Do not surprise your readers, even if it is yourself in a few months time.

That said then you can give an element a meaningful id, even if it is not used for javascript or css right now. If that is sufficient as an explanation for what the element will contain and how it should be handled then that could be enough to solve your problems.

But be sure that your id is not some often used words so that there might be conflicting ids in the future. Make it very specific.

1

Short answer: do whatever makes your code easier to read, easier to maintain, and easier to test, regardless of rules you may find on the internet.

Somewhat longer answer:

If they are an element that you will need to visit for the purposes of testing, you probably should give it an id. Elements with unique identifiers are much easier to find with automated tools than those without.

I also think that ids also help you conceptually organize your code. For example, everything in the header might go inside a div with the id of 'page-header', the body in a div named 'page-body', and the footer in 'page-footer'. within the main body you might have a navigation section and a content section, so it makes sense to have a div named 'page-navigation' and 'page-content', and so on.

Even if you don't actually use those ids anywhere else, it helps make the page a bit more self-documenting. You don't need to do this for every element, but it helps when you use it for every major page element or section. Plus, as stated in the first paragraph, it sets the stage for making it easier to test the page with automated tools.

The bottom line is this: don't try to find dogmatic rules to follow. Instead, strive to create code that is easy to read, easy to maintain, and easy to test.

  • Better if everything in the header went inside a <header> tag. – user949300 Jun 25 at 5:42
0

There is no any need for unnecessary id and class so there is better to add comment instead of id or class to communicating the purpose of HTML elements. comments is a way to add notes into the code which will not display when the HTML is rendered by the browser.

-2

I think that is mostly just a matter of preference. I don't see how it would cause any issues or use any additional overhead/resources. The only thing is that you must make sure that you never call those inside an included file. Make sure they are distinct so that you know what they are, and they have no chance of ever being accidentally referenced in some script or CSS in the future. Other than that, go ahead. I personally keep a pretty good record of everything like that in NotePad++ and OneNote, so as not to cause conflicts in the future. Good source control is a must.

  • 3
    All the things you list to be careful of are also reasons not to do this at all. Not to mention cluttering up the DOM with unused attributes when HTML already has a comment method. – Rob Dec 28 '16 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.