Abstract#section1
The web is constantly evolving. New and innovative websites are being created
every day, pushing the boundaries of HTML in every direction. HTML 4 has
been around for nearly a decade now, and publishers seeking new techniques to
provide enhanced functionality are being held back by the constraints of
the language and browsers.
To give authors more flexibility and interoperability, and enable more interactive
and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.
Work on HTML 5, which commenced in 2004, is currently being carried out in
a joint effort between the
W3C HTML
WG and
the WHATWG.
Many key players are participating in the W3C effort including representatives
from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft;
and a range of other organisations and individuals with many diverse interests
and expertise.
Note that the
specification is still a work in progress and quite a long
way from completion. As such, it is possible that any feature discussed in
this article may change in the future. This article is intended to provide
a brief introduction to some of the major features as they are in the current
draft.
Structure#section3
HTML 5 introduces a whole set of new elements that make it much easier to
structure pages. Most HTML 4 pages include a variety of common structures,
such as headers, footers and columns and today, it is fairly common to mark
them up using div elements, giving each a descriptive id or class.
Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.
The use of div elements is largely because current versions of
HTML 4 lack the necessary semantics for describing these parts more specifically.
HTML 5 addresses this issue by introducing new elements for representing
each of these different sections.
The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.
The markup for that document could look like the following:
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
There are several advantages to using these elements. When used in conjunction
with the heading elements (h1 to h6), all of these provide
a way to mark up nested sections with heading levels, beyond the six levels
possible with previous versions of HTML. The specification includes a
detailed algorithm for generating an outline that takes the structure of these elements
into account and remains backwards compatible with previous versions. This
can be used by both authoring tools and browsers to generate tables of contents
to assist users with navigating the document.
For example, the following markup structure marked up with nested section and h1 elements:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
Note that for better compatibility with current browsers, it is also possible
to make use of the other heading elements (h2 to h6) appropriately in place
of the h1 elements.
By identifying the purpose of sections in the page using specific sectioning
elements, assistive technology can help the user to more easily navigate
the page. For example, they can easily skip over the navigation section or
quickly jump from one article to the next without the need for authors to provide
skip links. Authors also benefit because replacing many of the divs in the
document with one of several distinct elements can help make the source code
clearer and easier to author.
The header element represents the header of a section. Headers may contain
more than just the section’s heading—for example it would be reasonable
for the header to include sub headings, version history information or bylines.
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header>
<header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
The footer element represents the footer for the section it applies to. A
footer typically contains information about its section such as who wrote it,
links to related documents, copyright data, and the like.
<footer>© 2007 Example Inc.</footer>
The nav element represents a section of navigation links. It is suitable
for either site navigation or a table of contents.
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav>
The aside element is for content that is tangentially related to the content
around it, and is typically useful for marking up sidebars.
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>
The section element represents a generic section of a document or application,
such as a chapter, for example.
<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p> </section>
(Excerpt from A Tale of Two Cities)
The article element represents an independent section of a document, page
or site. It is suitable for content like news or blog articles, forum posts
or individual comments.
<article id="comment-2"> <header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O’Niell</a></h4> <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>That's another great article!</p> </article>
Video and audio#section4
In recent years, video and audio on the web has become increasingly viable
and sites like YouTube, Viddler, Revver, MySpace, and dozens of others are
making it easy for anyone to publish video and audio. However, since HTML currently
lacks the necessary means to successfully embed and control multimedia itself,
many sites are relying on Flash to provide that functionality. Although it
is possible to embed multimedia using various plug-ins (such as QuickTime,
Windows Media, etc.), Flash is currently the only widely deployed plugin
that provides a cross-browser compatible solution with the desired APIs for
developers.
As evidenced by the various Flash-based media players, authors are interested
in providing their own custom-designed user interfaces, which generally allow
users to play, pause, stop, seek, and adjust volume. The plan is to provide
this functionality in browsers by adding native support for embedding video
and audio and providing DOM APIs for scripts to control the playback.
The new video and audio elements make this really easy. Most of the APIs
are shared between the two elements, with the only differences being related
to the inherent differences between visual and non-visual media.
Both Opera and WebKit have
released builds with partial support for the video element. You may download
the experimental
build of Opera or a recent nightly
build of WebKit to try out these examples. Opera includes support for Ogg
Theora and WebKit supports all the formats that are supported by QuickTime,
including third party codecs.
The simplest way to embed a video is to use a video element and allow
the browser to provide a default user interface. The controls attribute is
a boolean attribute that indicates whether or not the author wants this UI
on or off by default.
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
The optional poster attribute can be used to specify an image which will be
displayed in place of the video before the video has begun playing. Although
there are some video formats that support their own poster frame feature, such
as MPEG-4, this provides an alternative solution that can work independently
of the video format.
It is just as simple to embed audio into a page using the audio element. Most
of the attributes are common between the video and audio elements, although
for obvious reasons, the audio element lacks the width, height, and poster attributes.
<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>
HTML 5 provides the source element for specifying alternative
video and audio files which the browser may choose from based on its media type
or codec support. The media attribute can be used to specify a
media query for selection based on the device limitations and the type attribute
for specifying the media type and codecs. Note that when using the source elements,
the src attribute needs
to be omitted from their parent video or audio element
or the alternatives given by the source elements will be ignored.
<video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>
For authors who want a little more control over the user interface so that
they can make it fit the overall design of the web page, the extensive API
provides several methods and events to let scripts control the playback of the
media. The simplest methods to use are the play(), pause(), and setting currentTime to rewind to the beginning. The following example illustrates the use of these.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">‖Pause</button>
<button type="button" onclick="video.currentTime = 0;">≪Rewind</button>
</p>
There are many other attributes and APIs available for the video and audio
elements that have not been discussed here. For more information, you should
consult the current
draft specification.
Document representation#section5
Unlike previous versions of HTML and XHTML, which are defined in terms of
their syntax, HTML 5 is being defined in terms of the Document Object Model
(DOM)—the tree representation used internally by browsers to represent the
document. For example, consider a very simple document consisting of a title,
heading and paragraph. The DOM tree could look something like this:
The DOM tree includes a title element in the head and h1 and p elements in the body.
The advantage of defining HTML 5 in terms of the DOM is that the language
itself can be defined independently of the syntax. There are primarily two
syntaxes that can be used to represent HTML documents: the HTML serialisation
(known as HTML 5) and the XML serialisation (known as XHTML 5).
The HTML serialisation refers to the syntax that is inspired by the SGML
syntax from earlier versions of HTML, but defined to be more compatible with
the way browsers actually handle HTML in practice.
<!DOCTYPE html> <html> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document. </body> </html>
Note that like previous versions of HTML, some tags are optional and are automatically
implied.
The XML serialisation refers to the syntax using XML 1.0 and namespaces,
just like XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>
Excluding differences in whitespace and the presence of the xmlns attribute,
those two examples are equivalent.
Browsers use the MIME type to distinguish between the two. Any document served
as text/html must conform to the requirements for the HTML serialisation
and any document served with an XML MIME type such as application/xhtml+xml must conform to the requirements for the XML serialisation.
Authors should make an informed choice about which serialisation to use,
which may be dependent on a number of different factors. Authors should not
be unconditionally forced to use one or the other; each one is optimised
for different situations.
Benefits of using HTML#section6
- Backwards compatible with existing browsers
- Authors are already familiar with the syntax
- The lenient and forgiving syntax means there will be no user-hostile “Yellow
Screen of Death” if a mistake accidentally slips through - Convenient shorthand syntax, e.g. authors can omit some tags and attribute values
Benefits of Using XHTML#section7
- Strict XML syntax encourages authors to write well-formed markup, which
some authors may find easier to maintain - Integrates directly with other XML vocabularies, such as SVG and MathML
- Allows the use of XML Processing, which some authors use as part of their
editing and/or publishing processes
How to contribute#section8
Work on HTML 5 is rapidly progressing, yet it is still expected to continue
for several years. Due to the requirement to produce test cases and achieve
interoperable implementations, current estimates have work finishing in around
ten to fifteen years. During this process, feedback from a wide range of
people including, among others, web designers and developers, CMS and authoring
tool vendors, and browser vendors is vital to ensure its success. Everyone
is not only welcome, but actively encouraged to contribute feedback on HTML5.
In addition to the specification, there are several other related efforts
designed to help people better understand the work.
- The Differences from
HTML 4 describes the changes that have occurred since
the previous version of HTML. - The HTML Design Principles discuss principles used to help make decisions,
and will help you understand the rationale behind many of the current
design decisions. - The Web Developer’s Guide
to HTML 5, which only recently began, is being
written to help web designers and developers understand everything they
need to know to write conforming HTML 5 documents, and provide guidelines
and describe best practices.
There are numerous venues through which you may contribute. You may join the
W3C’s HTML WG and subscribe/contribute
to the HTML WGmailing lists or
wiki. You may also subscribe and
contribute to the any of the
WHATWG mailing lists, post
to the WHATWG forum, post comments or
write articles on the WHATWG
blog. 
Okay, let’s see if I’ve got this right. Here’s where (X)HTML5 stands today:
* Current working draft includes the well supported @embed@ element.
* Since there won’t be any doctype, we can use @@ starting today.
This allows for a simple cross-browser way to embed Flash movies *today* using *valid* (X)HTML5 markup according to specification!
Although @embed@ doesn’t support fallback, I very much prefer it’s simplicity over “using the @object@ element”:http://www.alistapart.com/articles/byebyeembed
I don’t understand _why_ we need a new SGML-based language. I can (on a good day) understand why we need two branches of the language (one for smart, hand-coding humans, and one for machines to regurgitate), but I don’t understand why the second one has been designed to keep our web browsers so bulky, by not caring about syntax. Any machine can easily comprehend XML syntax, and spit that out instead of SGML.
XML leads to cell phones being able to use the whole web, and _much_ faster web browsers. We wee told that XML is the way of the future, and now the W3C stabs all the standardista-minor in the back with a new SGML-based language: not cool.
My first browse here!
So HTML5 will introduce a load of new semantic tags. But what exactly will they achieve? To the end user whether a tag is
The latter is anyway solved by XML and the former is only the case if the tags are used properly. But then that’s the problem with HTML in the first place. It is not being used as intended and when HTML5 finally sees the light of day, it too won’t be used as intended. Having one nav tag is great, but what we will end up seeing is 5 or 6 of them because they achieve a certain layout effect. How is a blind user then going to be able to tell which is the “main” nav tag.
Really what we need is a way of applying semantics to tags in the same way that CSS applies styling to them.
I really wish all the effort that has gone into HTML5 had actually been put to better use in creating a common rendering engine or at least a standardised way of rendering CSS instructions. I just don’t see how HTML5 is solving the problems of HTML4. The problems with current web design are actually with the support for CSS, not HTML.
bq. Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.
Firstoff, is the WHATWG the driving force, primarily, behind HTML5? And Microsoft is not a part of WHATWG (the listed reason is that they cannot agree that the final spec should not require software patents to implement — a weird reason, whether true or not. It leaves us to assume they simply want no part any any true interoperability).
To this commenter, it seems the author is going out of the way to try to include Microsoft in this effort, whereas they decided not to show up to the party.
Robin’s comments above really hit the nail on the head for me. I’ve coded professionally for a few long years now, and rather than refining the rules of the Game, HTML 5 seems to be a drawn out debate on what the Team should call itself.
Snarkiness aside, I’m curious to see just how far this goes.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu nisi tempus nibh sagittis nonummy. Suspendisse aliquam neque quis dolor accumsan blandit. Ut in libero vitae arcu sagittis convallis. Donec sed quam at tortor interdum gravida. Vivamus consequat nulla at turpis. Nunc hendrerit interdum tellus. Maecenas interdum. Sed commodo, ligula in imperdiet tristique, orci mauris commodo diam, rhoncus laoreet nisl magna sed arcu. Fusce hendrerit, lacus nec adipiscing lobortis, ligula elit suscipit massa, eu euismod nisi leo vel justo. Curabitur mattis diam ut ipsum. Sed tincidunt, quam non mollis venenatis, est nisi ultrices nunc, id rhoncus sapien justo id pede. Fusce augue tortor, dapibus ut, euismod eu, posuere nec, erat. Phasellus velit. Nulla diam velit, posuere vel, euismod molestie, fringilla et, nunc.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu dui at turpis aliquam pulvinar. Maecenas eget risus. Maecenas enim. Nulla vulputate sem a felis. Fusce lacinia euismod enim. Mauris leo. Maecenas tempus, augue eu tempus gravida, metus sem consequat ipsum, eget adipiscing enim pede vel mauris. Fusce faucibus, odio id bibendum placerat, ipsum diam eleifend nisl, ut sagittis lacus enim vel turpis. Vestibulum tristique nulla a leo. Proin sollicitudin. In ligula mauris, blandit id, fermentum quis, gravida nec, est.
Aenean posuere risus. Integer quis ligula. Mauris dignissim auctor eros. Phasellus placerat. Quisque euismod. Morbi pellentesque. Nullam quis orci. Ut vulputate lacinia eros. Donec leo lacus, elementum eu, vulputate vel, rhoncus vitae, felis. Sed et lacus. Nullam et sem.
Curabitur in arcu quis urna sagittis rutrum. Mauris rutrum nisl vel arcu. Maecenas mauris enim, tempus posuere, pulvinar eu, ullamcorper in, odio. Suspendisse dolor. Morbi libero mauris, ullamcorper id, fringilla laoreet, sodales at, odio. Etiam metus. Cras lacinia risus id pede. Phasellus elementum ornare lectus. Sed vitae diam. Nunc eu quam. Phasellus ipsum tellus, imperdiet nec, ullamcorper et, egestas vitae, purus. Proin mattis, lectus sit amet dignissim tempus, nunc nibh laoreet erat, in tempor erat quam at ligula. Aenean fringilla cursus sem. Aliquam erat volutpat. Curabitur luctus placerat sem. Integer consectetuer sodales lectus.
Sed vulputate nisi at neque congue facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris ac erat. Donec elit. Duis urna pede, congue sed, volutpat id, lobortis in, mauris. Ut mollis ante ut neque. Duis viverra libero at justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin quam. Nullam nulla. Aliquam at nulla. Donec tristique imperdiet erat. Sed mollis pretium metus. In faucibus aliquet sem. Sed viverra tristique leo. Praesent ut nisi. Donec ac ligula eu nibh placerat ultricies.
Generated 5 paragraphs, 429 words, 2895 bytes of Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu nisi tempus nibh sagittis nonummy. Suspendisse aliquam neque quis dolor accumsan blandit. Ut in libero vitae arcu sagittis convallis. Donec sed quam at tortor interdum gravida. Vivamus consequat nulla at turpis. Nunc hendrerit interdum tellus. Maecenas interdum. Sed commodo, ligula in imperdiet tristique, orci mauris commodo diam, rhoncus laoreet nisl magna sed arcu. Fusce hendrerit, lacus nec adipiscing lobortis, ligula elit suscipit massa, eu euismod nisi leo vel justo. Curabitur mattis diam ut ipsum. Sed tincidunt, quam non mollis venenatis, est nisi ultrices nunc, id rhoncus sapien justo id pede. Fusce augue tortor, dapibus ut, euismod eu, posuere nec, erat. Phasellus velit. Nulla diam velit, posuere vel, euismod molestie, fringilla et, nunc.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu dui at turpis aliquam pulvinar. Maecenas eget risus. Maecenas enim. Nulla vulputate sem a felis. Fusce lacinia euismod enim. Mauris leo. Maecenas tempus, augue eu tempus gravida, metus sem consequat ipsum, eget adipiscing enim pede vel mauris. Fusce faucibus, odio id bibendum placerat, ipsum diam eleifend nisl, ut sagittis lacus enim vel turpis. Vestibulum tristique nulla a leo. Proin sollicitudin. In ligula mauris, blandit id, fermentum quis, gravida nec, est.
Aenean posuere risus. Integer quis ligula. Mauris dignissim auctor eros. Phasellus placerat. Quisque euismod. Morbi pellentesque. Nullam quis orci. Ut vulputate lacinia eros. Donec leo lacus, elementum eu, vulputate vel, rhoncus vitae, felis. Sed et lacus. Nullam et sem.
Curabitur in arcu quis urna sagittis rutrum. Mauris rutrum nisl vel arcu. Maecenas mauris enim, tempus posuere, pulvinar eu, ullamcorper in, odio. Suspendisse dolor. Morbi libero mauris, ullamcorper id, fringilla laoreet, sodales at, odio. Etiam metus. Cras lacinia risus id pede. Phasellus elementum ornare lectus. Sed vitae diam. Nunc eu quam. Phasellus ipsum tellus, imperdiet nec, ullamcorper et, egestas vitae, purus. Proin mattis, lectus sit amet dignissim tempus, nunc nibh laoreet erat, in tempor erat quam at ligula. Aenean fringilla cursus sem. Aliquam erat volutpat. Curabitur luctus placerat sem. Integer consectetuer sodales lectus.
Sed vulputate nisi at neque congue facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris ac erat. Donec elit. Duis urna pede, congue sed, volutpat id, lobortis in, mauris. Ut mollis ante ut neque. Duis viverra libero at justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin quam. Nullam nulla. Aliquam at nulla. Donec tristique imperdiet erat. Sed mollis pretium metus. In faucibus aliquet sem. Sed viverra tristique leo. Praesent ut nisi. Donec ac ligula eu nibh placerat ultricies.
Generated 5 paragraphs, 429 words, 2895 bytes of Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu nisi tempus nibh sagittis nonummy. Suspendisse aliquam neque quis dolor accumsan blandit. Ut in libero vitae arcu sagittis convallis. Donec sed quam at tortor interdum gravida. Vivamus consequat nulla at turpis. Nunc hendrerit interdum tellus. Maecenas interdum. Sed commodo, ligula in imperdiet tristique, orci mauris commodo diam, rhoncus laoreet nisl magna sed arcu. Fusce hendrerit, lacus nec adipiscing lobortis, ligula elit suscipit massa, eu euismod nisi leo vel justo. Curabitur mattis diam ut ipsum. Sed tincidunt, quam non mollis venenatis, est nisi ultrices nunc, id rhoncus sapien justo id pede. Fusce augue tortor, dapibus ut, euismod eu, posuere nec, erat. Phasellus velit. Nulla diam velit, posuere vel, euismod molestie, fringilla et, nunc.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu dui at turpis aliquam pulvinar. Maecenas eget risus. Maecenas enim. Nulla vulputate sem a felis. Fusce lacinia euismod enim. Mauris leo. Maecenas tempus, augue eu tempus gravida, metus sem consequat ipsum, eget adipiscing enim pede vel mauris. Fusce faucibus, odio id bibendum placerat, ipsum diam eleifend nisl, ut sagittis lacus enim vel turpis. Vestibulum tristique nulla a leo. Proin sollicitudin. In ligula mauris, blandit id, fermentum quis, gravida nec, est.
Aenean posuere risus. Integer quis ligula. Mauris dignissim auctor eros. Phasellus placerat. Quisque euismod. Morbi pellentesque. Nullam quis orci. Ut vulputate lacinia eros. Donec leo lacus, elementum eu, vulputate vel, rhoncus vitae, felis. Sed et lacus. Nullam et sem.
Curabitur in arcu quis urna sagittis rutrum. Mauris rutrum nisl vel arcu. Maecenas mauris enim, tempus posuere, pulvinar eu, ullamcorper in, odio. Suspendisse dolor. Morbi libero mauris, ullamcorper id, fringilla laoreet, sodales at, odio. Etiam metus. Cras lacinia risus id pede. Phasellus elementum ornare lectus. Sed vitae diam. Nunc eu quam. Phasellus ipsum tellus, imperdiet nec, ullamcorper et, egestas vitae, purus. Proin mattis, lectus sit amet dignissim tempus, nunc nibh laoreet erat, in tempor erat quam at ligula. Aenean fringilla cursus sem. Aliquam erat volutpat. Curabitur luctus placerat sem. Integer consectetuer sodales lectus.
Sed vulputate nisi at neque congue facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris ac erat. Donec elit. Duis urna pede, congue sed, volutpat id, lobortis in, mauris. Ut mollis ante ut neque. Duis viverra libero at justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin quam. Nullam nulla. Aliquam at nulla. Donec tristique imperdiet erat. Sed mollis pretium metus. In faucibus aliquet sem. Sed viverra tristique leo. Praesent ut nisi. Donec ac ligula eu nibh placerat ultricies.
Generated 5 paragraphs, 429 words, 2895 bytes of Lorem Ipsum
That was an accident. I was horsing about with the comments control.
I would like to remove it, but can’t.
I also don’t see any distinct advantages with this new presentation model except for the change in semantics. As a career C/C++ GUI developer I’ve seen the OOP model obfuscated to no end in a vain attempt to simplify the nature of coding through API’s, toolkits and template libraries. As far as web development is concerned, my attitude is “if something isn’t broken, don’t fix it”. As web developers (not unlike C++ developers) the more advanced we take our art and develop hacks to accomodate functionality that isn’t inherent in the fundamental architecture, new conventions intrinsicly inhibit the evolution of the principles of design and cause us to write hacks.
Besides, not every webpage layout follow the same style, so burdening developers with new structures such as navigation, header, etc, is re-inventing the wheel when what the new semantics accomplish is somethign that has already been addressed.
I’m really keen on new web technology, especially I love AJAX. The problem with new technologies is, that it doesn’t work with old browsers and most users don’t upgrade their browsers fast enough 🙁
Wow…it’s interesting. i will to see
I really think just having a migration to xml would be better, instead of all of these tags defined for us. seems very limiting.
This is very useful addition to the general knowledge on the subject.
I was looking for a solution to a structural markup problem I’m having and came across the “HTML+ specification”:http://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html from 1993. Now why don’t they just implement some (or most) of the tags discussed in this document?
Certainly not those hellbent on staying in the html stone age who will have to learn a host of new things.
I don’t see how it helps the standards community by blurring content with presentation once again.
Nor do I see how it helps people innovate the web by implementing very specific inflexible tags. If there’s going to be a new html it should be what we have with fewer, more general tags, not more.
Reading the specs reminds of that scene in Robocop 2 where a committee of politicians reprograms his directives and he goes from four to thousands.
I’m still not clear what the actual purpose of html 5 is? We’re already on the right track. We have everything we need to keep content, presentation and behavior separate.
“Benefits of Using HTML
* Backwards compatible with existing browsers
* Authors are already familiar with the syntax
* The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death”? if a mistake accidentally slips through
* Convenient shorthand syntax, e.g. authors can omit some tags and attribute values”
I thought we’d all agreed that most of these “benefits” were a “bad” thing that contributed to browser bloat and accessibility.
Excess backwards compatibility forces us to continue to limit our sites for people who refuse to move on from the stone age.
Allowing improper nesting and syntax aggravates the issue of cross-browser compatibility. I have no problem with maintaining the core elements in future versions of xhtml (as long as all presentational attributes get yoinked) but I don’t think it’s too much to ask of people to write it all in lower case and close their damn tags properly so we don’t have to deal with 8 browsers that look for and compensate for these mistakes in 8 different ways.
Has the W3C forgotten why it was formed in the first place? What’s the point of a spec that lets people ignore standards to a greater degree than xhtml transitional and strict do?
I just tried out the HTML 5
Looking forward even more towards a full scaled HTML 5 support in all major browsers.
It’s just wonderfull!
Anything that makes rendering the UI easy can only be a step in the right direction. This will enable interaction designers to quickly set up mock ups for their clients and hence enhance rapid prototyping.
good to see this in the works
I am not sure I can see the purpose of HTML 5 and changing from divs to headers, nav, etc. I like that the div is generic because of nesting multiple divs. For instance, at times I make a header with 3
I think HTML 5 is a step backwards. Definitely not a good thing. Just a cryin shame.
I don’t think the HTML5 specification will do anything to progress the Web and more to the point, it will most likely become a lost chapter in web history.
It attempts to further dictate how to markup a document to a Web browser – which in the end is just a program that draws things on a screen to present to the user. Oh, and it has a URL box at the top that allows you to warp to other presentations.
Let’s be honest, HTML was only a solution to marking-up plain text, and it WASN’T great at that either.
As a language, HTML gave the computing world:
1) the ANCHOR tag.
2) JavaScript (Because people quickly realized how dull HTML was)
A better solution:
How about a DirectX mode (Or OpenGL mode?) Or XAML or SVG mode? I mention these just for the out-of-box thinking, not that I want to write up a text document in DirectX.
But that’s why people have been excited about Flex and Silverlight – because it’s write-once, standard across all platforms in presentation.
Christ, we already have 100’s of existing languages that can do this, we just need to say YES this is the new language of the web – and then add some simple context markup to it.
This certainly is an interesting debate, but I think the comment made by Niels Matthijs at #19 and the author’s comments at #11 helped me to get off the fence, and to embrace the new version of the language. Thanks!
– Rod Homor
First of all, thanks for the article. I came across it while searching for clarification on how the
For quite some time, I have marked up all my pages with with ids (“container”, “header”, “navcontainer”, “content”, etc.), but I’ve always had this nagging feeling that I was somehow cheating the system (semantically speaking). I teach web design to high school students, and I approach the subject with an emphasis on semantic markup, so every time I teach layouts, I always wonder if I should use
I’m a little tired of my semantic demon winning out every time I teach layout design, so I’m seriously considering teaching layouts using the new HTML5 elements the way this article presented it. To me, the extra tags in HTML5 provide what I was looking for (for the most part).
The headers have also given me some semantic soul-searching as well. I usually place an
tag in the “header” div for the name of the site. Every time I do that, though, I wonder whether it’s appropriate or inappropriate to place an
or
at the top of the “content” div. Now that there are semantic sections to my page (headers, articles, sections, etc.), I suppose the title to each of those sections would most naturally be an
, and that problem is solved too.
I still plan to use a container
As to all the authors who have vented over browser implementation (especially IE), I think you are misplacing your anger. It’s a necessary evil, but we’ve been dealing with it for many years now. I’ve learned to add a few conditional ie tags to isolate IE 5 & 6 in order to fix a few of their annoying bugs, add a png-fix, and then I moved on with my life.
As to the 10-year implementation, my understanding is that the tag was not implemented by IE until version 8 (from A Day Apart: HTML5 in Seattle). They are being realistic about how long it takes for browsers to get it right (especially IE).
http://discussions.apple.com/thread.jspa?threadID=2544849
Fantastic article. Thanks for sharing overview of html 5.
Thanks for the article.
Is very important use the new html5 tags.. but it is even more important use it well!