Should we try to use all H1 to H6 in a website?

Question

Should we use all H1 to H6 in a website?

i use h1 to h2 usually. now how to judge and decide where to use H3 to h6.

should we use like this

h3 {display:inline}

<div id="content">
  <h3> some text in bold:</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
  <h3> some text in bold:</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
</div>

or this

span {font-weight:bold}

<div id="content">
  <p><span> some text in bold:</span>
    Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. 
    </p>
  <p><span> some text in bold:</span>
    Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. 
    </p>
</div>

to get result lke this

Both methods are W3C valid, with css i can achieve same look from both method so which is semantic and accessible?

Answer 1

You use them as you need them, just as you would with any other tag (outside of the obligatory tags: html, head, etc.) Use them when you need them, but use them properly.

Answer 2

If the text is functioning as a header level under the H2 level, it would an H3. Rinse/repeat for H4 to H6.

XHTML is semantic -- use the tags based on what they mean. What they look like is your choice, including whether they are displayed as block elements or inline.

Answer 3

If you intend for the content to be a subsection (i.e. a distinct separation, not merely a paragraph block) of the section you're in, use the next available heading level. Otherwise, just stick it in a paragraph. Unless absolutely necessary, avoid wrapping your elements in a div tag just for the sake of having a div tag. It's not semantic and may throw off search engine spiders.

Answer 4

You should note that search engines such as Google use header tags(H1) when processing pages for indexing and page rank etc.

See How Google is using HTML tags to enhance the search engine?

Answer 5

When writing pages I try to think of it as writing a Book, if the content is related to the parent section in such a way to deserve its own section, then use H3, H4... otherwise you can use other html tags, such as a dd (Definition List) or ul (Unordered List).

Of course, if you are going for SEO, then always use your h1 and h2, for main content titles (or simply the information you want the user to find). And then, as previously stated before go for trying to make it feel like a book (publication).

Answer 6

HTML is a markup language, which simplified means describing your content semantically. CSS is for styling your content, i.e. the visual part. Just like <p> means a block of text is a parapgraph <Hn> means a block of text is a heading.

Headings describe the structure of your document, a treelike data structure, if you will.

The Web Developer extension for Firefox has a nice feature that allows you to see your marked up document structure. You can find it under Information->Document outline.

Answer 7

From an accessibility standpoint don't use multiple levels of headings unless it makes sence for your content structure. For example the main document should have heading level one, main sections in the document should have heading level two, and subsections should have heading level three. Wikipedia does a good job of this, for an example see the following link that has both sections and subsections. http://en.wikipedia.org/wiki/Database_normalization

Answer 8

A heading is a title for a section of a page. It describes that section, in a few words.

There’s no simple rule to work out if a given bit of bold text in a document is best marked-up as a heading.

In the example you’ve given, it’s particularly hard to tell if the bold text should be a heading, because the text is meaningless placeholder text. “Semantic” just means “meaning”. The “most semantic” markup is the one that best communicates the meaning of the page. With just meaningless placeholder text, you don’t really know what the meaning of the text is.

One way to decide whether some text should be marked up as a heading is to imagine what the document would look like if the user could only see an outline of it, generated from its headings. E.g.

• <h1>
  • <h2>
    • <h3>
    • <h3>
  • <h2>
    • <h3>
      • <h4>
  • <h2>
    • <h3>

Would the text make sense in the outline? Or is it not really a heading, but instead just in bold because the designer wanted to emphasise it?