2

I often come across webpages where, instead of using a separate <div> element to add specific styles, a <p> tag is used.

I would be interested in knowing:

  1. Which is the semantically proper way to add styles - using a <p> tag or a <div> tag?
  2. What are the advantages of using a <p> tag? Does it have anything to do with inheritance?
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Nikhil Panikkar
  • 123
  • 7
  • 5
    From the definitions: The
    tag defines a division or a section in an HTML document. The

    tag defines a paragraph.

     – stackErr Sep 09 '14 at 12:54
  • possible duplicate of [What is the difference between

    and

    ?](http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div)
     – timo Sep 09 '14 at 12:57
  • 2
    You should use tags for semantic mark up and then style them as you wish. For example, you may have an

    that has a large font size and an

    that has a smaller font size. If you decided that your document heading for a certain page actually looked better using the size associated with the

    , you would still use the

    tag, but use a style to size it the same as the

    . Bootstrap 3 has a set up that would handle this in the following way

    your title

     – steakpi Sep 09 '14 at 12:57
  • Glad to be of help :) – steakpi Sep 09 '14 at 13:03

2 Answers2

6

Which is the semantically proper way to add styles

There isn't one. Semantics and styles are largely orthogonal considerations. They are related only in so far as most of the time you will want to present semantic information to the reader in a consistent way.

Write semantic markup, then write CSS that describes how you want it to look.

What are the advantages of using a <p> tag?

It defines a paragraph. (A <div> defines a block with no associated semantics).

Does it have anything to do with inheritance?

No.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • What do you mean by it doesn't have anything to do with inheritance? – VeeeneX Sep 09 '14 at 12:57
  • 3
    @VeeeneX — I'm not sure how to respond to that short of writing a detailed explanation about what inheritance in CSS is. It has nothing to do with the reasons you would choose one element over an other though. – Quentin Sep 09 '14 at 12:59
-1

You could do almost anything with any tag but it's best to follow the general guidelines.

If you can put text in a <p> instead of a <div>, cause it will help screen readers and so.

dwana
  • 413
  • 3
  • 13
  • Can you elaborate a bit more? – Nikhil Panikkar Sep 09 '14 at 13:04
  • 2
    With a

    tag you are telling the browser/readers/search engines that the text inside is a paragraph of text and has some importance to the page. A

    tag is used purely for page structure. Search engines will for the most part ignore the
    tag. However, if you had a

    some search engines can associate the and the

    as a grouped item. This is not the best way to do it, but containing certain blocks of code in this manner has a small impact. There are far more concise ways to do it in HTML5.

     – steakpi Sep 09 '14 at 13:11