The WHATWG Blog

Please leave your sense of logic at the door, thanks!

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


<warning>Warning: This article discusses the topic of <semantics>semantics</semantics></warning>

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:


<article>
<section>
<p>Hello, World!</p>
</section>
</article>

Figure 1
Output of Example 1

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>

Figure 2
Output of Example 2

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>

Figure 3
Output of Example 3

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.

Until then,

-Christopher Bright

Posted in Elements, Syntax, Tutorials | 8 Comments »

Patent Policy

The WHATWG now has a patent policy, the WHATCG. We will keep using the same mailing list, the same IRC channel, the same web sites, but now sometimes we will publish through the WHATCG as well for patent policy purposes per the W3C Community Final Specification Agreement.

If you could previously not join the WHATWG because no patent policy was in place, now is the time to reconsider. If you are unsure how this applies to you, then it most likely does not.

Posted in W3C, WHATWG | No Comments »

WHATWG Weekly: Fullscreen dialog

Ian Hickson made a proposal to unify Web Intents with registerProtocolHandler() and registerContentHandler(). The Encoding Standard now has all its decoders defined. This is the WHATWG Weekly.

The big news this week is the new dialog element. Introduced in revision 7050, along with a new global attribute called inert, a new form element method attribute value "dialog", and a new CSS property anchor-point.

Yours truly updated the Fullscreen Standard just in time for the dialog element. It defines a new CSS ::backdrop pseudo-element as well as a new rendering layer to address the combined use cases of Fullscreen and the dialog element.

Posted in Weekly Review | No Comments »

WHATWG Weekly: HTML canvas version 5 has arrived

The StringEncoding proposal is getting closer to consensus. It now consists of a TextEncoder and a TextDecoder object that can be used both for streaming and non-streaming use cases. This is the WHATWG Weekly.

Some bad news for a change. It may turn out that the web platform will only work on little-endian devices, as the vast majority of devices is little-endian today (computers, phones, …) and code written using ArrayBuffer today assumes little-endian. Boris Zbarsky gives a rundown of options for browsers on big-endian devices. Kenneth Russell thinks the situation can still be saved by universal deployment of DataView and sufficient developer advocacy.

Over the past couple of weeks the canvas element 2D API has gotten some major new features. Ian Hickson wrote a lengthy email detailing the canvas v5 API additions. Path primitives, dashed lines, ellipses, SVG path syntax, text along a path, hit testing, more text metrics, transforming patterns, and a bunch more.

Posted in Weekly Review | No Comments »

WHATWG Weekly: Path objects for canvas and creating paths through SVG syntax

Jonas Sicking proposed an API for decoding ArrayBuffer objects as strings, and encoding strings as ArrayBuffer objects. The thread also touched on a proposal mentioned here earlier, StringEncoding. This is the mid-March WHATWG Weekly.

Revision 7023 added the Path object to HTML for use with the canvas element, and the next revision made it possible to actually use it:

var path = new Path()
path.rect(1,1,10,10)
context.stroke(path)

A new method addPathData() (introduced in revision 7026) can be used to construct canvas paths using SVG path data. Revision 7025 meanwhile added ellipse support to canvas.

Tune in next week for more additions to canvas.

Posted in Weekly Review | 2 Comments »