9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Creative h1 and h2 tags?

by DavidO
7 replies
  • WEB DESIGN
    • |
What are the best ways to use h1 and h2 tags in a page with heavy use of graphic text?

Is it possible to assign h1 to an image alt?

I've also read that you can use "no display" or other forms of hidden text but isn't this too risky?
#creative #tags
  • Profile picture of the author mywebwork
    Hi David

    You could use a style sheet to assign an image to the H1 tag.

    Bill
    {{ DiscussionBoard.errors[551235].message }}
  • Profile picture of the author MikeHayes
    Hi,

    For example, use the <h1> tag for the titles of the most important images and <h2> for the lesser ones.

    Regards,

    Mike
    Signature

    * * * * My site * * * *
    * * * * My paintings * * * *

    {{ DiscussionBoard.errors[551380].message }}
  • Profile picture of the author wardo
    You cant asign a heading as alt text but you dont need to. Use your headings as you normally would and then in your stylesheet do this:


    h1 {
    display:block;
    width:500px; /* this is the width of the image you want to use as your h1 */
    height:100px; /* this is the height of your image */
    background:#fff url(images/your-image.jpg) no-repeat top;
    text-indent: -9999px; /* this hides the text and shows your image instead*/
    }


    This has the advantage of letting you use whatever image you want as your heading text and still being accessible and semantic to search engines and people using assistive technology.

    This technique is not risky at all. You are simply making your site more accessible. Just make sure that the text you replace with the image is the same as the text in the image.

    Hope this helps.
    {{ DiscussionBoard.errors[551425].message }}
  • Profile picture of the author wayfarer
    You can also put an image tag directly into an <h1> (or whatever heading you like) tag. Although I usually do things the way wardo describes above (though display: block; is not needed, an <h1> is already a block-level element), something like this is also perfectly fine:
    HTML Code:
    <h1><a href="/"><img src="http://www.warriorforum.com/images/logo.png" alt="my company name" /></a></h1>
    Note the use of alt text. Besides being a required attribute according to the WC3, this is the only way to give a heading used this way a text value, which is important for communicating with image-disabled browsers (like the Google spider).
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[551743].message }}
    • Profile picture of the author DavidO
      Thanks for some great tips here.

      I could try wardo's method using CSS but do spiders read/evaluate css files?

      What if I simply enclose my image in h1 tags in my html? Doesn't that make my alt text my h1?

      Any further clarification much appreciated.
      {{ DiscussionBoard.errors[591120].message }}
    • Profile picture of the author SEO Inspire
      Originally Posted by wayfarer View Post

      You can also put an image tag directly into an <h1> (or whatever heading you like) tag. Although I usually do things the way wardo describes above (though display: block; is not needed, an <h1> is already a block-level element), something like this is also perfectly fine:
      HTML Code:
      <h1><a href="/"><img src="http://www.warriorforum.com/images/logo.png" alt="my company name" /></a></h1>
      Note the use of alt text. Besides being a required attribute according to the WC3, this is the only way to give a heading used this way a text value, which is important for communicating with image-disabled browsers (like the Google spider).
      Thanks for this W!
      {{ DiscussionBoard.errors[595269].message }}
  • Profile picture of the author wardo
    No spiders dont read css but you dont need them to. Your headings will be in the html not the css. The css just hides them and replaces them with an image.
    {{ DiscussionBoard.errors[591233].message }}

Trending Topics