proposal: noimg element

[ahagen]

There are many instances in which the alt attribute for the img element does not cut it. Instead of simple, plain text, it is often necessary to have that alt text play a meaningful, structural part of the web page. This is the inspiration for the proposed noimg element, a counterpart to the noscript element.

Consider a typical scenario for web page design. Key is designing the logo, or title of the page. It will have various requirements. Unfortunately, these requirements cannot all be met under the current HTML specifications, and, as a practical matter, compromises must be made.

The requirements:

• The title of the page must be displayed in a large format near the top of the web page. Call this the "Page Title."

• The Page Title must display as an image in browsers that are image-enabled. It may display as text on limited browsers. A graphical image is necessary, however, for owners of a trademarked logo, or any organization that wants to establish an official presence on the Internet. For example, a web surfer who visits the FBI web site expects to see the FBI insignia (an image) on the front page. That expectation must be fulfilled.

• The Page Title must display. It must display regardless of whether images, CSS, or both are enabled or disabled by the user agent/browser. There must be only one Page Title displayed.

• Clicking the Page Title should lead to the root of the site or some other URL that the page designer deems useful, such as http://example.com/ or http://example.com/blog.

• The Page Title should be enclosed in the h1 element. This is semantically important. It helps search engines determine what page addresses which topic. All HTML structural elements must have meaning. The h1 element must not be empty. The text of the Page Title must be in the h1 element. This is semantically important as well. Automated agents, such as search engines can use the Page Title text to determine the topic of the page. Thus, it is insufficient to simply put the Page Title text in the alt attribute of an img tag which in turn is inside an h1.

• The solution must not use a span element. No hacks.

• The solution must not use the CSS properties: display: none; visibility: hidden; font-size: 0; or otherwise use CSS to hide, conceal, or obscure any information contained in the HTML. These techniques cause problems for search engines and readers that need to distinguish legitimate, well-maintained sites from those sites that include spam keywords not relevant to the site, and link farms. Furthermore, the use of these properties cause problems for screen readers and accessibility.

• Site authors should have the option of making the Page Title image partially transparent. The CSS property "opacity” should be usable with this image. The site author should be able to use a non-opaque logo if desired. Yet, partial transparency is not an option if the site author relies on certain image replacement hacks.

• The solution must not rely on JavaScript.

Possible implementations that fulfill all of these requirements in the current HTML 5 spec: none. The consequence is that site authors must compromise.

There is a vital need for "Page Title" as specified above. This need has inspired numerous hacks. A sampling of the rich, muddy ecosystem attempting to deal with this design flaw would include Fahrner Image Replacement, CSS image replacement, and more. Oftentimes, using CSS to specify a "background" image is used, even though the intent is that the "background" image becomes the main content.

http://css-tricks.com/nine-techniques-for-css-image-replacement/

http://annevankesteren.nl/2003/08/html-headers

http://www.evotech.net/blog/2007/09/css-image-replacement-method/

To address this great, common need, HTML 5 should have a new element, noimg. The contents of a noimg element are displayed only in one situation. They only display if images on the browser are disabled. This includes browsers that do not display any images.

If the browser is displaying images, the contents of the noimg element are ignored by the browser. If the browser is not displaying images, the contents of the noimg element are displayed. This enables the following implementation.

Code: Select all

<h1>
    <a href="/">

      <img src="logo.png" alt="" />

      <noimg>

         The Page Title

      </noimg>

    </a>
</h1>



This simple HTML allows all of the above requirements to be met. Search engine bots will be able to easily access the plain text Page File, contained in the h1, and in turn contained in the noimg. Web designers could easily implement the site logo in HTML, and would not have to make the compromises of today.

There is no functionality in HTML 5 or CSS that the noimg element would duplicate. Furthermore, even implementing JavaScript that detects whether the user agent is displaying images is apparently non-trivial.

HTML 5 will include the noscript element, for browsers that do not have JavaScript enabled. HTML 5 should have a counterpart element for browsers that do not have images enabled. It is a simple, logical step.

By way of technical details, the attributes for the proposed noimg are the same as they are for noscript.

Counterargument: Some may say that this could be used illegitimately to spam search engines. For example, to attract more hits from search engines to a web site, the web site might have a noimg element with various common search terms that are irrelevant to the site. Furthermore, link farms could try to use the noimg element to hide links, intending to influence search engine rank. The thought is that users wouldn't see the spam links, but search engine bots would.

Counter-counterargument: Users browsing with images disabled would see the search terms and link farms. This would greatly injure the site's reputation. As a result, sites will regulate themselves and not abuse the noimg element.

For example, A business such as a law firm might consider putting spam terms on its web site in a noimg element, intending to increase the search hits it receives. These spam terms might be "Britney Spears, Octomom, American Idol." The law firm would be embarrassed, however, when asked by a paying client why they saw those terms on their law firm's web site when browsing via smartphone. Therefore, to avoid this embarrassment, the law firm, or other business, would not abuse the noimg element in this way, and if they did, they would pay the price in lost reputation and lost revenue.

