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: <! -- HTML 4-style code --><div id="wrapper"> <div id="header"> <h1>My super duper page</h1> <! 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> <! Common mistakes with the figure element Ah, <figure>. Not every image is a figure <! Leave No One Behind with HTML5 – presentation at FFWD.PRO in Zagreb, Croatia. In June I had the pleasure to speak at the FFWD.PRO conference in Zagreb, Croatia, about HTML5, progressive enhancement and new features and suggested APIs. I had previously spoken with Marko Dugonjic and said that he should really organize a conference in Croatia.
Said and done, he acted on it and created FFWD.PRO! So, naturally, I wanted to be there and take part of it! It was a well-organized conference targeted at web professionals in general, with the main focus on user experience. It had a good mix of speakers and a broad spectrum of topics was covered. My presentation tried to cover both where we have been coming from, and various enhancements and possibilities we get with HTML5.
The video of Leave No One Behind with HTML5 is also available at Vimeo. Here are the slides to go with the video: The slides are also available on Slideshare. Google I/O 2011 - Super Browser 2 Turbo HD Remix : Intro to HTML5 Game Development by Seth Ladd. HTML5 Showcase for Web Developers: The Wow and the How. Webkit If using Google Chrome, you will likely need the Dev channel to see all of the functionality in this presentation. If you are using Safari, you will likely need a nightly build of WebKit in order to see all of the functionality in this presentation. Mozilla You are running a Mozilla browser. While such browsers generally have excellent support for HTML5 features, this presentation has only been tested using WebKit browsers such as Google Chrome or Safari.
Other browser You are running a browser that has not been tested with this presentation. WebGL: available WebGL: not supported You will not be able to see the WebGL demos later in this slide deck. Notification permission incorrect Notification permission correct No notification Your browser does not support displaying notifications. File APIs: available File APIs are not supported Your browser does not support one or more of the following APIs: File, FileList, FileReader. File System API: available File System API: not supported Show you File. Presentations/intro_html5.pdf. The Latest in HTML5. Eric Bidelman ( G+, @ebidel ) Developer Relations Brown Bag ( View this presentation in a nightly build of Chrome, FF, or WebKit.
Also, some of this presentation does require Chrome 14+ dev. ) There's a lot this presentation doesn't cover! CSS3 / WebGL / Canvas HTML5 Forms Device Orientation API FileSystem API IndexedDB History API Websockets, Server-Sent Events XHR2 ... OK...then what does it cover? Lesser known gems Smaller APIs for building more powerful web apps One new/sexy API: Web Audio API Things in the pipeline Semantics & Markup <details> / <summary> <details open="open"><summary>Information</summary><p>If your browser supports this element, it should allow you to expand and collapse these details. <form oninput="result.value=a.valueAsNumber + b.valueAsNumber"> 0<input type="range" name="b">100 +<input type="number" name="a"> = <output name="result"></output></form> Semantically highlight parts of your text: Lorem ipsum dolor, adipiscing elit.
Speech input. HTML5: Hype, Substance and Scrutiny. Today we have a special treat: an article from Luke Stevens, author of The Truth About HTML5, that takes a critical look at the past, present and future of HTML5. What is HTML5, really? How did it come about? Should we really be blindly following what we’re told about it or is some critical thinking required? Read on to find out. Two HTML5s HTML5 has, in its most buzz-wordy form, taken the world by storm, but all that is claimed to be “HTML5” isn’t. There is, in a sense, two “HTML5”s: the technical specification, and the collection of new and exciting technology that gets lumped in together as “HTML5”. On the one hand, there’s the actual HTML5 specification — a lengthy technical document written largely for browser vendors that’s often a strange world for those of us who actually mark up web pages day in, day out. WebGL is new and sexy, but even old standards are being dusted off and made new again.
But SVG — once heralded as “The New Flash” — isn’t HTML5 either. What is HTML5? HTML5 Showcase for Web Developers: The Wow and the How. Webkit If using Google Chrome, you will likely need the Dev channel to see all of the functionality in this presentation. If you are using Safari, you will likely need a nightly build of WebKit in order to see all of the functionality in this presentation. Mozilla You are running a Mozilla browser. While such browsers generally have excellent support for HTML5 features, this presentation has only been tested using WebKit browsers such as Google Chrome or Safari. You should still be able to navigate the slides by using left/right arrow keys, but will currently see display errors with regard to the 3d rendering of the slides and some demo content.
Other browser You are running a browser that has not been tested with this presentation. WebGL: available WebGL: not supported You will not be able to see the WebGL demos later in this slide deck. Notification permission incorrect Notification permission correct No notification Your browser does not support displaying notifications. File APIs: available <! Why We Should Start Using CSS3 and HTML5 Today. Advertisement For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work.
Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot. Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Periodic Table of the Elements - Josh Duck. HTML5: Past, Present, Future. The Pain of HTML5. On Jul 16, 2012 in HTML5, JavaScript by Adam Iley One of the essential problems with any new technology is whether to adopt it and diabolically abandon users who are not able to upgrade or miss out on new possibilities and eventually become irrelevant.
The middle way of course is to fly to the latest technologies as soon as they are stable enough but also provide fallbacks and, where necessary, reduced functionality to users of older systems. This has been the lot of any web developer for years now, where the round blue albatross around everyones necks has been IE6. Every code path has a cost, and supporting multiple different generations of browser has a high cost (development, testing, support, maintenance, and most importantly coder misery). In recognition of this, one company has even begun passing that cost on to the customers in the shape of a markup for those who use their site with old versions of IE. However, not all of the things we would like to do are possible yet. Ecstasy. 8 Reasons to Gear Up For HTML5 Now CIO. CIO — As CIOs and IT managers, we are always dealing with evolving technologies.
The enterprise world is constantly changing as well, and our workforce is dead set on going mobile. Why fight the tide? Fortunately, HTML5 is ready to answer the call. While the cross-platform markup language won't be finalized by the W3C until 2014 there are significant reasons to get on the bandwagon now. The fifth revision of the HTML standard has become bigger than the sum of its most recent enhancements. Making Web Apps Behave Like Client Apps HTML has long been the standard for building and deploying Web content. It provides an open architecture to build upon, since HTML, CSS and JavaScript are all free.Since HTML5 runs very well on all manner of devices, it offers cross-platform programming—which is huge for all of us overrun with BYOD requests.In addition, HTML5 was built with battery-powered tablets and smartphones in mind.Finally, HTML5 provides lighter, easier-to-read code than previous iterations.
How Browsers Work: Behind the scenes of modern web browsers. Web browsers are the most widely used software. In this primer, I will explain how they work behind the scenes. We will see what happens when you type google.com in the address bar until you see the Google page on the browser screen. The browsers we will talk about There are five major browsers used on desktop today: Chrome, Internet Explorer, Firefox, Safari and Opera. On mobile, the main browsers are Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers and Chrome–all of which, except for the Opera browsers, are based on WebKit. I will give examples from the open source browsers Firefox and Chrome, and Safari (which is partly open source). According to StatCounter statistics (as of June 2013) Chrome, Firefox and Safari make up around 71% of global desktop browser usage.
The browser's main functionality The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. Getting HTML5 to Recommendation in 2014 - W3C Blog. As part of advancing HTML 5.0 to W3C Recommendation by 2014, the HTML Working Group Chairs proposed a plan today to work in parallel on stabilizing HTML 5.0 and developing the next generation of HTML features. The plan identifies, for the first time, how the Working Group will produce an HTML 5.1 Recommendation by 2016.
The plan, not yet approved by the HTML Working Group, explains how the group anticipates fulfilling the interoperability expectations of the W3C process, including how the group will gather implementation evidence, identify features at risk for Candidate Recommendation, and create a test framework. Modularity plays an important role in the plan progress.
To enable features to evolve independently and rapidly, the group will make use of what it calls “extension specifications.” The plan also includes several elements to facilitate development of accessibility solutions for HTML5. Why We Chose HTML5 Over Native Apps. My company recently had a tough decision to make. It was a decision that many developers are facing these days. Our sports news application LockerPulse hadn’t been updated since 2010 and was due for an overhaul. In the time that had passed since our last major update, the mobile web had exploded. Consequently we observed that an increasingly higher percentage of traffic was coming from phones and tablets. Should we continue to build just on the web? Should we abandon the web and build strictly for iOS and Android?
We’re a Small Team…of Web Developers A little background on our company. We work hard to keep ourselves up to date on the latest in the rapidly changing web design, web development, and web marketing communities. The Business of Building Once, Deploying Everywhere HTML5 apps offer tremendous business advantages. We’re allowed to show whatever ads we want or to accept whatever form of payment we choose without giving app stores a cut. It’s a Better User Experience. Five Reasons You Should be Using HTML5 Today. HTML5. It’s one of the hottest buzzwords in the world of web development and design. But what exactly is HTML5, and why is everyone making such a fuss about it? HTML5 has been around since about 2008, but it really started to generate buzz when Steve Jobs openly cursed the use of Flash and told the world that it would never be allowed on Apple’s devices.
Since then, HTML5 has pretty much become the standard for any mobile development, and it’s on its way to becoming the standard for HTML development in general. If you’re curious about HTML5 and adopting it for your own online content, check out these 5 reasons why you should be using HTML5 today. Accessibility Accessibility may not be at the top of your list when designing web content, but it should be. Mobile Compatibility Compatibility… it is every web designer’s worst nightmare. Video Long gone are the days of Flash and other media players. Yes, it’s true: SEO can be improved by using HTML5. It’s the Future Image courtsey of HTML5 ROCKS.