Is it okay to use an id for <p> tags?

Question

My coworker is telling me I shouldn't use id's for paragraph tags... I think it's the way to go if you know you're only using that kind of paragraph once on the page.

He also says that all elements on a page should only use class and not id, unless you are defining a header, container, or footer.

I am fresh out of college and I learned to use id for things that will only show once on a page, while using class for things that will show multiple times on a page.

Which way is proper?

Answer 1

I'd say it's fine as long as you know that the paragraph will only be used once on the page.

An example might be a piece of company info that you want to appear on multiple pages but be styled in a particular way. Giving that an id singles it out as unique and allows you to style it as such.

The class attribute should be used for styling a number of controls in a similar way (i.e. all those that belong to that class). For example, report totals might always need to be large and bold, so the encompassing tags would be given a reportTotals class. There might be more than one report and more than one total per page, but they should all look the same.

Answer 2

Yes, it's OK. Every DOM member can have an ID. There is nothing fundamentally wrong with a <p> tag using an ID.

Now, for applying CSS may be the case that is better for you using a class attribute instead of an id in <p> case because you might want to apply that style to several paragraphs. But it's just a matter of convenience.

Answer 3

From a semantic point of view, I would say that if the ids help split up the document structurally then using ids makes a lot of sense. For instance, you may have:

<p id="beginParagraph" ...> </p> and <p id="endParagraph" ...> </p>

that help easily identify and locate your beginning and ending paragraphs. Keep in mind that you should not have duplicate ids however, and the example above could easily get out of hand if you have many paragraphs and wanted to add an id for each.

Check out this article on Classes on Ids for other reasons why one might be better over another:

http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

Answer 4

Use an id to refer to a specific element. Use class to refer to all elements of a specific type.

I think [you should use id on a paragraph tag] if you know you're only using that kind of paragraph once on the page.

You shouldn't use id just because you only happen have one of them on your page. You should use id when you want to be sure to only affect that one specific element, both now and in the future when other people add more paragraphs. If you have a specific "kind" of paragraph there is nothing wrong with using a class to represent this, even if that class currently only has one member.

Answer 5

I find the use of ids for HTML elements, specifically paragraph tags, is very useful when running automation tests using tools such as Selenium or in my current project that uses AngularJS, when running end-to-end tests using Protractor. It is much easier to make expectations by element ids than using class selectors.