Search engines could implement an algorithm to deny any "link popularity" based on any links contained within a noimg element. For example, if a link farm had a link to a pharmaceutical middle-man hidden in a noimg tag, a search engine might ignore this, degrade the site's popularity, or blacklist it.

Today link farms could theoretically use the noscript element to hide massive collections of spam links from people's eyes, while making them visible to search engine bots. Yet, there is no controversy over the noscript element's inclusion in HTML 5.

The benefit from a noimg element would greatly outweigh any problems it would cause.

An alternative

Finally, let's consider an alternative proposal and why it probably would not work. The proposal would be to add src, height, width, href, and other related attributes to h1-h6. If the src attribute is present in an h1 element, and the image is successfully downloaded by the browser, and the browser has images enabled, the browser would display the image from the src attribute, and the browser would not display the content of the element. In any other situation, the browser displays the content of the element, and not the src image. Thus the solution would be as follows.

Code: Select all


<h1 src="logo.png" height="100" width="300" href="/">

       The Page Title

</h1>



Counterargument: It would be very difficult for browsers to implement this. This alternative proposal is not viable. The noimg element proposal is superior.

In conclusion, the noimg element would receive wide browser support, would be used heavily, would benefit the WorldWide Web greatly, would assist web designers significantly, and would make the job of search engines easier. The noimg element would be a good addition to HTML 5.

[zcorpan]

You can use rich fallback with <object>.

edit: Oh, I just read more carefully and noticed this was not about rich fallback, but styling.

You can use <h1><img src=... alt="Page Title"></h1> and it should give the right font size when images are disabled.

Or, as Anne wrote in his blog post, you can use <h1>Page Title</h1> and CSS3 generated content.

[ahagen]

Those are hacks. The hacks are necessary because of the design flaw in HTML. The noimg element would gracefully repair HTML, eliminating the design flaw.

The hacks you posted, as I stated above, are compromises that deviate from the Page Title specification above. In such cases the h1 element is devoid of text.

In particular, the CSS3 generated content is completely useless in such a situation, since it is very important that search engines index the content, and it is highly unlikely they index content based on CSS3 generated content, or ever will.

The alt attribute text, as I noted in the post above, is a hack and a compromise.

Let's end the need for these ridiculous hacks and fix HTML.

[zcorpan]

Those are hacks.

It's not clear to me why you consider them to be hacks.

The hacks are necessary because of the design flaw in HTML.

The alt="" attribute is a flawed design, because it doesn't degrade in pre-Mosaic browsers and it doesn't support rich content.

The noimg element would gracefully repair HTML, eliminating the design flaw.

The fallback text would be shown in existing browsers as well as the image, which is not very graceful.

The hacks you posted, as I stated above, are compromises that deviate from the Page Title specification above. In such cases the h1 element is devoid of text.

No, for <h1><img src=... alt="Page Title"></h1>, the h1 contains the text "Page Title" (as seen by e.g. search engines). For <h1>Page Title</h1>, the h1 also contains the text "Page Title".

In particular, the CSS3 generated content is completely useless in such a situation, since it is very important that search engines index the content,

They would index the text "Page Title" since it's in the markup.

and it is highly unlikely they index content based on CSS3 generated content, or ever will.

If you want search engines to index the image, use <object> or <img>.

The alt attribute text, as I noted in the post above, is a hack and a compromise.

Compromize between what?

[ahagen]

If there is an element, it should not be empty. This

Code: Select all

<h1>
<img src="logo.png" alt="logo" />
</h1>


is the "solution" you suggest, but that is contrary to what HTML and markup is all about. There should not be any empty HTML elements. H1 is empty in the above example. The fact that there is an img with an alt is irrelevant. The img is going to display the same regardless of whether there it is inside an h1, except on the rare but important case of browsers with images disabled.

Why not just this?

Code: Select all


<img src="logo.png" alt="logo" />



It does the same thing. You can even put a span element around the img and style it any way you want.

Covering for an ancient design flaw in HTML is counterproductive.

[zcorpan]

If there is an element, it should not be empty.

I don't disagree, but it's too late to change now.

This

Code: Select all

<h1>
<img src="logo.png" alt="logo" />
</h1>


is the "solution" you suggest, but that is contrary to what HTML and markup is all about. There should not be any empty HTML elements. H1 is empty in the above example.

No, it contains an img element.

The fact that there is an img with an alt is irrelevant.

Why?

The img is going to display the same regardless of whether there it is inside an h1, except on the rare but important case of browsers with images disabled.

I don't see how this is any different with your proposal.

Why not just this?

Code: Select all


<img src="logo.png" alt="logo" />



