H
HTML5 Doctor
html5doctor.com · Group blog · on HN since 2009
HTML5 Doctor is a group site explaining HTML5 elements and APIs, with articles on semantics, video, and server-sent events.
What HN saysCommenters recommend it as a good resource for the correct use of semantic HTML5 elements, and one calls its element index a favourite.
65HN people shared it
38linked it in comments
52stories submitted
533story points
5 months agolast shared
2009people per year2026
Most-shared posts
- 1Start Implementing HTML5 Today7 people · 57 points · first shared 2009 · 11 comments on HN
- 2Video + canvas = magic (2010)4 people · 43 points · first shared 2010 · 4 comments on HN
- 3Interview with Ian Hickson, HTML editor4 people · 8 points · first shared 2013 · discussion on HN
- 4Server-Sent Events3 people · 50 points · first shared 2012 · 16 comments on HN
- 5Avoiding common HTML5 mistakes3 people · 22 points · first shared 2011 · 5 comments on HN
- 6How to get html5 working in ie and firefox 23 people · first shared 2009
- 7The ﹤main﹥ element2 people · 164 points · first shared 2013 · 91 comments on HN
- 8The <nsfw> Element2 people · 41 points · first shared 2010 · 13 comments on HN
- 9Make any HTML element editable with "contenteditable" attribute2 people · 7 points · first shared 2012 · discussion on HN
- 10Scoped CSS in HTML52 people · 3 points · first shared 2011 · discussion on HN
- 11The ride to 5 – retrospectives on html52 people · 3 points · first shared 2014 · discussion on HN
- 12The details and summary elements of HTML52 people · 2 points · first shared 2011 · discussion on HN
- 13Pushing and Popping with the History API2 people · 2 points · first shared 2011 · discussion on HN
- 14Drag and Drop and Automatically Send to the Server2 people · 2 points · first shared 2012 · discussion on HN
- 15Finding your position with Geolocation2 people · 1 points · first shared 2011 · discussion on HN
What HN people wrote when they linked it
franciscop · 2017-09-25
http://html5doctor.com/ is a great resource for semantic HTML5
ocfx · 2013-09-20
I would recommend adding HTML5 Doctor http://html5doctor.com/ as they do a very good job of explaining the specific use cases of the semantic elements in html5 which is something many people either overlook or they use incorrectly. I really like it!
truebosko · 2010-06-09
I hate w3schools.com because so many people have confused them to be the actual spec site of the W3C.
Here are three good links to HTML5:
+ http://html5doctor.com/ (A lot of info on the semantics based tags)
+ http://diveintohtml5.org/ (You've all seen this one!)
+ http://dev.w3.org/html5/spec/Overview.html (The full HTML5 spec, which once you find the tag you want to read about is easy to follow.)
dekoidal · 2026-05-23
The old HTML5 Doctor article is still my favourite https://html5doctor.com/element-index/
afloatboat · 2017-02-20
I would be careful with that approach. I've followed it for a couple of years, but noticed that browser vendors and other tools have not embraced this change.
While it's technically still correct, it might backfire in reality. So maybe this <h>-element would be a welcome addition to the spec.
https://www.w3.org/wiki/HTML/Usage/Headings/h1only#Heading_semantics_e…
http://html5doctor.com/computer-says-no-to-html5-document-outline/
chrisoverzero · 2013-08-22
Experience with the <video> and <audio> tags has shown that their pattern isn't a great pattern to continue using.
[0]: http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0247…
[1]: http://html5doctor.com/interview-with-ian-hickson-html-editor/
pornel · 2012-04-24
WebSockets aren't HTTP — fake header is not enough to fool HTTP-compliant servers/proxies. You could try HTTPS WebSockets with TLS 1.1 SNI vhosts.
I recommend using Server-Sent Events instead. You get nearly same API for realtime server->client push, and they're HTTP-compatible:
http://html5doctor.com/server-sent-events/
http://speakerdeck.com/u/pornel/p/server-sent-events
yahelc · 2012-01-03
At best, IP Geolocation will get you to a nearby city; it won't get you down to the neighborhood/block level reliably.
Try HTML5 geolocation. The user has to give permission (through the browser), and its not universally supported, but, the results tend to be pretty solid. http://html5doctor.com/finding-your-position-with-geolocation/
joshuacc · 2010-10-17
I'd suggest checking out http://html5doctor.com
The authors do a pretty thorough job of reviewing the semantics of new (or updated) HTML5 elements.
MichaelTieso · 2014-03-26
Perhaps http://html5doctor.com?
notpushkin · 2024-08-24
> Take headings, for example: in component-based development, I often don't know (and shouldn't care) what level a heading is in my reusable widget, but I am forced to choose regardless.
We could have used <h1>s everywhere with Document Outline:
<body> <h1>top level heading (parent sectioning element is body)</h1> <section> <h1>2nd level heading (nested within one sectioning element)</h1> ... </section> </body> Unfortunately, this was never implemented in browsers and was removed in HTML 5.1.
https://html5doctor.com/computer-says-no-to-html5-document-outline/
alwillis · 2022-11-11
okay, fine, you’re all still using “i” so we’ll put it back in the standard
Going from HTML/XHTML to HTML5/XHTML5, several elements were redefined, including <i> and <b>.
It’s nothing new.
Here’s an article from HTML5 Doctor explaining this more than 12 years ago [1]. I hope web developers serious about their craft aren’t just now discovering this.
[1]: http://html5doctor.com/i-b-em-strong-element/
open-source-ux · 2020-06-09
The Mozilla developer website has a complete reference site on HTML5 with examples of each HTML5 element and the correct usage:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
I also like the HTML5 Doctor site - they have a less formal, sometime more readable tone:
http://html5doctor.com/article-archive/
brlewis · 2018-12-27
Does it have to be role=main to support all screen readers, or these days do they generally support http://html5doctor.com/the-main-element/ ?
tedmiston · 2017-07-28
It's pretty hard to argue a chat transcript as tabular data.
<dialog>
<dt>Sam</dt>
<dd>Knock, Knock.</dd>
<dt>Eric</dt>
<dd>Who's there?</dd>
<dt>Sam</dt>
<dd>Justin.</dd>
<dt>Eric</dt>
<dd>Justin who?</dd>
<dt>Sam</dt>
<dd>Justin time for dinner!</dd>
</dialog>
http://html5doctor.com/a-little-more-conversation-with-dialog/
boredpudding · 2017-02-20
> A heading is a line of text providing a title for a section.
Which is exactly what <header> is trying to be.
> …introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
> When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
Source: http://html5doctor.com/the-header-element/ (quoted from the actual spec)
alexgrcs · 2017-02-14
The <address> example is wrong. <address> defines contact information, but it's not appropriate for all postal and e-mail addresses.
http://html5doctor.com/the-address-element/
currysausage · 2016-04-11
Kinda. WHATWG (who do the actual work on HTML) have dropped the version number and made HTML a living standard: https://html.spec.whatwg.org/multipage/
See also the FAQ: https://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.…
And this quote by Hixie: "You know what will be around ten years from now by looking at what is implemented in two browsers today. If it’s implemented in two browsers today, I can almost guarantee it’ll still be around in ten years. If it’s not, all bets are off. This has nothing to do with “living standard” vs. versioned specs, though. HTML4 has all kinds of features that aren’t in HTML anymore — for example, <object declare> and <a coords>." (http://html5doctor.com/interview-with-ian-hickson-html-editor/)
nostrademons · 2015-10-26
You're looking for "<style scoped>", which is in Firefox, used to be in Chrome, but was eventually removed in favor of Shadow DOM.
http://html5doctor.com/the-scoped-attribute/
http://caniuse.com/#feat=style-scoped
https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/sc…
I think the main reason webcomponents won out over scoped styles is because usually once you need to scope your styles, you find you also need to scope your querySelector calls, and your DOM traversals, and your IDs....and pretty soon you have shadow DOM. It's unlikely that you need style namespacing if you're just a single dev working on a static page, and it's unlikely that you won't need JS & DOM scoping if your product grows beyond that.
gsnedders · 2014-10-28
http://html5doctor.com/the-ride-to-5/ is an interesting overview of perspectives of various people who've been around HTML5 for years about its publication as a REC.
nej · 2014-01-08
Here's another notable one: http://html5doctor.com/element-index/
schiffern · 2013-07-08
>There is probably some HTML5 history API way to do it that lets me have back and forward without saving every history entry, I'll look into it.
Do you mean the Back & Forward buttons in the browser?
If you can go back/forward to different states, why wouldn't those show up as history entries? I don't think you can decouple the displayed "history" drop-down list from the behavior of the back/forward buttons (for reasons that are probably obvious).
http://html5doctor.com/history-api/
loupeabody · 2013-06-26
I feel like this sentiment has been bubbling under the surface of my thought process every time I open up my editor. I've never taken the time to scrutinize that feeling though, too busy stressing over the details of whatever I'm making.
Perhaps only tangentially related, but our workflows are significantly related to the technologies we use, right? Ian Hickson in an interview [0]
"The Web technology stack is a complete mess. The problem is: what would you replace it with?"
[0]http://html5doctor.com/interview-with-ian-hickson-html-editor/
JangoSteve · 2012-07-12
> For example, in HTML vim should know that you can’t nest a div inside an a...
In HTML5, you can. See http://html5doctor.com/block-level-links-in-html-5/
leeoniya · 2012-04-09
i believe <u> is back from the dead also. http://html5doctor.com/u-element/
jacobolus · 2012-04-06
http://html5doctor.com/drag-and-drop-to-server/
But PPK says “it’s a fucking disaster.”
http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
mmahemoff · 2012-02-16
A simple, standards-based way to implement this would be to use the HTML5 details and summary elements.
http://html5doctor.com/the-details-and-summary-elements/
You could make default the details to be "open" for big screens and closed, showing the summary only, for small ones. Downside is that you only get two levels if you stick to the spirit and letter of the standard.
motyar · 2012-01-25
Here are few more resources
http://www.html5rocks.com/en/tutorials/eventsource/basics/
and
http://html5doctor.com/server-sent-events/
chaosmachine · 2011-02-20
Except the highest level (h1 in this case).
http://html5doctor.com/the-hgroup-element/
seanalltogether · 2010-12-13
In case you're wondering, Firefox and Opera do not support mp3 files, so for those browsers you need flash to play the audio.
http://html5doctor.com/native-audio-in-the-browser/
Audio support is just as fragmented as video support at the moment.