Semantic uses of <p> HTML tag

What is it for?

<p> tag is a very nice, semantic tag simply intended for marking up paragraphs of text and that is it’s only purpose.

Appropriate uses

In a code block like this:

<p>This is an article about paragraph tag in HTML.</p>
<p>When we are marking up paragraphs in HTML we should use it for actual paragraphs of text and not for anything else. Paragraphs are only intended to be used for this purpose.</p>

we currently have two equally weighing paragraphs of text in terms of semantics.

However, as an author of this text, I actually intended first paragaph to be a description of the second paragraph.

Semantically speaking, changing the above code to:

<p class="description">This is an article about paragraph tag in HTML.</p>
<p>When we are marking up paragraphs in HTML we should use it for actual paragraphs of text and not for anything else. Paragraphs are only intended to be used for this purpose.</p>

adds a layer of additional semantics to the code giving the first paragraph a little more meaning and implying that it is a description of some sort.

The reason why I used a class instead of an id is because I could have many different descriptions on one page in any given system.

Inappropriate uses

Empty line break

Wrapping text into a <p> tag creates a natural line break after the text and some developers are often tempted to use a <p> tag to wrap a non-paragraph text into it or even use a blank <p> for the purposes of creating a line break.

Using paragraphs instead of a list

Sometimes you will come across a list of some sort being implemented as a series of paragraphs.

Consider the following code block:

<p>Semantics are good.</p>
<p>Semantics help the world.</p>
<p>Semantics are good for Internet.</p>
<p>Semantics create better solutions.</p>

Each one of the points made in this list is not really a paragraph.

A paragraph is usually a longer piece of text, while here we are looking at a list of short points about semantics, which belong to a same ‘group’ of thoughts or points.

The above list of points would therefore much more apropriately be marked up as a <ul> block, an unordered list of points about semantics.

Written by Jason Grant on 13th April 2009

You can leave a response, or trackback from your own site.

2 Responses - Join the conversation

  1. Jason,
    Are there any best practices that menu navigation is serve in <p>, not the list.

    Simply the reason is for the mobile target that do not understand/disable the CSS styling.

    It sounds not semantics at all. But mobile users/small screen users do not have to scroll-down the long menu navigation or something like tag-clouds.

    dani on 20th April

  2. I would not code up a menu (which is an excellent example of a list) as a bunch of s just to make a given mobile browser happy.

    Most modern mobile browsers render CSS fine and will happily display a list.

    I use BlackBerry browser nowadays regularly and it works fine with most sites.

    I know other people use iPhone and similar tools. Also works well.

    Jason Grant on 20th April

Contribute your expertise