s Developer Relations Team - Implementing HTML5 <details>
Happy first birthday to Blink By Bruce Lawson · Thursday, April 3, 2014 0 Twelve months ago today, I stayed up past my bedtime to blog about the new rendering engine, Blink, being forked from WebKit. As it's Blink's first birthday, let's take a brief look at where we've got to. Read more… Introducing the world’s most useless extension By Andreas Bovens · Tuesday, April 1, 2014 0 We're proud to introduce the world’s most useless extension for your daily use and enjoyment. Read more… Removing showModalDialog() from the Web platform By Mathias Bynens · Thursday, March 27, 2014 0 The showModalDialog() API is being removed from the Web platform. This post explains why, and what the consequences are for web developers. Read more… Practical application and usage of the W3C Device Orientation API By Rich Tibbett · Wednesday, March 26, 2014 0 The W3C's device orientation API allows us to determine the orientation of a device in physical space.
Seriously, What is HTML5?
I’m tired of people getting confused. The W3C hasn’t done the best job at explaining what HTML5 is or means to a lot of people either. In fact, they went out of their way to say that, accompanying the HTML5 new branding, CSS3 and the JS API’s ( Geolocation, Websockets etc.), that are floating around with their own specs, are lumped into one and the same. So what is HTML5? And what does it offer me? Well, I’m going to tell you. First off, HTML5 ! Secondly, HTML5 ! So, what is HTML5? HTML5 is HTML. So why is HTML5 important? Well, if you have just become a web developer in the past 2-3 years you won’t remember the dark times we had before then. So what’s HTML5 look like? I get asked this a lot and the best way to answer is to point them to Paul Irish’s HTML5 Boilerplate (found here: ). <! If you’ve seen HTML before this shouldn’t look too different. Wrapping it up If you’re still confused then you need to dig deeper or just remember HTML5 === HTML.
Element Index
<header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href=" Osborne</a></h4> <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
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. <! 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. Common mistakes with the figure element Ah, <figure>. Not every image is a figure <!
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. As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. 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. While slightly contrived, this example serves to illustrate the structural redundancy of designing complex layouts with HTML 4 (as well as XHTML 1.1 et al). <section><section><article><header><h1>Div Soup Demonstration</h1><p>Posted on July 11th, 2009</p></header><section><p>Lorem ipsum text blah blah blah.
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. Want to join in on all the fun? 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 HTML5: The Basics (1 of 4) A Preview of HTML 5 Steve Smith on HTML5 and CSS3 HTML5 Doctor The Future of HTML 5 5 Exciting Things to Look Forward to in HTML 5
Yes, You Can Use HTML 5 Today!
The blogosphere was jerked into excitement when Google gave a sneak preview of its new service, Google Wave. Only the select few have an account, but there’s an 80-minute video about it on YouTube for the rest of us. The service is an HTML 5 app, and so HTML 5 has gone from being too far away to care about to today’s hot topic. There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. What Is It? To some, it’s an outrageous attempt by browser manufacturers to foist what they want onto developers. The reason that opinion is so divided is that HTML 5 is more than just a markup syntax for documents, like HTML 4 is. Markup We’ll start by thinking about marking up a typical blog today. Currently, there are no ways in HTML 4 to mark up these elements in a semantic fashion – that is, HTML 4 offers no footer or header elements of its own. By default, CSS assumes that an element is inline. <! header and footer nav aside
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. 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. When you write markup in HTML form, you are allowed to leave off some closing (and opening!) Of course, it’s not all good news. Fig. 1. Regular expressions#section4