It does the same thing.

No, it doesn't convey that it is a heading. It won't show up in the document outline.

[ahagen]

All right. I can respect your opinion. My opinion is that the noimg element would be clean, elegant, efficient, extremely useful, popular, and not too difficult for browser manufacturers to implement.

As for the HTML 5 spec, I thought it wasn't going to be done until 2013? Maybe a news report I read got it wrong.


...

The basic problem that I think needs to be solved is that web pages often break if one or more of the following are disabled: scripting, images, and style. This problem mostly surfaces around page headings, because web authors want to use an image and text simultaneously. Web authors should be able to gracefully avoid such breakage, but with the current tools it is impossible. One way to theoretically solve this would be a new, global attribute.

This constitutes a second alternative proposal. Unfortunately, it seems likely to be unworkable. It might create havoc. For one thing, it would replace the "hidden" attribute.

Let's call this attribute dmod. When present in the following elements, it has no effect: html, head, title, base, meta, param, script, style, link, body, and noscript.

When present in any other element, dmod can be set to an integer 0-9. When set to anything else, the user agent is to treat it as if it were set to 0.

0 - Always display the element, except inherit the parent's setting if different. Default for all elements except noscript.
1 - Display if scripting is disabled. Default for noscript.
2 - Display if images disabled
3 - Display if scripting and images disabled
4 - Display if style disabled
5 - Display if scripting and style disabled
6 - Display if images and style disabled
7 - Display if scripting, images, and style disabled.
8 - Do not display (equivalent to the hidden attribute).
9 - Always display the element, and do not inhreit the setting from the parent element.

Usage:

Code: Select all

<p dmod="7">The user agent is only to display this paragraph if scripting, images, and style are all disabled.</p>


[zcorpan]

The basic problem that I think needs to be solved is that web pages often break if one or more of the following are disabled: scripting, images, and style.

This is mostly the case because the author was ignorant and didn't test properly with things disabled. It's possible to make things not break when one or more of those are disabled (or only partially supported).

This problem mostly surfaces around page headings, because web authors want to use an image and text simultaneously. Web authors should be able to gracefully avoid such breakage, but with the current tools it is impossible.

It's not clear to me what is impossible.

One way to theoretically solve this would be a new, global attribute.

This constitutes a second alternative proposal. Unfortunately, it seems likely to be unworkable. It might create havoc. For one thing, it would replace the "hidden" attribute.

Let's call this attribute dmod. When present in the following elements, it has no effect: html, head, title, base, meta, param, script, style, link, body, and noscript.

When present in any other element, dmod can be set to an integer 0-9. When set to anything else, the user agent is to treat it as if it were set to 0.

0 - Always display the element, except inherit the parent's setting if different. Default for all elements except noscript.

You can do this today with just <div>Hello</div>

1 - Display if scripting is disabled. Default for noscript.

You can do this today with <noscript>Hello</noscript> or <div>Hello</div> and remove the div from the DOM with script.

2 - Display if images disabled

You can do this with <img src=... alt="Hello"> or <object data="...">Hello</object> or <div>Hello</div> with div { content:url(...) }

3 - Display if scripting and images disabled

You can do this with a combination of 1 and 2 above.

4 - Display if style disabled

You can do this with <div>Hello</div> and div { display:none } or div { height:0; overflow:hidden }

5 - Display if scripting and style disabled

You can do this with a combination of 1 and 4 above.

6 - Display if images and style disabled

You can do this with a combination of 2 and 4 above.

7 - Display if scripting, images, and style disabled.

You can do this with a combination of 1, 2 and 4 above, e.g.:

<div><img src=... alt="Hello"></div>

div.parentNode.removeChild(div);

div { display:none }

8 - Do not display (equivalent to the hidden attribute).

You can do this with <div hidden>Hello</div>

9 - Always display the element, and do not inhreit the setting from the parent element.

I don't understand how you would display an element if its parent is not displayed.

[ahagen]

Thank you. While that is not exactly elegant, it is mostly functional. There is still no way to display anything other than a plain text string if images are disabled. There should be a way to display multiple HTML elements if images are disabled.

I continue to believe HTML 5 would benefit from the noimg element. I'd like to thank you for responding here on this thread. Have a good day.

[zcorpan]

There is still no way to display anything other than a plain text string if images are disabled.

Yes there is:

<object data="...">Hello <em>World</em></object> or <div>Hello <em>World</em></div> with div { content:url(...) }

I continue to believe HTML 5 would benefit from the noimg element.

Feel free to post your proposal to the WHATWG mailing list; then the HTML5 editor will consider it and respond.

[ahagen]

I appreciate your reply. I didn't know that about the object element.

The unofficial source W3schools.com states: "Important: Do not use the <object> tag for images, use the <img> tag instead!"

http://www.w3schools.com/TAGS/tag_object.asp

