Which combination of tags should I use?

Question

In my form I have 3 styles of text: styleA (size 16 and bold, more like a header) styleB (size 16, normal weight, the normal text) and styleC (size 14 and italic, a note at the end).

Should styleA and styleB use <h?> tags and styleC use a <p> tag? Or should styleA use an <h?> tag, styleB use a <p> tag, and styleC use a <small> tag? Or is there some other combination I should use?

I'm trying to figure out what the accepted norm is in a situation like this so that I use the correct html in this case and in future, similar cases.

Thank you!

Edit: Just to clarify, all this text will be in a form in an (AJAX) pop-up window. All the text will be within a <form> tag. Therefore, I'd prefer to avoid any body/div tags.

Answer 1

• If it's a header, assign it to one of h1,h2,h3,h4,h5,h6 depending on what you need.
• Standard text can be in either body,p,li,a,div,span.
• Emphasis/bolding/notes can be applied in em,i,b,small,sup,sub

The idea is you want the classes to represent the usecase. So if you're using a class for header text, pair it with a header tag.

Answer 2

I would go

• <h1> for styleA
• <p> for styleB
• <small> for styleC

From what you describe, the tag reflects how the text in them are being used, although I might consider <cite> for styleC, since <small> is more of a visual description, rather than semantic description, like <cite>. (I had thought there was a specific tag for footnotes, but I guess I was thinking of <tfoot>)

Answer 3

You could use the follwing CSS to define the h1 and p tags and to create a CSS class note:

Style A: h1 { font-size: 16px; font-weight: bold; }

Style B: p { font-size: 16px; }

Style C: .note { font-size: 14px; font-style: italic; }

Answer 4

Just off the top of my head here...

HTML 4 or XHTML 1

• styleA should be a heading, probably a level 1 <h1> or level 2 <h2> heading depending on the nature of the content it encompasses (an article, or the whole page?).

• styleB should definitely be a series of <p> elements containing your actual content.

• styleC could be a specially-designated paragraph. Some examples of how to do this include <p><small> or <p><cite> or <p class="footnote">.

HTML5 (in case you'd like to try it out)

• styleA should be a heading in a <header>.

• styleB should be a series of <p> elements in a <section>.

• styleC would do well as a <p> in a <footer>.

Answer 5

You're rather missing the point of semantic mark-up. You need to look for the underlying reason why you're using each of those styles for the various elements of the page. Once you understand that, then you will be able to choose the correct mark-up.

Answer 6

I noticed you mentioned it's a form you're designing. I'm surprised no one has mentioned this, but it's important to make use of the <label> tag and <fieldset>/<legend> tags if you're wanting to create a properly semantic HTML form.

So, your StyleA might make the most sense as a <legend> within a <fieldset>, not an <h1> tag. Your StyleB, if it describes a control, definitely should be a <label>. Take a look at some of the example HTML on the W3C pages I've linked above for information on how to properly use these tags.

The note at the end would be in a <p> tag, perhaps with some class. Longer informational notes on the form would be in paragraph tags as well.

Here is an article from A List Apart which demonstrates an ordered list technique for controls and proper semantic HTML with label and fieldset tags.