はてなブックマーク

It’s nearly two years since I suggested a <picture> element as a strawman proposal as a way to solve the problem of responsive images, so let’s have a look at how we’re doing. In September there was a big meetup at Mozilla’s Paris office organised by Mozilla’s Marvellous Mr Marcos who’s been very active in the Responsive Images Community Group and did the hard work of actually turning the <picture

The definitions of the blockquote and cite elements in the HTML specification have recently been updated. This article explains what the changes mean for developers. Russian translation: Сite и blockquote: перезагрузка blockquote definition updated The blockquote element represents content that  is quoted from another source, optionally with a citation which must be within a footer or cite element

Since the mists of HTML 2 we’ve been able to semantically indicate added or removed information using the elements <ins> and <del> respectively. While seemingly simple on the surface these elements have hidden depths. I’ll also compare and contrast <del> with <s>, recently out of font style rehab and back in HTML5. Let’s start with <ins> and <del>… Using ins and del These two elements have very si

I have to be honest with you: I feel like a fraud writing about JavaScript for HTML5 Doctor. I would feel like a fraud writing about JavaScript for a click-driven ad-splattered content farm, never mind HTML5 Doctor. The thing is though, I’m writing about the classList API, and it’s super easy. If your JavaScript-fu isn’t great and you’re wary of HTML5 APIs, this one is at the perfect temperature f

How to mark up subheadings, subtitles, alternative titles and taglines If you don’t already know, the hgroup element is obsolete in HTML5. Advice is now provided in the HTML spec on how to mark up subheadings, subtitles, alternative titles and taglines using existing and implemented HTML features. Russian Translation of this article: Разметка для подзаголовков by Frontender magazine Advice for mar

Steve Faulkner – invariably prefixed by the honorific “The Mighty” by those who know him – is Australian living in London with his wife and two kids. He works for The Paciello Group, a well-known web accessibility consultancy, and is a co-editor of the HTML5 spec at W3C Today, we’re pleased to announce that he’s joining the HTML5 Doctor team, with special focus on accessibility and didgeridoo. Bru

In the first article in this series we looked at the history of HTML5 forms and many of the new attributes available to us. In this second and final part of the series, we’ll look at the new input types available in HTML5. As we’ll see, these new features will go a long way toward making your life easier while delivering a delightful user experience. The best thing about all this? You can start us

No doubt you interact with at least one form on the Web every day. Whether you’re searching for content or logging in to your e-mail account or Facebook page, using online forms is one of the most common tasks performed on the Web. As designers and developers, creating forms has a certain monotony about it, particularly writing validation scripts for them. HTML5 introduces a number of new attribut

When building web sites and web applications, we often need to provide essential feedback to a user informing them of the progress of their request or task, be it uploading a file, playing a video, or importing data. HTML5 makes life easier for us by defining an element whose sole purpose is just that: the <progress> element. The HTML5 specification describes it best: The progress element represen

Japanese translation, thanks Junichi Niino. Hot on the heels of our interview with Robin Berjon, editor of HTML5 at W3C, over the weekend I interviewed Ian Hickson, editor of HTML “The Living Standard” at WHATWG and, arguably, the most influential individual working on the Web today. Hickson, known as “Hixie”, works for Google and previously worked for Opera (my employer) and Netscape. Some of que

Start <article> <aside> <figure> <div> <section> Appropriate element e.g. in a feed reader Sidebar, comments section, pullquote, glossary, advertising, footnote etc that’s tangentially related to the page or content… → html5doctor.com/aside One or more images, graphics, code samples etc, plus optional <figcaption>… → html5doctor.com/figure A section of the page, or chapter of an <article>, with a

This article is now superseded. A newer version of the <picture> element is being implemented in Blink, WebKit, Firefox. Read Responsive Images Done Right: A Guide To <picture> And srcset for more. After The Great Vendor Prefix Hullaballoo of April 2012 comes The Great Responsive Images Brouhaha of May 2012. Adaptive images are the next unsolved mystery of Responsive Web Design. Do you send large

This is a follow up to my 2009 article Native Audio in the Browser, which covers the basics of HTML5 audio. It may well be worth reading if you want to get a feel for the <audio> element and associated API. Now, two and a half years later, it’s time to see how things are progressing. With many new advanced audio APIs being actively worked on and plenty of improvements to the existing native audio

Using Modernizr to detect HTML5 features and provide fallbacks Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them. This is called feature detection and is much more efficient than brow

Hello! I’m Doctor Peter and I’m here to treat you with a dose of complementary CSS3. Don’t worry, this won’t hurt a bit. Contrary to what HTML5 Please and the W3C would have you believe, CSS3 is not part of HTML5. “But this is HTML5 Doctor,” I imagine you saying. “Why are you talking about CSS3 here?” Well, I want to talk about a very specific part of CSS3, one that works in perfect tandem with HT

We’ve already had a glimpse at Server-Sent Events (also known as EventSource†, and I’ll switch between the two to keep you on your toes) in my Methods of Communication article from last year. In this article, I want to delve in to more detail about the SSE API, demonstrate its features, and even show you how to polyfill browsers that lack EventSource support. Server-Sent Events are real-time event

<article> <aside> <figure> <div> <section> … → html5doctor.com/aside <figcaption>… → html5doctor.com/figure <article> … → html5doctor.com/section <p> <address>, <blockquote>, <pre>… → html5doctor.com/semantics … → html5doctor.com/article … → html5doctor.com/div By @riddle & @boblet www.html5doctor.com <nav> … → html5doctor.com/nav HTML5 Element Flowchart 2011-07-22 v1.5-ja Translation by @mlhshino

For some time now, we’ve been using various technologies to edit and store text within a web browser. Now with the contenteditable attribute, things have got a whole lot easier. In this article, I’ll tell you what this attribute is for, how it works, and how we can take things further. The Basics # First, let’s check out the spec: The contenteditable attribute is an enumerated attribute whose keyw

Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. Let’s get cracking. The Definition # The <output>

We’ve been able to play video in the browser without a plugin for a couple of years now, and whilst there are still some codec annoyances, things appear to have settled down on the video front. The next step is adding resources to the video to make it more accessible and provide more options to the viewer. We currently have no means to provide information about what’s happening or being said in th

Until recently, we developers couldn’t to do much with the state and history of the browser. We could check the number of items in the history and push users forwards and backwards, but this provides little benefit to the user. With the rise of more dynamic web pages, we need more control. Thankfully, HTML5 gives us that control by extending the JavaScript History API. What’s the point? # It goes

Goodbye time, datetime, and pubdate. Hello data and value. Please note that since this was written, <time>, datetime and (possibly) pubdate have been reinstated, and made more powerful. Doctor Bruce has the low-down in his blogpost The best of <time>s. We preserve this merely to show our grandchildren that we played a role in the Time Wars. We’ve come a long way in the HTML5 specification’s steady

Last week, we were surprised and saddened when Mark Pilgrim, long time educator, raconteur, and writer of note, decided to retire from the internet. Unfortunately, he also decided to 410: gone all of his writing, including Dive into HTML5. Mark provided this book for free on the web (under a Creative Commons By 3.0 license), in addition to a published, for-sale version entitled HTML5: Up and Runni

The scoped attribute for the <style> element allows you to include styles mid-document that targets a specific element and its children. Depending upon how you look at this, it’ll either be a godsend or a curse. Once you’ve reached the end of this article, I hope you can form your own opinion. Let’s take a quick look at the spec: The scoped attribute is a boolean attribute. If set, it indicates th