What Code to Use for a Group of Words in the Body Text?

[gouri]

Let me first say that I am posting this in this section instead of the coding section because my question is not about how to code something, but what to code it, and I believe that what is used can help the contents of a page to be better understood and help in rankings.

On a page, I have the following:

H1 Tag Here

After the h1 tag, I have the body text section, and it contains the following:

Remembering My Summer Vacation (a few words to get this part of the page going)

Paragraph Here

Paragraph Here

Paragraph Here

The Link to the Next Page (This is a phrase that is linked to the next page, or a sentence in which some of the words are the link)

For the paragraphs, I am using <p> tags. Each paragraph is several sentences. For Remembering My Summer Vacation and The Link to the Next Page, it is just written out, they are not in any tags, but I think that they should be. I first thought that I would use the <span> tag, so I would have <span>Remembering My Summer Vacation</span> and <span>The Link to the Next Page</span>. I could style the tags in an external style sheet or inline. But then I thought that the use of the <span> tag does not create the feeling of the text being an entity, the way that words in a <p> tag, an <h1> tag or other tags do. It feels more like a group of words on a page.

I am thinking that I could use a <div> tag or a <p> tag. Remembering My Summer Vacation and The Link to the Next Page are not really paragraphs, so I am not sure if the <p> tag would be the right tag to use.

What do you guys suggest? Would it be okay to use the <p> tag, would a <div> tag be better or should I use the <span> tag?

On another page, after the last paragraph, I have written my signature:

Name
Email

I have the same question for this. Should I use <p>, <div>, or <span>?

I appreciate your advice. With the right coding, I think that it becomes easier for a search engine to pick up the contents of a page.

[aristotle]

There are various ways to handle these types of situations. Sometimes to increase the emphasis, I use the <p> tag with in-line styling, as for example:

<p style="font-size: 110%; font-weight: 500"> PUT TEXT HERE </p>

This will give slightly larger (110% instead of 100%) and slightly bolder (500 instead of the normal 400) characters. You can adjust the parameters according to your taste.

[lucy24]

By default, a div is block-level-- like paragraphs, only more so-- while a span is inline-- like <i> tags and so on, only more so.

It's generally safest to use elements in their expected form. If you used a span alone, you would have to set something like {display: block;} meaning that you're making it behave differently. And you wouldn't be able to tell from the html alone that this is going to be a free-standing element. Search engines can and do read css, but as a matter of policy, pretend that they can't.

The foregoing does not, ahem, apply to Bad Things like {display: none;}

[gouri]

There are various ways to handle these types of situations. Sometimes to increase the emphasis, I use the <p> tag with in-line styling, as for example:

<p style="font-size: 110%; font-weight: 500"> PUT TEXT HERE </p>

@aristotle,
Are you saying that I should put Remembering My Summer Vacation, The Link to the Next Page, and the signature in a <p> tag, and make the text bold and bigger than the text of the 3 regular paragraphs on the page?

For The Link to the Next Page, I don't think that you are saying that the link portion should be bolded, just the other text if there is?

If you are suggesting that Remembering My Summer Vacation, The Link to the Next Page, and my signature should be in a <p> tag, is it okay to this since they aren't paragraphs? Would it be better to use <div>?

[lucy24]

Most things in html aren't paragraphs. But you have to call them something. <div> and <span> by themselves aren't really html properties at all; they're simply containers or armatures that you attach your styles to.

heading
table
list
paragraph

Oh, and blockquote, but nobody uses that.

There's no block-level element that means "some random bit of free-standing text". At least not in HTML 4.

"Remembering My Summer Vacation" sounds as if it might be a header, depending on its relationship to the following text.

---

Now, just to ensure that I'm not simply making this up out of thin air, I went to check the horse's mouth...

http://www.w3.org/TR/html5/grouping-content.html#the-div-element

