unraveled

Images Within Heading Tags?

I’ve been thinking about the use of images within heading tags and wondering if it’s semantically correct. The HTML 4.01 Spec says that a heading element “briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.” But it doesn’t say anything about what a heading should contain. I noticed that Zeldman wraps an h1 tag around an image on The Daily Report, which leads me to believe that it’s okay to do, but the image itself doesn’t contain any text. Only the alt text describes the image as “The Daily Report.”

So there are two basic questions here. First, can headings contain an image? If so, what level of meaning should the image contain?

Comments

  1. Your two questions, Joshua…

    First, can headings contain an image?

    Yes. Actually, the HTML 4.01 spec DOES say what headings can contain - you might have seen this at clause 7.5.5:

    <!ENTITY % heading “H1|H2|H3|H4|H5|H6”>
    <!—
    There are six levels of headings from H1 (the most important)
    to H6 (the least important).
    —>

    <!ELEMENT (%heading;) - - (%inline;)* — heading —>
    <!ATTLIST (%heading;)
    %attrs; — %coreattrs, %i18n, %events —
    >

    Amongst all that, the (%inline;) indicates that headings can contain inline elements, like images for example. The O’Reilly book “HTML: The Definitive Guide” puts it in plain English at section 4.2:

    Allowed Heading Content

    A heading may contain any element allowed in text, including conventional text, link anchors (<a>), images (<img>), line breaks (<br>), font embellishments (<b>, <i>, <tt>, <u>, <strike>, <big>, <small>, <sup>, <sub>, and <font>), and content-based style changes (<cite>, <code>, <dfn>, <em>, <kbd>, <samp>, <strong>, and <var>).

    If so, what level of meaning should the image contain?

    Zeldman’s use is a little unusual, but not technically wrong. The more common case would be to use an image to deliver text in a specific typeface for which users are not likely to have the necessary font installed on their computer, in which case for accessibility reasons the “alt” text for the image should be the same as the text in the image, e.g.

    <h1><img src="images/welcome.gif" alt="Welcome to my site."></h1>

    where the image contains the text “Welcome to my site”, of course.

    I’ve been using this almost since the dawn of the Web.

    Keith Bell on 20 Dec 02

  2. Thanks for the great explanation, Keith. I learn something new everyday. In this case, it’s how to read the W3 spec details, which I had been putting off for far too long.

    Joshua on 20 Dec 02

  3. Yep, the W3C specs - especially the DTD aspects - can be torture to learn, but the result often rewards.

    By enclosing a “text-as-image” that is intended to be a heading within proper heading tags, you maintain structural and semantic integrity that can still be understood by search engines and other agents through appropriate use of the “alt” attribute.

    Keith Bell on 20 Dec 02

  4. It’s far away one of the best things you can do… use an Heading styled but use an image inside the headings tags… so if in the case you don’t use image in your browser or you connection sucks that day… in browsers like mozilla you can read headings with original size, color and font you set in a css… but in internet explorer you will get an typical verdana 11pt font…

    mini-d on 21 Dec 02

Comments are now closed for this entry