Published in General on Monday, March 22nd, 2004
It's been a busy weekend and will most definitely be a busy week.
We have two new sites ready to go, however one is a little behind on content, so may not launch this week. The other is also awaiting some last minute translation copy, but will hopefully launch this week.
Due to the above, the 'blog script' update that I have been hinting at here and there is on hold; so too, it seems, is the follow up article on filling a block-level element with an anchor (though I would say that has a good chance of happening soon).
Some people have passed on word to me that they weren't quite sure what I was getting at in Document Structure and Semantics Re-examined.
Of the three messages that I received, my favorite was simply worded "huh?" - I can understand. As I gain experience here writing this blog I'm learning more and more how poor I can be at communicating. At any rate, here's another shot at explaining what I was getting at...
In the past, I've normally reserved Heading Tags (<h1> etc.) for marking up the main content of a given web page. Some forum conversations got me to thinking that perhaps I could improve both the semantics and accessibility of my markup in an HTML document by using heading tags to mark up the sections of the HTML document as much as the content of the page.
Let me explain with an example: here, <h1> holds the main topic of the page, the <h2's> are used to delineate sections of the HTML document, while <h3's> downwards are used for delineating the actual "content".
<h1>Main Title Goes Here</h1> <div id="content"> <h2>Content</h2> Content goes here...</h3's>, </h4's>, </h5's> etc. </div> <div id="Navigation"> <h2>Navigation</h2> Navigation goes here... </div> <div id="Search"> <h2>Search</h2> Search goes here... </div> <div id="Languages"> <h2>Languages</h2> Languages go here... </div>
My take on why this is good for markup, is that while <div's> are good for grouping related elements together, they don't have any semantic value of their own, other than to indicate that the enclosed elements are related.
By using the aformentioned technique, each section gets an identification that is tangible to users and easily hidden with CSS if required or desired. This, in my opinion (hello semantics), more accurately follows the specs...
A heading element briefly describes the topic of the section it introduces.
Ideas and criticisms welcomed.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Ah ha! That makes sense to me. I've been wondering the very same thing - how do you semantically use headers? I like the heirarchy that you've established, kind of because it goes along with the way I've been thinking.
Thank you for stating it in a clean and simple manner. I'm going to have to borrow that idea for future use.
Hmmm. Damn linearity in html and the DOM. Assuming a site as a collection of articles. The title of an article is an h1. Assigning an h2 as a (sub)title or sectionhead to a search box/area would then imply a parent-child relationship to that article only. Idem for the navigation section in your example.
Don't get me wrong - the idea of labeling those various areas of a page (as the entity that appears on screen, in one browser window) with H tags is good, and I have been using that sometimes. But are those various areas parts of the same narrative within one document?
HTML is currently lacking some 'sections' labeling that ould provide a kind meta relationship between those various parts on a page, their relationship in the whole site structure.
Hey Tom, glad you liked it! I do agree with Philippe, that html is lacking somewhat in how to correctly label these sections - I would imagine that something is/will be done about this.
I suppose that the way that I look at this would be that the <h1> defines the title of the html document, and therefore, since an html document 'requires' some form of navigation etc. it would be fair to label the document like this. So <h1> defines the topic of the html document, while the <h2's> define the function/subject of the corresponding subsection within that html document.
Philippe - congrats on the weblog, looking forward to it! We don't hear enough from you here in Spain ;-]
I can see the problem that Philippe is talking about. I've wondered about the relationship in terms of using say h2 for navigation and an h2 in an article. What's the relationship between them? Should the article move on to h3? Or is that just a decendant of the h2 in the navigation? And, of course, you coule run out of headings in a hurry doing that.
But it seems to me that your examples above address Philippe's concerns. The fact that there are distinct sections - content, navigation, etc. - should 'reset' the relationship and hierarchy for each section. And I think not only is there a relationship within each section, the overall document relationship remains intact: h1 = prime document header; h2 = section headers, children of h1; h3 = subsections with in any section, children of h2; etc. Think of a traditional outline or a tree.
Hm. Or maybe I didn't understand Philippe afterall. Did I confuse anyone (besides myself)? (Oh, and it's Tim not Tom. Just one slip of the finger, I'll forgive ; )
Hey Tim, sorry about that. It was real late and I shouldn't have been at the keyboard.
I think you understood Philippe, or at least I think you and I both saw the same thing!
In the end it comes down to not having the right tools, but doing our best with what we have right now. For me the accessibility end makes sense, though some will argue that there is a tradeoff with respect to the fact that you may be diluting prime search engine keyword real-estate.