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?
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.
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.
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.
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">
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.
