Image<replacement>
Create Semantic Markup Using Graphical Headers
Image replacement is the latest trick sweeping through CSS-based Web design. There are a number of different methods in use, but they all basically do the same thing: create a header tag like <h1>, <h2>, <h3>, etc., and then use CSS to hide the real tag and replace it with a background image of the tag text.
<H> tags add meaning to your page, because they indicate the relative importance of the various content items (<h1> is the most important, and <h6> is the least). By using these tags carefully, you indicate to readers (and screen-readers and search engines) where the “good stuff” is on your page.
Apply the Image Replacement Action to a graphic box, whether it stands alone or is inline within a flow of text. Make sure to apply ALT text to the graphic, as this will become the text of your <h> tag. Select the heading level you wish to use. That’s it!
When you publish the page, the ALT text of the graphic will be written out as an <h> tag, like this:
<h3>This is a header</h3>
A new stylesheet entry will be added for each heading you place on the page. The CSS code is written to give predictable results in any 5.0 or greater browser, and falls back to showing the heading as text in older browsers or when you print the page. |
