Do You Need a <p> Tag After a Heading Tag

[gouri]

I read that if you have a paragraph after a heading tag (e.g., h1), you don't need to use a <p> tag because there is a line break after the heading tag.

The coding would look like this:

<h1>Text here</h1>
Text here
<p>Text here</p>

In the above example, both Text here and <p>Text here</p> are paragraphs. Should I code it that way or should I do the following:

<h1>Text here</h1>
<p>Text here<p>
<p>Text here</p>

Would using the <p> tag for the first paragraph help the search engines to interpret that content as well as the other content on the page?

[not2easy]

Without the <p> tag it will inherit default parent formatting, with the <p> tag it will conform to your formatting for the <p> tag. Visual appearance is affected, but all text on the page is crawled and considered as content. If the text is defined as in img alt text or caption text it is evaluated that way, but text not enclosed in <p> tags should be evaluated as text content.

[ronin]

Would using the <p> tag for the first paragraph help the search engines to interpret that content as well as the other content on the page?

Yes, it will.

And it will help all other user-agents (UAs)which parse the document structure.

And it will give you a comprehensive Document Object Model (DOM), which will be vital if you want to use javascript (or a javascript library like jQuery).

The rule of thumb is:

Webpages are informational documents, abstracted from sound, visual or programmatic media.

So... how one browser displays your webpage visually is not your webpage.

The real webpage is precisely how you've marked it up.

In your markup, every element on the page needs to be correctly described according to its role on the page.

If you want to play around with top margins, bottom margins etc. - that's what CSS is for. Any browser will apply arbitrary default CSS to the elements it parses... but the browser's default CSS is no more than that - arbitrary.

[Fotiman]

you don't need to use a <p> tag because there is a line break after the heading tag.

That may not always be the case, depending on what styles have been applied to your <h1>.

In the end, you should be thinking about it semantically. If it's semantically a paragraph that follows the H1, then you should mark it up as such, regardless of whether it displays the same with or without the <p></p> tags.

[gouri]

I appreciate all the responses and everyone's reasoning. I think that I will use the <p> tag for the paragraph after the <h1>.

ronin,

If you want to play around with top margins, bottom margins etc. - that's what CSS is for.

If I want to use a property such as top margin, do I have to use it with an element (e.g., h1) or can I use it for the template?

What I mean by the second option is if <h1>text here</h1> is the first thing to appear on the page and I want to leave some space between this text and the top of the page, do I have to use top margin with the <h1> or can I somehow indicate that the template should leave a space of 10px from the top and then the text of the <h1> should appear?

Same thing if I want to leave space on the left and right side of the page: Would I have to use left margin and right margin with a <p> or can I somehow indicate that the template should leave a space of 10px from the left and right so that the text appearing in <p> elements and other elements (e.g., h1, h2) does not go all the way to the edge?

If the second way is possible, can you tell me how?

[buckworks]

Place the desired margin information (or any other formatting you wish) in your external CSS stylesheet.

There's often more than one way to achieve the desired visual effect. This example uses padding instead of margin to create a space after the H1 and H2. The styling would apply throughout your site unless other instructions intervened.

h1, h2 {
margin: 0;
padding: 0 0 20px 0;
border: 0;
font-weight: normal;
font-size: 1.8em;
line-height: 1.3em;
position: relative;
}

One way to keep text from running to the edge could be by applying some padding to the <body>.

[lucy24]

Simple guideline: Put everything inside markup. In practice, that means use <p> for everything that isn't something else.

One difference between html and xhtml is that in xhtml, inline elements (span, br) have to be inside block-level elements.

"Necessary" is a fuzzy word anyway. Necessary to pass validation? Necessary to make it display as intended in compliant browsers?

line-height: 1.3em; 

