The Future of the Web: My Vision (May 1, 2012)
Like probably many others who read this blog, I am a web design enthusiast, web standards advocate, and web designer by trade. I have been working with HTML since the early 2000s, and have enjoyed it ever since.
Over the years, the web has evolved around me. I have watched it grow and adapt. And now, as a newly started professional web designer, I wish to contribute.
From this week forward, I will be writing and sharing both opinions and tutorials on my opinions of the web, where it’s gone, and most importantly, where it’s going.
Article 1: Websites and Sectioning
Part 1: The Basics
As a researcher by hobby, I often find myself reading through various encyclopedic websites. Whether it be a wiki, or a single purpose website devoted specifically to that aim, I spend countless hours of my time using them.
With the new work on HTML to semantically markup a website, I am rather excited to see what the future may hold for such informational websites. The concepts written in the specifications and drafts are very intriguing, and will hopefully someday improve the semantic importance of the web. Combine this with the ability for future screen readers, search engines, etc. to extract such data, the possibilities are near endless.
However, as I have read around, I have noticed that not all things are as clear as they should be. Although it has been several years since the formerly labeled HTML5 specification has come into the light, I can still see these arguments floating about.
In this specific case, I am referring to the use of the semantic elements such as <article>, <section>, and so-forth, as well as their relationship to the <h1>-<h6> elements.
Because it seems that many are in disagreement about the matter, I felt I should share my opinions as to what they mean, and how they could be used.
Below, you will see the method I have devised for sectioning out content.
(Note: All information is of my personal opinion, and may not reflect the views of other web designers, the WHATWG, or the W3C.)
Firstly, let us imagine the idea of a web page, likely encyclopedic in content. This page has a single focus, a single section, and a single paragraph.
At the very basic, it would be marked up as follows:
As we can see, this bare minimum design utilizes three elements: <article>, <section>, and <p>. These elements, as can be semantically understood, represent the start of the article, the internal section, and the paragraph within the section.
Fairly simple, right?
Well, let’s take this a step further. What if you were to want to add a title to the article?
This is how it would be done.
<article><header><h1>Hello, World!</h1></header><section><p>Hello, World!</p></section></article>
Now, we see the addition of two new elements: <header> and <h1>. The <header> element designates this region of the document as the header of the article. The <h1> element designates this line of text as the title, or heading of the article.
Still, this seems simple, doesn’t it?
For our next step, let’s say that we wish to increase the scope of this article, from Hello, World! to Hello, World! and Foobar.
<article><header><h1>Hello, World! and Foobar</h1></header><section><h1>Hello, World!</h1><p>Hello, World!</p></section><section><h1>Foobar</h1><p>Foo</p><p>Bar</p></section></article>
Now we have an article which is both titled, and has two titled sections, each containing a heading within an <h1> element. We also have the article itself, headed within both an <h1> and <header> element.
This concept, though simplistic, is easy to read by humans, and holds semantic value to machines and scripts.
In conclusion, this is the way that I view the new method of sectioning content in HTML. Using this method, we come up with a quick, easy method to divide a document, and even a website, into logical sections which can be easily read by both humans and machines.
Next time, we will be discussing part two of this topic: Styling.
I have already implemented the new sectioning system on one of my sites, now i only use h1 for section headings – this has in no way effected my search engine rankings in a bad way, now i have said it – just before someone starts to speculate that it may hurt rankings!
I have been using the new system for just a little over a year.
sorry but this is all way too complicated
do you really think the future of the web lies in complicating things?
@Mark, this is actually quite a bit simpler than most current layouts which rely upon tiered divs or multiple other containers to create the same effect and since it segregates the structure slightly more from the display in a semantic fashion, it will be far more pleasant for a CSS designer to work with.
The examples here leave a little to be desired – it would be better to take excerpts from something like Alice in Wonderland (which is out of copyright) – in order to more fully demonstrate actual usage. Even lipsum would be better than foobar. :p
@Mark: What exactly is it about this that over overcomplicates things?
@Shawn: Actually, the main reason I chose the examples I did was because they are common programming tests.
I originally was using lipsums, but I figured that it would be overkill to use something more complex before I get to the more complicated examples (which include styling.)
Unfortunately, screen readers don’t currently (May 2012) implement the HTML5 outlining algorithm correctly, or at all (see e.g. http://www.456bereastreet.com/archive/201205/make_sure_your_html5_document_outline_is_backwards_compatible/).
I imagine you’ll be discussing that later, but I thought I’d mention it now — the document structure *can* be easily read by machines (the spec even includes the damn algorithm, I think), but it currently *isn’t* read by the specific machines that people use to access the web.
I’m curious to know if there’s a reason you chose to use H1 for both the article and section headings rather than using H2 for the section headings. Am I missing the possible benefit of using H1 for both levels? Or is the benefit encoding a header relationship (Article-H1, Section-H1) entirely with the semantic markup? I guess I don’t see much of a difference between that and this: (Article-H1, Section-H2).
I never really paid attention to this when I learned HTML a decade ago, but with the HTML5 revisions, no better time to start. Thanks.
Articles should be part of section.
According to the new model, H1 tags are the heading tag used at the start of each section.
The reasoning for this is that an H2-H6 are meant to be levels of subheadings, while H1 defines the main heading title of each section.
The old model will technically work, but then each tag would be seen as a new heading.
With the introduction of thetag, it allows a single logical heading with multiple levels.
I hope that explains it.
What do you mean by that?