<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Free Xenon Consulting &#187; H1 Element</title>
	<atom:link href="http://www.freexenon.com/tag/h1-element/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.freexenon.com</link>
	<description>PSD or Image to Site with Accessibility Built In</description>
	<lastBuildDate>Mon, 17 May 2010 15:59:18 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Header Tags.. Oi!!</title>
		<link>http://www.freexenon.com/2009/10/19/header-tags-oi/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=header-tags-oi</link>
		<comments>http://www.freexenon.com/2009/10/19/header-tags-oi/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 20:57:52 +0000</pubDate>
		<dc:creator>FreeXenon</dc:creator>
				<category><![CDATA[Web Standards]]></category>
		<category><![CDATA[H1 Element]]></category>

		<guid isPermaLink="false">http://www.fx.serenitystudios.com/?p=10</guid>
		<description><![CDATA[I originally wrote this in November of 2005 years ago but did not finish it, I think, and thought I would publish it as it is. The idea is basically finished&#8217;ish but still needs some work.

Who is this article written for??
This is written for an audience that has a basic understanding of HTML design. We [...]]]></description>
			<content:encoded><![CDATA[<p><em>I originally wrote this in November of 2005 years ago but did not finish it, I think, and thought I would publish it as it is. The idea is basically finished&#8217;ish but still needs some work.</em></p>
<div id="WrittenFor">
<h2>Who is this article written for??</h2>
<p>This is written for an audience that has a basic understanding of HTML design. We will take at a big picture look at the specifications and how the language in the specification affects its use and interpretation. We will cross-reference specifications and the Web Logs of &#8216;Experts&#8217; in the accessibility and standards communities.</p></div>
<p><!-- end WrittenFor --></p>
<div id="Introduction">
<h2>Introduction</h2>
<p>There was a huge not-so-conclusive debate on the <a href="http://www.gawds.org/"><abbr title="Guild of Accessible Web Designers">GAWDS</abbr></a> mailing list (last week of March) regarding the use of the &lt;h1&gt; tag. What really got people jumping was wondering whether it was OK to use more than one &lt;h1&gt; tag per document. It is well known in the development community that the specification does not explicitly prohibit this. With this in mind I am going to examine the <abbr title="World Wide Web Consortium">W3C</abbr>&#8217;s specifications and the <abbr title="Web Content Accessibility Guidlines">WCAG</abbr>&#8217;s to come up with an answer as to how the &lt;h1&gt; tag should be used. Will there be definitive answer &#8211; No, but best practices will be covered.</p>
<p>To really understand how header tags, more specifically the &lt;h1&gt; tag, should be used we need to look at the <a title="Jump to the Title Element Usage portion of this article" href="http://www.freexenon.com/2009/10/19/usage-of-the-title-element/">title</a> and <a title="Jump to the Link Element Usage portion of this article" href="http://www.freexenon.com/2009/10/19/usage-of-the-link-element/">link</a> elements and see how they are supposed to be used. When we better understand them it will become more apparent how the &lt;h1&gt; tag should be be utilized.</p>
<p>The Title and Link Elements should provide for context and the &lt;h1&gt; tag should reflect the topic of the document.</p></div>
<p><!-- end Introduction --></p>
<div id="H1Tag">
<h2>Usage of the h1 Tag</h2>
<p>We have the title element and the link element to show how a specific page relates to the rest of the site, topic, or content external to itself. The link element shows how the page relates to other pages in the collection (either topically or site wide) on a page basis relative to itself, and the title shows how the page relates to other pages on a topical basis relative to the topic/content. What is left to do? Tell what the page is about and that is what the &lt;h1&gt; tag should be about.</p>
<p>Having said that I am now going to say something that really seems counter-productive. The real problem with the spec is the examples that they use to support the spec and the language they use. There are a few different ways  to interpret the spec and examples that support and contradict these interpretations. How you decide to implement the spec all depends on which statements and examples hold credence for you. There are three  schools of thought here: There is only one H1, there can be multiple H1&#8217;s , and the headers denote Importance rather than structure schools. I will no explain how these schools are derived from the spec and the examples that support and contradict them.</p>
<h3>Structure and Relative Importance</h3>
<p>The one  statement that many people key in on  the <a href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.5">Headings Section</a> is the following statement <q cite="http://www.w3.org/TR/html401/struct/global.html#h-7.5.5"> There are six levels of headings in HTML with <samp>H1</samp> as the most important and <samp>H6</samp> as the least. Visual browsers usually render more important headings in larger fonts than less important ones.</q> It is thought that the header tags are used to denote importance and not structure. This is the only statement that supports this, the rest of the reviewed material supports their use determining document structure. Structure, structure, structure&#8230;</p>
<p>The areas of the HTML 4.01 specification that I found the most informative of this topic are as follows: <a href="http://www.w3.org/TR/html401/struct/global.html">The Global Structure of an HTML Document</a>, <a href="http://www.w3.org/TR/html401/struct/links.html#h-12.3">12.3 Document Relationships: The Link Element</a>. I referenced the XHTML 2.0 specification to see where the technology was heading which will give further perspective to its correct use. The 2.0 specification generally mirrors the 4.01 spec. If there are illuminating differences I will mention them. I start the big picture look here with the specification by referencing the link and title elements as well.</p>
<h3>More than one</h3>
<p>So now we have the subject of more than one &lt;h1&gt; tag on a page. Do the specs explicitly forbid it? NO. Do they give example to promulgate the belief that it is acceptable? Yes. Should you do it? My belief is No.</p></div>
<p><!-- end H1Tag --></p>
<div id="Example" class="BaseForumContent">
<h2>Examples</h2>
<p>We will take a look at our fictitious site of www.flowerguide.com whose name is &#8216;The Flower Guide&#8217;. They have a fairly small informational site with 5 pages: site index, Buying Flowers, Types of Flowers, Growing Flowers and Flower Arranging respectively. We will show you a good  example as to how the Title and Link elements and the &lt;h1&gt; tag should be for the &#8216;Types of Flowers&#8217; page.</p>
<h3>Types of Flowers Page</h3>
<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Types of Flowers -  The Flower Guide - www.flowerguide.com&lt;/title&gt;
    &lt;link rel="start" title= "The Flower Guide Home" src="index.htm" /&gt;
    &lt;link rel="next"  title= "Next page: Arranging Flowers" src="arranging.htm" /&gt;
    &lt;link rel="prev"  title= "Previous page: Buying Flowers" src="buying.htm" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Types of Flowers&lt;/h1&gt;
...content...
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
<p><!-- Example --></p>
<div id="Sources" class="BaseForumContent">
<h2 id="P040405_Check">Sources of Information and Influences</h2>
<h3>The World Wide Web Consortium&#8217;s Specifications</h3>
<p>To answer any question regarding the use of <abbr title="HyperText Mark-up Language">HTML</abbr> tags we must analyze the source. The source, of course, is the specifications as set forth by the <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>. For the purposes of this discussion I have examined the <a href="http://www.w3.org/TR/html401/"><abbr title="HyperText Mark-up Language">HTML</abbr> 4.01</a> and <a href="http://www.w3.org/TR/xhtml2/">XHTML 2.0</a> (working draft) specifications, <a href="http://www.w3.org/TR/WCAG10/"><abbr title="Web Content Accessibility Guidlines">WCAG</abbr> 1.0</a> and <a href="http://www.w3.org/TR/WCAG10-HTML-TECHS/">Techniques</a>, <a href="http://www.w3.org/TR/WCAG20/"><abbr title="Web Content Accessibility Guidlines">WCAG</abbr> 2.0</a> (Working Draft) and <a href="http://www.w3.org/TR/WCAG20-GENERAL/">Techniques</a>,<br />
and the following <abbr title="World Wide Web Consortium">W3C</abbr>&#8217;s <a href="http://www.w3.org/QA/Tips/">Tips of the Day</a>:</p>
<ul>
<li><a href="http://www.w3.org/QA/Tips/good-titles">&lt;title&gt;:<br />
the most important element of a quality Web page</a></li>
<li><a href="http://www.w3.org/QA/Tips/use-links">Use &lt;link&gt;s<br />
in your document</a></li>
<li><a href="http://www.w3.org/QA/Tips/Use_h1_for_Title">Use &lt;h1&gt; for<br />
top-level heading</a></li>
<li><a href="http://www.w3.org/QA/Tips/headings">Use headings to structure<br />
your document</a></li>
</ul>
<p>I have also perused the <a href="http://whatwg.org/">WHATWG</a>&#8217;s <a href="http://whatwg.org/specs/web-apps/current-work/">Webforms 1.0 proposal</a> to the <a href="http://www.w3.org/">W3C</a> to be the successor the HTML 4.01 spec. As you can see I have not just examined writings about headers themselves; I have also checked other things that affect or modify the use of header tags such as the link<br />
and title elements which will give us some perspective as to their proper use.</p>
<h3>Web Logs of Industry Gurus or Organizations</h3>
<p>I also Google&#8217;d around for, and check well known BLogs of very active and knowing people in the industry to give even more perspective to the specifications as written. Specifications may look good on paper but how they are implemented and iterpreted may be a different matter. The following Web Logs have influenced my writing as I have referenced them during my research.</p>
<h4 id="Sources-BLogs">BLogs</h4>
<ul>
<li><a href="http://jogin.com/weblog/archives/2004/07/19/hierarchy">Jogin: Hierarchy</a></li>
<li><a href="http://www.andybudd.com/archives/2004/07/heading_for_trouble/">Andy Budd: Heading for Trouble</a></li>
<li><a href="http://www.andybudd.com/archives/2005/02/heading_elements_semantics_and_the_spec/index.php">Andy Budd: Heading Elements Semantics and the Spec</a></li>
<li><a href="http://annevankesteren.nl/archives/2004/07/hierarchy">Anne van Kesteren: Hierarchy</a></li>
<li><a href="http://www.meyerweb.com/eric/thoughts/2004/07/21/pick-a-heading/">Eric Meyer: Pick a Heading</a></li>
</ul>
<h4 id="Sources-Organizations">Organizations</h4>
<ul>
<li><a href="http://www.wats.ca/">Web Accessibility Testing and Services</a></li>
</ul>
</div>
<p><!-- end Sources --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.freexenon.com/2009/10/19/header-tags-oi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

