yes they are numbered on an importance level 1 being the highest and should really only be used once on the page and 5 being the lowest.
The "H" elements are not only numbered by importance, they also show the information hierarchy of the page, just like an outline would.
So i have floated collums left and right and main content centre (therefore my content in the floated collums comes before my main content in html doc) top of my main content is my main H1, as i have other headings before my main content in these floated collums which are of less importance woul this not brake the hierarchy ? ?
How would i go around resolving this ?
Don't worry about the order in the source code, then - since CSS can always move the divs around on final display. Just create an information hierarchy as you use these Hn elements. Very possibly the floated elements may not even need to use Hn elements, only the main content area.
Yes H tags are ordered in sequence of importance.
|Don't worry about the order in the source code |
As per my knowledge in order of source they MUST be in the sequence of importance starting from highest H. I may be wrong may be someone else can shed some light onto this. Page should be from highest to lowest H when we see it without CSS.
If there is such a rule somewhere - that the H elements MUST appear in a certain order in the source code - then whoever wrote that rule has not understood CSS and source-ordered content [webmasterworld.com].
But as I said above, it's most likely that no H elements need to be used in those floated divs at all. The information hierarchy would probably appear in the main content area alone.
In the original html specs the intent was to use <h1> till <h6> in a hierarchic manner: <h1> being the highest heading of your document (like the chapter title), h2 being the next level and as you need you can have subsections with h3 and so on. I doubt many real word documents actually need 6 levels of headings.
Think of it as an outline heading: if you can't number it anymore, you're using it in the wrong manner.
I'm not sure where the only one <h1> comes from, I suspect it's SEO inspired as it would be OK in a long document IMHO.
If you'd chop up a long document in multiple .html files, an unusual order of hX elements could also be quite logical (it all depends on where you chop up the long document).
In modern html I don't think there's much reason to be overly concerned by it anymore. But I'd try to use it somewhat logical and hierarchically, esp when thinking of screen readers, people looking at your code without the benefit of parsed CSS, search engines, etc.
I'm sure SEO-wise there is more to say, but I'd be very careful with going too far there, as what's ok to do changes over time.
Using h1 with classes to create the different levels:
In designing your page I think it's best to make the most use of the html elements you can in order to add semantics to the content in the html markup without thinking ahead that CSS can solve how it all renders.
If you don't agree: why use <h1> to start with? Why not a div or a span? As a matter of fact, why use *any* other element than a div with a class or id ?
Try to make sure the html rendered without *any* CSS would actually make sense and be a readable logical document.
That means using as little as possible <div> (and <span>) and class="foo" (and id="bar"), the overuse of those is known as "divitis" or "classitis", and those sound like diseases for a good reason.
I'm one of those who believes in a single H1. The way I see it, if you think you need two H1 elements, then either:
1. You should have two documents... or
2. Both H1 elements should really be H2. That is, you've got an implicit H1 (the main document topic) that should be made explicit.
When it comes to SEO - the H1 has seen better days, as have the others. Web authors are too inconsistent in the use of H elements for today's search engines to use them as a clear relevance signal. There's too much noise on this particular channel, web-wide.
The <title> is the one you can only have one off.
So IMHO there's little wrong with an html version of your research paper
that has an outline of (ignoring paragraphs of text for brevity)
<h1>2. colored widgets</h1>
<h2>2.1. red widgets</h2>
<h2>2.2. green widgets</h2>
<h2>2.3. blue widgets</h2>
But I can live with repeating the <title> in a <h1> and then using all the others of a lower level. It all depends how much you use the title as part of the document.
But in most current web stuff the title of such a document would be part of the document and not the meta data and as such indeed: it could be the only h1.
In the future with (x)html5 and it's <header> and <section> tags etc. I'd not be that sure that e.g. such a research paper should not have multiple h1 headings as it can have that header serve the functionality of a title page in a paper copy.
The <header> and <section> tags in HTML5 are no doubt a response to the chaos that the original Hn elements generated. The original html spec was scholarly, but the average web author is not a scholar.
The answer to original post has been answered from the very start , that H1 H2 etc are in the order of importance.
darcbar , You can read the HTML standard link given below.
Now what we are discussing i guess the SOC importance of the headings.I am pointing few links which i read as part of my degree work. I think it shall be somewhat useful in the context of discussion.
The pure HTML 4.01 W3C Standard says that we should follow the markup priority sequence.
The W3C standard [w3.org] reads as follows
|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. |
There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.
Further coming to Accessibility the latest WCAG 2.0 guidelines have following important points worth noting
WCAG 2.0 Heading General Guideline [w3.org]
|To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.) |
Importance for Assistive technologies [w3.org]
|In some technologies, headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. |
Further its also interesting to note one example given by W3C here in this page that in source code order doesn't follow the sequence.
Its given in this link Using h1-h6 to identify headings [w3.org]
Tedster , Thank You for the link of SOC Discussion at WebmasterWorld i will go through it for sure.
The point which i have been following since long is to keep text in logical order of headings keeping SOC into consideration and then using CSS the carry out layout anywhere i want on the page. As floats are the easiest thing to use to change the way content is presented finally. In this way i am serving purpose for many people not only those who are visual customers of my website.
This is all very helpfull Thanks....
After reading benevolent001 message above-
WCAG 2.0 Heading General Guideline states:
To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.)
So if i have a webpage thats breaks this rule
<h1>Learn to drive</h1>
<h3>Study for theory test</h3>
would it be a priority to keep to the rule and maybe edit some content or keep the break in Hn hierarchy, as to me it seems neccessary and its not used for visual render ?
Also is there a way to float my two collumns to the left and right of my middle content without having them appear before my main content in my html mark-up ? ? ?
|<h1>Learn to drive</h1> |
<h3>Study for theory test</h3>
You example is fine:
<h1>Learn to drive</h1>
- <h2>Theory Test</h2>
- - <h3>Study for theory test</h3>
- - <p>content</p>
- <h2>Practical Test</h2>
Think of it as indent levels.
h1 = main heading
- h2 = section heading
- - h3 = subsection heading
I think im understanding the headings hierarchy but using floats means i wil have content above my H1 andthat doesnt feel right and with my designs i prefer to have headings in my floated boxes which are usually lower Hn which would mean they appear above my H1 in the source, is there not a way to float collumns without breaking hierarchy e.g floated content would appear below my middle main content in source ? ? ?
P.S RE Above
My left floated collumn is not a navigation or menu