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

alt text http://easycaptures.com/fs/uploaded/226/1452064646.png

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

Answer 1

If the text is functioning as a header level under the H2 level, it would be 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.