Question

For some time I’ve been making websites, but have never really seen discussion of the proper usage of the container tags. I’ve seen any number of different types of content in the collection tags, but it usually seems that the page creator just picks a style they like and sticks with it.

The main discrepancy in my mind is that between

<p> <div> 

but I’d also like opinions regarding

<span> 

and any others I may be forgetting.

Answer 1

HTML was originally created to put the content of documents into some sort of structure understandable to computers. With that in mind, the p tag is supposed to hold anything that would be structured as a paragraph if the content of the page were to be turned into a printed document. The div and span elements are reserved as general-use containers to facilitate formating and grouping of related elements to provide additional levels of structure, perhaps correlating to pages in a text document.

In some cases, p tags should contain other elements, such as anchor (a), image (img) and other in-line elements, because they relate directly to the content of the rest of the paragraph and it makes sense to group them that way, or the text of the rest of the paragraph provides a more in-depth description.

If there is not additional description of those elements, however, it does not make sense to place them in a paragraph simply as a convenient container; a div would be more appropriate. In general, a paragraph is supposed to contain one paragraph of text and any directly related or described elements. Nothing else makes much sense in a paragraph.

---

UPDATE: HTML5 also adds a number of other semantic ‘container’ elements, including article, nav, header, section, and aside.