alternative to h1 element?

Question

I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?

My current html looks like this:

<div class="section">
    <h1>
        <div style="float:left">header text</div>
        <div style="float:right">text</div>
        <div style="clear:both;float:none;"></div>
    </h1>
    <div>body contents</div>
</div>

I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...

Answer 1

Is there a reason you don't specify just:

<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div>  only if really necessary -->

This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.

Answer 2

You could always do

<h1>header text <span>text</span></h1>

Then you handle the css for clearing the floats and floating the second text in the css file.

Answer 3

The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.

This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.

Answer 4

Just reverse the nesting order of some of your code:

<div class="section">
   <div style="float:left"><h1>header text</h1></div>
   <div style="float:right"><h1>text</h1></div>
   <div style="clear:both;float:none;">body contents</div>
</div>

I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.

Answer 5

Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.

Answer 6

You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.

Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:

<style>
  h1{
    background:    url('../path/to/image/image_to_replace_header.jpg') no-repeat top left;  // Sets the BG that will replace your header
    text-indent:   -9999px;  //  Moves the test off screen
    overflow:      hidden;   //  Hides the staggered text for good
    width:         300px;    //  Sets width of block(header)
    height:        100px;    //  Sets height of block(header)
  }  
</style>

<h1>My Awesome Site</h1>

Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.

Answer 7

To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:

<div class="section">

<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>

</h1>
<div>body contents</div>
</div>

All the important text is in the H1 and you can still style it as you like.