( Mod's note: The hash tag (#) in the above link breaks in the WebmasterWorld redirect script. Paste the above into your browser, or use this link to take you to the top of the page... [w3.org...] )


Stripped of all its decoration:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

And similarly:

The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

.

[edited by: Robert_Charlton at 11:17 pm (utc) on Mar 10, 2013]
[edit reason] delinked url, which breaks in our redirect script [/edit]

[phranque]

are you also link to previous pages from "page 2+"?

[levo]

Why not use microdata for this?

[aristotle]

gouri - As lucy said, "Remembering My Summer Vacation" sounds like a subheader, so you might use

<h3>Remembering My Summer Vacation</h3>

and define the specific attributes of size, boldness, etc of <h3> in the header.


I suggested using <p> instead of <h3> only because I prefer not to put one header directly under another header. Even if you use <p>, you can still center it as follows:

<p style="text-align: center; font-size: 110%; font-weight: 500">Remembering My Summer Vacation</p>


As for links, I like to make the anchor text larger and bolder so that it is easier to click on. I also like to center an isolated one-line link. The simplest way to do this is to use an <h> tag, such as

<h4>The Link to the Next Page</h4>

where you define the attributes of <h4> in the header.

Occasionally I've read that you shouldn't put links inside <h> tags, but I've done it many times, and it validates at W3C.

[g1smd]

I prefer to mark up a document using headings, paragraphs, lists, tables (for tabular content) and forms. Those individual "blocks" are then styled using CSS.

When a chunk of content consisting of either a small part of one of the above, or a group of several of the above, has to be styled then it's time for div or span.

[aristotle]

I've noticed that some mobile browsers seem to ignore some of the css styling you put in the head section, so if this is important to you, you should check how the page looks on these devices.

[TheOptimizationIdiot]

<h3>Remembering My Summer Vacation</h3>

and define the specific attributes of size, boldness, etc of <h3> in the header.

As an additional idea in HTML5 there's a element for that not requiring search engines to pick up on the styling differences to figure out it's a sub-heading.

[w3.org...]

<hgroup>
<h1>Heading</h1>
<h2>Sub-heading</h2>
</hgroup>

I would keep in mind there's a bit of browser flexibility for how to present the sub-heading to visitors but in my experience browsers follow the display setting defined via css instead of choosing their own styling, but either way it might be worth looking in to or using in some situations.

[lucy24]

You could legitimately have consecutive headings if the entire document is divided into segments, including the very beginning. Then you'd have the structure

h1
h2
blahblah
h2
moreblahblah
h2
stillmoreblahblah

But if the second big line is a subheader belonging to the first big line, then semantically you've got something like (I use this pretty often in real life)

span.subhead {font-size: 75%;}

It's pretty easy to decide which is which. If you rearranged the whole page-- or broke it into subpages where the h1 was an index page by itself-- would the line immediately after the h1 still be after the h1, or would it move to accompany the ordinary text that comes after it?

[TheOptimizationIdiot]

That's a good point Lucy.

Generally, as far as I know, advanced search engines consider each section of a document below a heading as a section, so even when you use the style of markup you're using to the best of my knowledge a search engine will consider "h1 h2" as a section and each h2 as a section itself.

One thing I've been working with and trying to overcome is search engines deciding what is a section on their own by explicitly specifying sections via HTML markup.

To me it's really interesting and informative when I start "digging in" to things and making sure I'm clear in what I mean via HTML markup.

[Robert Charlton]

h1
h2
blahblah
h2
moreblahblah
h2
stillmoreblahblah

My approach to this is not to follow the h1 immediately with the h2, but to include after the h1 some text relating to h1 that provides an overview...

...and then go to the more granular subheads relating to each of the h2s... (or to h2, h3, h4, etc, if I feel that is a better logical description of the content structure).

Using h2s in this illustration, to reflect your example, I'd have....

h1
introductory overview
h2
text expanding on the first of several "equal" subcategories
h2
text expanding on the second of several "equal" subcategories
h2
text expanding on the third of several "equal" subcategories

etc.

[aristotle]

To return to gouri's original questions, which may not have been fully answered:

-- I see nothing wrong with using <p> for a short phrase or even a single word. I've seen one-word paragraphs in printed books many times. So

<p>Remembering My Summer Vacation</p>
<p>Name</p>
<p>Email</p>

are all okay in my opinion. (Although I always put email addresses in images to prevent bots from finding them. But that's a subject for discussion somewhere else.}

-- As for links, there's also nothing wrong with using <p>. For a simple example:

<p>For more information about this subject, go to <a href="URL"><strong>this article</strong></a>.</p>

(I like to make the anchor text bolder so it is easier to click on.)

[gouri]

Thank you for all the responses. They have been very helpful. I had a few questions that I would appreciate your help with. I think that this will give me a very good idea of what to code the different aspects of the page.

@lucy24,

Thanks for the information from the W3. After reading that, I think that a <div> tag is probably not the best one to use and I should probably not use a <span> tag, either.

"Remembering My Summer Vacation" sounds as if it might be a header, depending on its relationship to the following text.

Remembering My Summer Vacation, I would say, should be in the body text. I should have written a better example, I apologize for that. The h1 that is there should be the h1.

are you also link to previous pages from "page 2+"?

@phranque,

I don’t link to previous pages from page 2+. Do you think that I need to do that? The site is not very big and all pages can be reached from the navigation menu.

The site, I think, has the feeling of reading a story and I have a link in the body text going to the next page the way that I have shown it in my OP on all pages except the contact page. On the contact page, which is the last page, I don’t have a link in the body text going to the home page. I used to have one, but removed it. Do you think that this is ok?

I used to have a link going to the home page, but on the contact page, if someone wants to go to the home page, they can do so by clicking on the link in the navigation menu or clicking the link in the footer that goes to the home page (the url is the anchor text). I think that with 2 ways to go to the home page when on the contact page, another one isn’t necessary. Could removing the link to the home page from the body text of the contact page have any impact on the flow of page rank?

Since removing this link, some of the pages on the site have lost page rank, but I am not sure that this is the reason. Some of the pages, I believe, were already losing page rank before making this change.

I prefer to mark up a document using headings, paragraphs, lists, tables (for tabular content) and forms. Those individual "blocks" are then styled using CSS.

When a chunk of content consisting of either a small part of one of the above, or a group of several of the above, has to be styled then it's time for div or span.

@gs1md,

I have three paragraphs in the body text. I think that would be considered a group of several of the above. Can I just define the <p> in an external style sheet? Is what you are saying for if I use inline CSS? Define the div and then put all three <p>’s inside it so that way I don’t have to style each individual <p>.

Example:

<div style="font-family: Times New Roman; font-size: 14 px;">
<p>Text here</p>
<p>Text here</p>
<p>Text here<p>
</div>

h1
introductory overview
h2
text expanding on the first of several "equal" subcategories
h2
text expanding on the second of several "equal" subcategories
h2
text expanding on the third of several "equal" subcategories

etc.

@Robert_Charlton,

I think that this is a good way to structure a page. After using a heading, there should probably be some text before another heading is used.

<p>Remembering My Summer Vacation</p>
<p>Name</p>
<p>Email</p>

are all okay in my opinion.

@aristotle,

I think that what you recommend (<p> tag) is how I will code Remembering My Summer Vacation. And would it be okay to make the text size of this bigger? I can have a few classes for paragraphs in an external style sheet, one for a regular paragraph and another for the few words at the top, and make the latter one a larger text size. For the signature, can I use one <p> tag and do the following:

<p>Name<br/>
Email</p>

because the signature I think is an entity and having it within one tag might be a way to show that to the search engines? Or do you feel that separate <p> tags are better for the Name and Email?

<p>For more information about this subject, go to <a href="URL"><strong>this article</strong></a>.</p>

Would you make the text size of this sentence the same as that of the 3 regular paragraphs? Also, by putting the anchor text in a <strong> tag or <b> tag, do you think that it could be seen as over optimization? Maybe if the anchor text is a keyword phrase. If you say that the text size of this paragraph should be bigger than the 3 regular paragraphs, then the anchor text will be bigger, and it will be in bold. If a keyword phrase is used, could it be over optimization?

Can I put images in the body text section inside a <div> tag or should I use a <p> tag or something else?

For the header and footer, should I use a <div> tag (e.g. <div id="header"> and <div id="footer">), a <p> tag or something else?

As an example: The header is My Personal Website and Blog

and in the footer I have the following:

Name Copyright notice Site title Home page url

What you see in the footer may not have a cohesiveness to it, but it is what you would usually find in a footer and are important pieces of information. I am not sure what tag this information should be put into?

I apologize for all the questions, but once I know what tags these different elements of a page should be put into, I think that I will have well coded pages that the search engines will easily be able to understand.

I appreciate your help.

[lucy24]

<div style="font-family: Times New Roman; font-size: 14 px;">
<p>Text here</p>
<p>Text here</p>
<p>Text here<p>
</div> 

Yup. That is exactly the kind of thing a div is supposed to do. Except that
#1 put the styles in a CSS, not inline. Do this even if it only happens to occur once. You'll reuse the style sooner or later. And inline styles render slower than ones declared ahead of time. Insert long boring technical disquisition here.
#2 if you must name a font, name more than one --there's an excellent site about font stack building if you need ready-made information-- and include a generic font-family at the end. Here it would be "serif". That is probably the user's default anyway, but let's be consistent.
#3 when you said "font-size: 14px" you of course meant "font-size: medium" or "font-size: 100%" or "font-size: inherit" or similar. DIDN'T YOU? Ahem. Well, it's possible you thought you meant "font-size: 110%" or "font-size: large" presuming a base size of 12pt. But the Times families all read fairly small; I for one would not be comfortable with 12pt body type. (My browsers are currently set for 15pt Palatino. Admittedly I am not 19 years old and do not have 20-20 vision.)
.

[edited by: Robert_Charlton at 7:32 am (utc) on Mar 14, 2013]
[edit reason] fixed typo at poster request [/edit]

[g1smd]

I often code the footer as a list, and style it to display horizontally and without bullet points.

[phranque]

i agree with g1smd's suggestion and i think a "previous page" link in this list would be useful for the reader.

i would suggest you consider using the link element in your document head to define the relationship among the collection of documents with some structure.

Document relationships: the LINK element:
httphttp://www.w3.org/TR/html4/struct/links.html#h-12.3

H59: Using the link element and navigation tools | Techniques for WCAG 2.0:
http://www.w3.org/TR/WCAG20-TECHS/H59.html [w3.org]

[aristotle]

I think that what you recommend (<p> tag) is how I will code Remembering My Summer Vacation. And would it be okay to make the text size of this bigger? I can have a few classes for paragraphs in an external style sheet, one for a regular paragraph and another for the few words at the top, and make the latter one a larger text size.

That sounds like a good approach to me. Although I don't think you need a special class for "regular paragraphs", if that's what you meant, but rather you can just specify the <p> properties in the usual way.

For the signature, can I use one <p> tag and do the following:
<p>Name<br/>
Email</p>

That should be okay except you should use <br /> instead of <br/>.

<p>For more information about this subject, go to <a href="URL"><strong>this article</strong></a>.</p>

Would you make the text size of this sentence the same as that of the 3 regular paragraphs? Also, by putting the anchor text in a <strong> tag or <b> tag, do you think that it could be seen as over optimization? Maybe if the anchor text is a keyword phrase. If you say that the text size of this paragraph should be bigger than the 3 regular paragraphs, then the anchor text will be bigger, and it will be in bold. If a keyword phrase is used, could it be over optimization?

Well I can't tell you what Google considers to be over-optimization. As I said, I like to make anchor text bolder so that it is easier to click on. (After all, doesn't Google always tell us to design for users, not for search engines?) Also, if you're really worried about over-optimization, you might be able to trick the algorithm by using the css font-size and font-weight properties.

Can I put images in the body text section inside a <div> tag or should I use a <p> tag or something else?

Here is the code that I like to use for images:

<div style="max-width: 500px; margin-left: auto; margin-right: auto; padding: 10px; text-indent: 0px">
<center><img src="Image URL" width="100%" alt="Alt Text" /></center>
</div>

This tells the browser to shrink the image down to fit screens that are less than 500 pixels wide. I think that some mobile browsers may do this anyway, but not sure that all do

[phranque]

fyi the <center> tag was deprecated in HTML4 and is considered a non-conforming element in HTML5.

HTML/Elements/center - W3C Wiki:
http://www.w3.org/wiki/HTML/Elements/center [w3.org]

[aristotle]

fyi the <center> tag was deprecated in HTML4 and is considered a non-conforming element in HTML5.

Yes I know this, but I still like to use xhtml, and it would take a lot of time and trouble to go back and recode a lot of old articles. I'm pretty sure that nearly all browsers know what <center> means.

[gouri]

<p>For more information about this subject, go to <a href="URL"><strong>this article</strong></a>.</p>

@aristotle,

I am thinking of making this paragraph larger than the other paragraphs in the body text, but not bolding the anchor text. Would this be okay?

I am also thinking of using the same larger text for <p>Remembering My Summer Vacation</p>? Would it be okay to do this?

So these two paragraphs would be larger than the other paragraphs in the body text and would be the same larger size.

@phranque,

i agree with g1smd's suggestion and i think a "previous page" link in this list would be useful for the reader.

Should I put a "previous page" link in the footer (then each page would have the link) or are you saying in the body text section of each page, maybe after the last paragraph, a link going to the previous page and the next page?

i would suggest you consider using the link element in your document head to define the relationship among the collection of documents with some structure.

I think that this is a good idea but I can't add to the head section. Is there anything else that I can do similar to this, or do I have to focus on writing the content on each page well so that it flows from page to page.

I appreciate everyone's help.

[aristotle]

@aristotle,

I am thinking of making this paragraph larger than the other paragraphs in the body text, but not bolding the anchor text. Would this be okay?

I am also thinking of using the same larger text for <p>Remembering My Summer Vacation</p>? Would it be okay to do this?

So these two paragraphs would be larger than the other paragraphs in the body text and would be the same larger size.

Yes, it would be a way to avoid two consecutive <h> tags, one under the other, if that's what you're aiming for. Just about anything is "okay" as long as it's coded properly.

[gouri]

@aristotle,

<p>For more information about this subject, go to <a href="URL"><strong>this article</strong></a>.</p>

The paragraph with the link would be the last paragraph in the body text and <p>Remembering My Summer Vacation</p> would be the first paragraph in the body text. The h1 would be above the first paragraph. I will not have consecutive <h> tags.

My question is more about would using a larger font size for the first and last paragraphs in the body text be okay, and since the last paragraph has a link, would using a larger font size be considered over optimization if the anchor text contains keywords or related keywords or even if it is generic?

I don't think that I will put the anchor text in a <strong> tag.

[aristotle]

My question is more about would using a larger font size for the first and last paragraphs in the body text be okay, and since the last paragraph has a link, would using a larger font size be considered over optimization if the anchor text contains keywords or related keywords or even if it is generic?

gouri - As far as i know, a larger font size for some lines shouldn't be a problem, especially if all the lines basically have <p> tags. I can't tell you what Google considers to be over-optimization, although a couple of lines with larger fonts, even if one of them contains a link, seems like a very minor "infraction" to me.

[lucy24]

My question is more about would using a larger font size for the first and last paragraphs in the body text be okay, and since the last paragraph has a link, would using a larger font size be considered over optimization if the anchor text contains keywords or related keywords or even if it is generic?

You may also want to think about whether the paragraph is larger because of its position or because of its content. That is, if you rearranged all the paragraphs, would the same set of words still be bigger?

In CSS, the "content" approach would be expressed as
p.super-important-stuff {font-size: some-number-larger-than-100%;}
going with <p class = "super-important-stuff">

while the "position" approach might be
h2 + p {font-size et cetera}
or
div.somename p:first-child {font-size and so on}
or probably a couple other approaches, depending on your individual situation.

If you have multiple pages that all have the same overall look, make a style that will fit all of them so you don't have to keep tweaking things on every page.

[gouri]

@aristotle,

I agree with you. Thanks for the advice.

You may also want to think about whether the paragraph is larger because of its position or because of its content. That is, if you rearranged all the paragraphs, would the same set of words still be bigger?

@lucy24,

I would say that the paragraphs are larger because of their content. One paragraph (Remembering My Summer Vacation) is to say what is going to be talked about in the rest of the body text and the other contains a link to another page. If I changed the order of all the paragraphs, it wouldn't flow (that's why it's a little hard to answer the question you are asking) but if I saw these two paragraphs when all the paragraphs are in a different order, I would feel that these paragraphs should be larger.

Does this mean that I am making them larger because of their content?

while the "position" approach might be
h2 + p {font-size et cetera}
or
div.somename p:first-child {font-size and so on}
or probably a couple other approaches, depending on your individual situation.

Does this mean that I am making the first paragraph (Remembering My Summer Vacation) larger because it is below the h2 and it should sort of appear proportional to the text in the h2? Deciding on the size of the paragraph for appearance sake?

If you have multiple pages that all have the same overall look, make a style that will fit all of them so you don't have to keep tweaking things on every page.

Yes, I agree. There are several pages that have this type of look, so that is what I'll do.