CODEWITHSUNDEEP
htmlcss
Jeremy
Jeremy

Reputation: 46380

alternative to h1 element?

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...

Upvotes: 8

Views: 13485

Answers (9)

Joshua Robison
Joshua Robison

Reputation: 1881

This question was asked over a decade ago and we now have a better method for this.

ORIGINAL HTML

<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>

2023 UPDATE

<section>
    <figure>
        <img src="path/to/img" alt"">
        <h1>label/header/title</h1>
        <p>some text blurb</p>
    </figure>
    <div>body contents</div>
</section>

Upvotes: -1

Yukul&#233;l&#233;
Yukul&#233;l&#233;

Reputation: 17072

You can use html5 structural elements :

<section>
    <header>
        <div>header text</div>
        <div>text</div>
    </header>
    <article>body contents</article>
</section>

Upvotes: 0

Jesse Burcsik
Jesse Burcsik

Reputation: 367

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.

Upvotes: 0

Jesse Burcsik
Jesse Burcsik

Reputation: 367

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.

Upvotes: 2

silent1mezzo
silent1mezzo

Reputation: 2932

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.

Upvotes: 17

James Jeffery
James Jeffery

Reputation: 12599

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.

Upvotes: -1

macabail
macabail

Reputation: 157

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.

Upvotes: -1

ЯegDwight
ЯegDwight

Reputation: 25239

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.

Upvotes: 1

user229044
user229044

Reputation: 239312

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.

Upvotes: 1

Related Questions