CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor
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
The contenteditable attribute | HTML5 Doctor
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
The scoped attribute | HTML5 Doctor
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
Storing Data the Simple HTML5 Way (and a few tricks you might not have known) | HTML5 Doctor
Storing Data the Simple HTML5 Way (and a few tricks you might not have known) Yes indeed people, it’s your favourite HTML5 Doctor with JavaScript knowledge who lives in Brighton near a golf course! I’m also shooting for the longest title we’ve published so far – and I think I’m in the lead. This post is about the Web Storage API. Technically it’s been shifted out of the HTML5 specification and can
Document Outlines | HTML5 Doctor
Updated 21/01/2014 by Dr. Steve Document outlines have changed a bit in HTML5. For a start, they’re actually in the spec (and have been for years – (2008). The HTML5 Doctor is here to explain what document outlines are, how to make good ones, and why you should care. What are document outlines? # The document outline is the structure of a document, generated by the document’s headings, form titles
Finding your position with Geolocation | HTML5 Doctor
The Geolocation API provides a method to locate the user’s exact (more or less – see below) position. This is useful in a number of ways ranging from providing a user with location specific information to providing route navigation. Although it’s not actually part of the HTML5 specification, as it was developed as a separate specification by the W3C, rather than the WHATWG, if the esteemed HTML5 D
The header element | HTML5 Doctor
Recently, we have seen a growing interest in HTML5 and its adoption by web professionals. Within the HTML5 specification we can see that there have been a significant number of new elements added, one of these the <header> element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, its must haves and must not haves. Ready? Let’s dive straight in. Updated 15
video + canvas = magic | HTML5 Doctor
You’ve already learned about the <video> and <canvas> elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser exce
An introduction to the Canvas 2D API | HTML5 Doctor
If the alt;video width="300" height="150"> element is the poster boy of HTML5, then <canvas> is definitely Danny Zuko. The <canvas> element is (still) part of the HTML5 specification, but the 2D drawing API has been moved into a separate document (in case you go looking and can’t find it). <canvas> has a wealth of features, like: drawing shapes, filling colours, creating gradients and pat
Extending HTML5 — Microformats | HTML5 Doctor
While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use. Native ways to extend HTML There were five fundamental ways we could extend HTML 4: <meta> element cl
The article element | HTML5 Doctor
We’ve discussed a lot of new elements here at HTML5Doctor, but the article element has somehow escaped the microscope… until now! article is one of the new sectioning elements. It is often confused with section and div but don’t worry we’ll explain the difference between them. What the spec says Thankfully, the spec is short and sweet: The article element represents a component of a page that cons
The figure & figcaption elements | HTML5 Doctor
In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the <figure> and <figcaption> elements. Let’s explore! The <figure> element The <fig
The ruby element and her hawt friends, rt and rp | HTML5 Doctor
Note: writing-mode support in IE6 was lr-tb and tb-rl only. IE8 added support for all possible combinations. CSS we can use Having said that no browsers support the CSS3 Ruby module yet, there are still a few things we can do to style <ruby> and friends. Default browser styles use font-size and display, so we can safely change these to affect display in both supporting and non-supporting browsers.
Measure up with the meter tag | HTML5 Doctor
HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include time, mark and here is another one, meter. It is an inline element so it can be used inside most elements, including a header or a paragraph. What does it say in the spec? The meter element represents a scalar measurement within a known range, or a fractional value; for example disk
The section element | HTML5 Doctor
Updated 22/01/2014 by Dr. Steve We doctors are a bunch of chums using HTML5 and writing about how we do it. Apart from spurious requests for medical advice, the questions we receive most are about using the section element, and we realise that we’ve been using the section element incorrectly all this time. Sorry. What we’ve been doing wrong is using section to wrap content in order to style it, or
A little more conversation with dialog | HTML5 Doctor
Since publishing this article, dialog has been dropped from the HTML5 specification. The contents of this post are no longer valid but will be retained for posterity. At this time, there is no suitable replacement for marking up conversations, but there is much discussion on creating one. Get your opinions in so an appropriate solution to marking up conversations can be devised! Less action, more
HTML 5 Reset Stylesheet | HTML5 Doctor
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects. The code Let’s start with the complete CSS stylesheet: /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Cl
HTML5 Boilerplates | HTML5 Doctor
Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now. HTML 5 in 5 seconds It’s über easy to get your markup to validate as HTML 5 — just change your DOCTYPE from whatever it is now to this: <!DOCTYPE html> That's it! It doesn't require anything more than that. G
“Block-level” links in HTML 5 | HTML5 Doctor
One new and exciting thing you can do in HTML 5 is wrap links round “block-level” elements. Imagine you have a front page with lots of teasers for news articles, each of which leads to a page devoted to the full text of that article. Obviously, each story needs a heading and you’ll want an image too, and you’ll want them all clickable. In current mark-up you’ll probably have something like this: <
Semantic navigation with the nav element | HTML5 Doctor
One of the new elements for HTML 5 is the <nav> element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders. In this article I’ll discuss how and where to use it as well as some reservations I have with the specifications definition. At first, I thought the <nav> element to be pretty simple. And whilst it still is very easy t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