No explanation is given. It appears, though, that IE 8 renders the image with scrollbars. Perhaps that is why they don't recommend it.

http://www.xml.com/2003/07/02/examples/object-demo-1.html. See origin of that link http://www.xml.com/pub/a/2003/07/02/dive.html.

I don't know if HTML 5 has a rule to the effect of "if you render an image from the object element, do not render it with scrollbars." In any case, the object element would work here if browsers supported it. I think it would be easier for browsers to implement noimg than it would to herd the cats and get all the browsers to render the object element the same. Not sure, though.

[zcorpan]

The unofficial source W3schools.com states: "Important: Do not use the <object> tag for images, use the <img> tag instead!"

http://www.w3schools.com/TAGS/tag_object.asp

No explanation is given. It appears, though, that IE 8 renders the image with scrollbars. Perhaps that is why they don't recommend it.

Likely. I think it's even worse in earlier versions of IE.

http://www.xml.com/2003/07/02/examples/object-demo-1.html. See origin of that link http://www.xml.com/pub/a/2003/07/02/dive.html.

I don't know if HTML 5 has a rule to the effect of "if you render an image from the object element, do not render it with scrollbars."

It says it should render the same as <img>.

If the resource type starts with "image/", and support for images has not been disabled

Apply the image sniffing rules to determine the type of the image.

The object element represents the specified image. The image is not a nested browsing context.

http://www.whatwg.org/specs/web-apps/cu ... ct-element

I guess IE8 thinks it's a nested browsing context (like <iframe>) rather than an image (like <img>).

In any case, the object element would work here if browsers supported it.

Non-IE browsers support it fine.

I think it would be easier for browsers to implement noimg than it would to herd the cats and get all the browsers to render the object element the same. Not sure, though.

I think it would be simpler for IE to render <object> like <img> when it's an image. They have the code for <img> already, and they can surely determine whether something is an image or not (they need to for <img>).

<noimg> might not be so simple to implement. I presume that you want to show the fallback when the image is broken, too, not just when images are disabled. Now the browser needs to know which <noimg> element corresponds to which <img> element. How would you do that?

Also, as far as I can tell, <noimg> doesn't offer anything new, and it wouldn't degrade nicely in existing browsers (existing browsers would show both the image and the fallback -- how would you solve that?).

[ahagen]

Noimg content would only display on compliant browsers during those periods in which the browser has images disabled. Thus, there is no facility for linking a noimg element to any particular img element or other element. If there was a broken image, it wouldn't have any effect on any content inside a noimg element.

If a site author nested an img inside a noimg tag, and images were disabled on the browser (or the browser did not support images), alt text would be output, not the image. If the image was corrupt, it wouldn't matter because the image wouldn't be displayed in any case.

A third alternative, separate possibility comes to mind. This would be different than the noimg element proposal.

Code: Select all


<img src="graphic.png">

<h1>Title of site, displaying only if graphic.png above is not loaded</h1>

</img>



[zcorpan]

Noimg content would only display on compliant browsers during those periods in which the browser has images disabled. Thus, there is no facility for linking a noimg element to any particular img element or other element. If there was a broken image, it wouldn't have any effect on any content inside a noimg element.

That makes it simpler to implement, but also makes it less useful compared to <object> and <img alt> (which both do show the fallback when the image is broken).

If a site author nested an img inside a noimg tag, and images were disabled on the browser (or the browser did not support images), alt text would be output, not the image.

Right.

If the image was corrupt, it wouldn't matter because the image wouldn't be displayed in any case.

If the image was corrupt you would want the fallback instead. No?

A third alternative, separate possibility comes to mind. This would be different than the noimg element proposal.

Code: Select all


<img src="graphic.png">

<h1>Title of site, displaying only if graphic.png above is not loaded</h1>

</img>



This is not compatible with existing Web content.

[ahagen]

Nice points.

As for wanting a fallback for a corrupt image, I don't see how that would affect the proposal for noimg.

If I may ask, do you have a guess, or have you heard speculation, about why Microsoft has not properly implemented the object element in IE 8?

I wonder why it isn't a higher priority. IE8 is really a very good browser. There is support for complex CSS selectors and more. It is reasonable, I believe, for many web sites to support no version of IE other than version 8. As a former Microsoft critic, I have to say I've been impressed with the standards-based turn Microsoft has taken recently.

That makes it even more confusing why Microsoft hasn't implemented the object element properly as yet. Does Microsoft see the object element as a competitor to Silverlight or another of Microsoft's technologies?

A solution for the problems I've identified in this forum thread would be great. As you have pointed out, the object element solves the problems. Implementations of the noimg element would take some time. As you've said, it is at least possible, if not probable, that Microsoft could fix object image support faster. But is there some business reason why they won't do that?

On this general subject, I found a relevant blog post from Mark Pilgrim.