My default paragraphs are 1.2 line height. (I think this is the only place in CSS where you don't have to specify a unit: "1.2 what?") This makes it very easy to eyeball the page and see if you've overlooked a <p> somewhere.

[tangor]

If text is NOT defined by some kind of markup there's no telling how it might display. :)

I'd use the <p></p> for all text that is NOT a header or span or table element.

[lucy24]

If text is NOT defined by some kind of markup

Well, there's always some markup, if only <body>. But that doesn't get you far.

:: detour to refresh memory ::

I don't know what most people put in their "body" and/or "html" css. Mine only says
margin: 1em 5%; padding: 0; font-size: 100%;
plus site-specific background colors. (I don't remember who talked about font-size, only that it was someone hereabouts. It's probably an MSIE thing.)

[gouri]

This is great information from you guys.

One thing that I thought about is where I have

<h1>Text here</h1>
<p>Text here<p>
<p>Text here</p>

if I feel that there is too much space between the text of the <h1> and the first line of the text in the <p> after the <h1>, can I use, for example, margin-bottom:-25% with the <h1> and that will decrease the space between

<h1>Text here</h1>
<p>Text here<p>

Thanks.

[tangor]

A refreshing conversation re Hx tags (as opposed to how to use them for SEO. Presentation/display. That's the ticket!

Take control of your Hx tags with specific CSS font size, weight, margin,. padding. That way you know what you get every time.

I'd rather define it up front than try to keep track of minus this, minus that...

[lucy24]

if I feel that there is too much space between the text of the <h1> and the first line of the text in the <p> after the <h1>, can I use, for example, margin-bottom:-25% with the <h1>

You could, but I seriously doubt you'll need to unless you've set your <h1> to some absolutely vast line-height. In which case you should cut it out, because line height is only relevant in a multi-line element, and just how long are your h1's?* In any case you wouldn't need to go beyond about 1.5 (line height, not margin) unless your headers are in some weird font with ascenders and descenders all over the place.

You should start by setting up some boilerplate that you'll use by default everywhere. For example:

h1, h2, h3, h4, h5, h6 {line-height: 1.5; text-align: center; margin: 1em auto .5em;}
p {margin: .5em auto 0; line-height: 1.2;}

and then you set different sizes and margins for the successive headers. Be sure to specify the size for all your hx elements; the html default is smaller than any right-thinking person would choose.

In general I like to do my vertical-margin work on the top margin, keeping the bottom margin at 0, for a simple practical reason: combination rules such as

p.onething + p.otherthing

apply only to the second item of the pair.

Note too that

{margin: -.25em;}

doesn't mean "1/4 em less than normal", it means "negative 1/4em". If you think of margins as personal space, a negative margin is what you get when you're standing in a queue and people are jammed together much closer than normal.


* I say this with a straight face, even though the top header on the page of mine that google likes best is two full lines. And it's an image, and it uses a ridiculous font, and for arcane historical reasons it's an h2. Do as I say, not as I do.

[gouri]

Thank you for the information. Sorry for the late response.

[SelenIT]

One difference between html and xhtml is that in xhtml, inline elements (span, br) have to be inside block-level elements.

In fact, it's not a difference between html and xhtml, it's a diffrence between Strict and Transitional "flavors" of each of them. HTML/X(HT)ML differences are primarily about syntax (tag omission vs. "self-closing tags", attribute minimization etc.), it's Strict [w3.org]/Transitional [w3.org] difference that says which tags are allowed in which context via DTD. By itself, XHTML1 is nothing more than just a reformulation of HTML4 in XML1.0 terms. It doesn't add or remove any addintional requirements to the tags, the only extra requirements are basic XML syntax rules.

[andrespefia3]

HTML is one of the basic language of web development and easy to learn. However, there is more web development software you can use to be able to create one. It will be easier and will save your time than doing it tag by tag and MS Frontpage is one example

[disha]

Hello,
you don't need to use a <p> tag because there is a line break after the heading tag. So it is important to make use of it. I hope it will help you thank you.

[piatkow]

I have a vague recollection of early browsers putting in both the space after the hx tag and the space for the p tag. The "old school" approach is to omit the initial paragraph tag as, before CSS, it would be at best redundant and at worst making the page display incorrectly.

Modern browsers will default a single break after an Hx tag with or without a paragraph tag following so there is no problem about correctly marking up the whole document. Apart from considerations of "correctness" marking up each block of text as a unit allows you to lift and drop to a different part of the document without disturbing the layout.

There are still a lot of old tutorials around that predate the use of CSS (or are written by people who never learned it) that teach bad habits.

[lucy24]

because there is a line break after the heading tag

Starting on a new line is only one aspect of a paragraph. It's rare for a page to have no paragraph-specific formatting at all, such as line height or margins. Leave out the <p> and your raw text will stick out like a sore thumb.

[Fotiman]

And as I already said, you should be thinking about it semantically. If it's semantically a paragraph that follows the H1, then you should mark it up as such.