Forum Moderators: open
e.g could you just as easy use H1 all the way through but with different classes ? ? ? ?
hth
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.
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.
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.
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.
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.
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)
<title>widgets</title>
<h1>1. introduction</h1>
<h1>2. colored widgets</h1>
<h2>2.1. red widgets</h2>
<h2>2.2. green widgets</h2>
<h2>2.3. blue widgets</h2>
<h1>3. conclusion</h1>
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.
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.
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
e.g
<h1>Learn to drive</h1>
<p>content</p>
<h2>Theory Test</h2>
<p>content</p>
<h3>Study for theory test</h3>
<p>content</p>
<h2>Practical Test</h2>
<p>content</p>
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>
<p>content</p>
<h2>Theory Test</h2>
<p>content</p>
<h3>Study for theory test</h3>
<p>content</p>
<h2>Practical Test</h2>
<p>content</p>
You example is fine:
<h1>Learn to drive</h1>
<p>content</p>
- <h2>Theory Test</h2>
- <p>content</p>
- - <h3>Study for theory test</h3>
- - <p>content</p>
- <h2>Practical Test</h2>
- <p>content</p>
Think of it as indent levels.
h1 = main heading
- h2 = section heading
- - h3 = subsection heading
etc
