Should I Use The <P /> Tag in Markup

Should I use the p / tag in markup?

Modern HTML semantics are:

• Use <p></p> to contain a paragraph of text in a document.
• Use <br /> to indicate a line break inside a paragraph (i.e. a new line without the paragraph block margins or padding).
• Use <div></div> to contain a piece of application UI that happens to have block layout.

Don't use <div /> or <p /> on their own. Those tags are meant to contain content. They appear to work as paragraph breaks only because when the browser sees them, and it "helpfully" closes the current block tag before opening the empty one.

Is it good to put p inside td to put content text?

Leave out the <p> tag unless the content of your table cell is truly a paragraph. It's certainly possible to have paragraphs in tabular data, and in that case a semantic <p> would be appropriately placed. But for the common table with data in the cells eg. numbers, names, etc., don't include the <p>.

When to use span instead p?

You should keep in mind, that HTML is intended to DESCRIBE the content it contains.

So, if you wish to convey a paragraph, then do so.

Your comparison isn't exactly right, though. The more direct comparison would be

When to use a <div> instead of a <p>?

as both are block level elements.

A <span> is inline, much like an anchor (<a>), <strong>, emphasis (<em>), etc., so bear in mind that by it's default nature in both html and in natural writing, that a paragraph will cause a break before and after itself, like a <div>.

Sometimes, when styling things — inline things — a <span> is great to give you something to "hook" the css to, but it is otherwise an empty tag devoid of semantic or stylistic meaning.

Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?

Actually, no. This markup is not correct according to W3C. You should avoid using this.

It is stated that the correct content for header elements is a "phrasing content", which is phrasing elements intermixed with normal character data.

In other words you can use the following convenient elements inside of a header tag in HTML5: a, em, strong, code, cite, span, br, img. See the full list here.

The W3C validator will give you the following error if you will try to validate this markup: Element p not allowed as child of element h1 in this context.

The one major drawback of using this markup that you should consider is that search engines can incorrectly parse your heading tag and miss important data. So this practice can be bad for SEO.

If you would like a better SEO results it is a good practice to include only textual data inside of a heading elements. But, if you also need to apply some styles, you can use the following markup and CSS:

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>

<style type="text/css">
    h1 span {
        display: block;
    }
    h1 span.major {
        font-size: 50px;
        font-weight: bold;
    }
    h1 span.minor {
        font-size: 30px;
        font-style: italic;
    }
</style>

See the jsfiddle for this.

As stated before, span tag is perfectly valid inside of a header elements (h1-h6). And you can apply "display: block;" style to it to make it render as a block level element (each on a different line). It will save you a br tag.

Of course you will need to change this CSS selectors according to your use case.

And yes, as stUrb said it's not semantically correct to use paragraphs inside of a headings. The most important idea behind HTML is that it must be a semantics first, presentation later.

Is the div tag ever an undesirable alternative to the p tag?

DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.

ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.

If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.

Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.

Is it okay to use an id for p tags?

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.

P-end-tag (/p) is not needed in HTML

P-end-tag is only required in XHTML, not in HTML.

Correct

But some times you have to close it any way eg. when you align the paragraph left/right/center.

Incorrect. The only time you need an explicit end tag is when you want to end the paragraph and immediately follow it by something that is allowed inside a paragraph (such as text or an inline element). This is usually a bad idea.

Would it for any reason be a bad idea to mix the usage of P-end-tag

Only that consistency is a virtue which aids in code maintenance.

When to use p vs. br

They serve two different functions.

<p> (paragraph) is a block element which is used to hold text. <br /> is used to force a line break within the <p> element.

Example

<p>Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallis<br />rutrum. Phasellus 
id mi neque. Vivamus gravida aliquam condimentum.</p>

Result

Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallis
rutrum. Phasellus
id mi neque. Vivamus gravida aliquam condimentum.

Update

Based on the new requirements, I would personally use <p> to achieve the spacing as well as allow for styling. If in the future you wish to style one of these parts, it will be much easier to do so at the block level.

<p>Welcome to the home page.</p>

<p style="border: 1px solid #00ff00;">Check out our stuff.</p>

<p>You really should.</p>

---

Related Topics