The Power of HTML 5 and CSS 3 Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages. As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. Goodbye <div> soup, hello semantic markup In the past, designers wrestled with semantically incorrect table-based layouts. <div id="news"><div class="section"><div class="article"><div class="header"><h1>Div Soup Demonstration</h1><p>Posted on July 11th, 2009</p></div><div class="content"><p>Lorem ipsum text blah blah blah. Goodbye class attributes, hello clean markup
Get Ready for HTML 5 With support in Chrome, Firefox 3.5, Opera, and Safari, HTML 5 is coming at you like a runaway train. Here are some suggestions to help you prepare to get on board rather than be left at the platform or tied to the tracks. See what others have done#section1 Article Continues Below The first thing you can do to prepare for HTML 5 is see how other people are using it. A visit to the HTML 5 gallery will show you how several sites are already using the new HTML 5 elements. Now you do it#section2 You can look at the sites, read all the articles here and elsewhere, and even read the specification—but none of that will help you understand HTML 5 as much as using the new elements. By doing this, you’ll find out what works and what doesn’t. X marks the spot#section3 If you are like most designers, you probably don’t write all your markup by hand. HTML 4.0 (the markup language we all know and love) is based on a “rulebook” called SGML. Of course, it’s not all good news. Fig. 1. ([0-9]{5}(-[0-9]{4})?)
Semantics in HTML 5 I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all. Let’s stop to consider our responsibility. HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. There are also revisions to the structure, syntax, and semantics of HTML, some of which Lachlan Hunt covered in “A Preview of HTML 5.” But for this article, let’s turn solely to the semantics of HTML. The BBC recently announced that they would drop the hCalendar microformat from their program listings, due to accessibility and usability concerns with the abbr design pattern. This is not simply a theoretical problem. Extensible semantics#section1 But how about this?
HOW TO: Get Started with HTML5 Boilerplate This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. This is not your father's world wide web. Thanks to soaring smartphone sales, new tablet devices like the iPad, and the burgeoning trend of connected devices, individuals are accessing and experiencing the web in a very different way than they were even five years ago. The desktop browsing experience is also undergoing radical change, thanks to the evolution of JavaScript frameworks and the push for standards successors such as CSS3 and HTML5. It's an exciting time to be developing or designing for the web. Even for the seasoned developer, it can be difficult to know where to start if you want to embrace the new technologies of HTML5 and support new devices like the iPhone, Android-based smartphones or the iPad without neglecting users on older browsers. To be clear, HTML5 Boilerplate is not a framework. Are you using HTML5 in your designs?
HTML5 Video & Media JavaScript Library HTML5 is a set of web standards being developed by the "Web Hypertext Application Technology Working Group" The HTML5 standard includes many new features for more dynamic web applications and interfaces. One such component being specified and implemented is the <video> element. Using HTML5 and the <video> tag in concert with a HTML5 Javascript Library, your videos can be played back on the latest mobile devices at native html5 speed, and even on older browsers that require Flash. How do I start using HTML5 video? Visit the Player Comparison to compare the features of many different HTML5 Video Libraries that will assist you in making your video embeds work across a wide range of devices. Kaltura HTML5 documentation
15 Useful Resources to Get Clued Up on HTML5 HTML5 this, HTML5 that! There’s been plenty of HTML5 talk around the blogging world recently. It’s no longer a tiny spec on the horizon, it’s due to arrive soon! Some have already embraced it and are using it on their latest sites. HTML5 and The Future of the Web A good place to start for a dose of HTML5 goodness is this in-depth article from Smashing Magazine. Get Ready for HTML 5 For those wanting to read up on some more complicated HTML 5 features, A List Apart has an article covering everything you’d want to know about regular expressions, SVG graphics and the Canvas element. CSS code structure for HTML 5: some useful guidelines Woork provides some useful guidelines and examples in this post, showing how both HTML and CSS can be written to work together. HTML 5 Tutorial – A Simple Web Page Layout If tutorials are more your thing, get your hands dirty with this walkthrough on SpicyWebDesign, which covers the process of building a simple web page layout with a HTML5 structure. HTML5 Doctor
A Preview of HTML 5 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. Article Continues Below 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. Note that the specification is still a work in progress and quite a long way from completion. Structure#section2 HTML 5 introduces a whole set of new elements that make it much easier to structure pages. <body><header>... <footer>© 2007 Example Inc. <!
Avoiding common HTML5 mistakes Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. Don’t use section as a wrapper for styling One of the most common problems I see in people’s markup is the arbitrary replacement of <div>s with HTML5 sectioning elements — specifically, replacing wrapper <div>s (used for styling) with <section>s. In XHTML or HTML4, I would see something like this: <! Now, I’m instead seeing this: <! Frankly, that’s just wrong: <section> is not a wrapper. With that in mind, here’s the correct way to mark up the above example using HTML5 and a couple of ARIA roles. <body> <header> <h1>My super duper page</h1> <! If you’re not quite sure which element to use, then I suggest you refer to our HTML5 sectioning content element flowchart to guide you along your way. Ah, <figure>. <! Summary