
Show HN: A guide to all HTML5 elements and attributes - bbx
http://htmlreference.io/
======
shpx
[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element)

Same thing but guaranteed to be up to date and (more) complete.

For example, htmlreference.io's page for <input> doesn't mention the
autocomplete attribute. MDN lists all its possible values.

[http://htmlreference.io/element/input/](http://htmlreference.io/element/input/)

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/in...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/input)

~~~
myfonj
MDN indeed is (and should remain) the canonical resource, but projects like
this could be nice additions.

[https://meiert.com/en/indices/html-
elements/](https://meiert.com/en/indices/html-elements/) \- another nice
minimalist project with great value.

------
callahad
I believe your kbd example is incorrect. You suggest

> _To save, press <kbd>Ctrl + S</kbd>._

But the spec (both W3C and WHATWG) suggests that individual keys should be
nested inside an outer <kbd> tag: "When the kbd element is nested inside
another kbd element, it represents an actual key or other single unit of input
as appropriate for the input mechanism."

Thus, the example should be:

> _To save, press <kbd><kbd>Ctrl</kbd> \+ <kbd>S</kbd></kbd>._

Cite: [https://w3c.github.io/html/textlevel-semantics.html#the-
kbd-...](https://w3c.github.io/html/textlevel-semantics.html#the-kbd-element)

On the face of it, this seems ridiculous. It's too verbose, the tag name is
misleading, and if you actually _use_ the correct markup on GitHub or
StackOverflow, it will render incorrectly because both sites assume the
standalone <kbd> element represents physical keyboard buttons.

On the other hand, what's the value in semantic markup if we don't adhere to
its semantics?

Practically speaking, I would be a happier person today if I hadn't read that
part of the spec, and instead persisted on in blissful ignorance of the
element's intended semantics. Thanks, specs.

~~~
callahad
Update: Looks like the <kbd> tag dates to the first draft of HTML 2.0 in 1993,
where it was defined as "in an instruction manual, Text typed by a user."
([https://tools.ietf.org/html/draft-ietf-iiir-
html-00](https://tools.ietf.org/html/draft-ietf-iiir-html-00))

It remained more or less the same through HTML 4.01: "Indicates text to be
entered by the user."

The notion of using nested kbd tags to indicate literal keys appears to have
been introduced by WHATWG when working on HTML5.

...I'll dig into this more and actually write a blog post about it. I'm _this_
close to relaunching a proper blog.

~~~
gsnedders
> The notion of using nested kbd tags to indicate literal keys appears to have
> been introduced by WHATWG when working on HTML5.

Did that follow common usage at the time?

~~~
chc
Talking about common usage of the kbd tag is kind of difficult given that it's
never been commonly used, but personally, this was the only thing I ever saw
it used for.

------
blauditore
How is this updated (manually or automatically from official specs)?

Call me paranoid, but I see this diverging from actual specs, then people
googling for "html reference" finding it and thinking it is something
official. The result would be another W3Schools disaster[1].

In my opinion, the official W3 specification pages are not that bad, and
alternatively there's the simpler MDN with strong community support (thus
lower risk of deprecation).

[1]: [http://www.w3fools.com/](http://www.w3fools.com/)

~~~
chamini2
It's maintained in GitHub[1], from the same guy of cssreference.io[2].

[1]: [https://github.com/jgthms/html-
reference](https://github.com/jgthms/html-reference)

[2]: [http://cssreference.io/](http://cssreference.io/)

------
dagw
Really cool. One feature request. when a description of a tag refers to
another tag, then those tags should be links.

For example the description for <li> is:

    
    
       Defines a list item within an ordered list <ol> or unordered list <ul>.
    

Here I should be able to click on <ol> and <ul> to get information about those
tags.

~~~
frandroid
Don't ask a web reference page to act like a web page...

------
falsedan
It's missing the links to context & to the spec, which was the killer feature
of the old WDG HTML Reference[0].

[0]:
[http://www.htmlhelp.com/reference/html40/alist.html](http://www.htmlhelp.com/reference/html40/alist.html)

~~~
dahauns
Well, there's a (rather hard to see) link to the MDN (which has reference
links) in the upper right corner. But yeah, this should be more prominent.

I'd consider this one expendable, though:

[https://imgur.com/a/V6SRq](https://imgur.com/a/V6SRq)

(Get off my lawn!)

------
adontz
Links to [http://caniuse.com/#search=](http://caniuse.com/#search=) will be
useful. dt, li, option, td, th, tr are visible regardless of finder checkboxes

------
ahstro
Nice, but seems to be something wrong with the tagging. I unchecked all tags
except `experimental` and I ended up with seven results, only one of which is
actually experimental, (`picture`), the rest being _pretty_ cemented (`dt`,
`li`, `option`, `td`, `th`, and `tr`). It also seems to leave out some other
expermental tags, like `wbr` and `slot`, that are on the site.

~~~
danielhunt
Those `cemented` examples appear to be ones that don't have a tag at all

If you uncheck all boxes, those items remain. That's probably why they're
there for your case.

------
edent
That's really well laid out. Less detail than MDN, but that site can be
overkill.

Two small pieces of feedback. HTTPS support would be good. Also, when I scroll
the list of element and then click on one, I'm taken back to the top of the
list - I'd like to stay where I am.

~~~
jgorn
I think a nice feature would be if the description pages linked to the
relevant MDN page - for when you want more extensive information about an
element.

Otherwise, I love this OP. Will likely use it regularly!

~~~
cabalamat
> I think a nice feature would be if the description pages linked to the
> relevant MDN page - for when you want more extensive information about an
> element.

This would be really good. Mostly I'm just looking for a quick reference, but
sometimes I want all the details.

------
darekkay
A more general/comprehensive API documentation tool (which can be also used
offline) is DevDocs[1]

[1] [http://devdocs.io](http://devdocs.io)

~~~
jacobmischka
Also Zeal[1] for Windows and Linux and Dash[2] for Mac, for those who would
prefer native apps.

[1]: [https://zealdocs.org/](https://zealdocs.org/) [2]:
[https://kapeli.com/dash](https://kapeli.com/dash)

------
codingdave
The checkbox filters at the top are somewhat un-intuitive. For example, If I
uncheck everything but experimental, I want to see all experimental... but
what I get is all experimental that are not block, inline, etc. I mean, as a
developer, I see how those filters work... but as an end user, that isn't how
I want them to work.

------
etimberg
The canvas page [1] has incorrect defaults listed for the width. It states
that the default is 100 but it is actually 300 [2].

1\.
[http://htmlreference.io/element/canvas/](http://htmlreference.io/element/canvas/)
2\. [https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/ca...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/canvas)

------
alexgrcs
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/](http://html5doctor.com/the-
address-element/)

------
mouzogu
from a UX perspective i really like this. like the way it's laid out and
presented - found it easy to scan.

I know a lot of people big up MDN vs W3Schools and all their arguments are
basically correct but i find it (mdn) really ugly and hard to read. i often
find myself going to w3schools to just copy a snippet or get a 1 line
description of what i need.

mdn often feels more like a technical spec as opposed to a guide, which it
kind of is i suppose.

great work on the layout!

~~~
seangrogg
While I do find this to be the case with regard to MDN it's worth noting that
in many cases they have very good practical articles: Using XMLHttpRequest,
Getting Started with WebGL, Using IndexedDB, etc.

------
xamuel
This is really great. It would be even greater if it could be used offline.
Instead of hitting the server every time I choose one of the elements to view.

~~~
akcreek
In the past I've used [http://devdocs.io/](http://devdocs.io/), which is
available offline.

------
shdon
You've got the description for the "ins" element the same as for the
(admittedly related) "del" element.

------
tenaciousDaniel
I wouldn't say hgroup is experimental. It was on the standards track and now
it's being deprecated.

~~~
jbeales
Came here to post that - it's not experimental at all - it's dead.

------
jean-
Good stuff. Would be even nicer if it showed information about optionally
self-closing tags, which is one of the main reasons I occasionally need to
look at the spec. For instance:

> A p element's end tag may be omitted if the p element is immediately
> followed by an address, article, aside, blockquote, div, dl, fieldset,
> footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p,
> pre, section, table, or ul, element, or if there is no more content in the
> parent element and the parent element is not an a element.

Links to the relevant parts of the official spec would be nice too, e.g.
[https://www.w3.org/TR/html5/grouping-content.html#the-p-
elem...](https://www.w3.org/TR/html5/grouping-content.html#the-p-element)

~~~
talmand
I'd rather just close the tag instead of trying to recall the specific
instances of when I'm not required to close the tag.

~~~
moron4hire
I think the point is that you may not be expecting the P tag to auto close, in
the case of things like Address.

------
javajosh
Without compatibility information this is more dangerous than useful. For
example, a naive HTML author would use the semantic tags, only to fail in most
browsers. There is mention neither of compatibility nor polyfill. Better off
with MDN and caniuse.com.

------
teh_klev
Nice...would be useful to have the summary of what a tag's purpose is on the
main page list of tags. For three letter or less tags it's not always obvious
what I'm looking to achieve a specific task.

------
xophishox
Is there something similar to this for javascript?

I really find this format super easy to read, even if there may be slight
inconsistencies and nuances to reading it.

------
cabalamat
In general this is pretty good. One mistake that it doesn't make is to use low
contrast for everything.

However, the code examples don't look very nice on my box due to the font
which comes out as Nimbus Mono L. How about you link to an actual font? (I
like Ubuntu Mono, though there are lots of other good programming fonts).

Also with respect to code samples, would black text on a white background be a
possibuility?

~~~
kelnage
On the font issue: you're effectively saying "I don't like the default
monospace font my browser is configured to use, please change your website to
fix this" (since Nimbus Mono isn't in their CSS font family list). I feel you
as a user have some responsibility in that case.

~~~
cabalamat
> you're effectively saying "I don't like the default monospace font my
> browser is configured to use, please change your website to fix this"

No, that's not true. I have just changed the monospace font on Firefox to
Ubuntu Mono, and it is still showing as Nimbus Mono. This is the website doing
this -- for example the change is reflected fine in HN.

> I feel you as a user have some responsibility in that case.

These days when I build websites I normally specify specific web fonts so that
I know it won't default to something not good.

~~~
kelnage
The website's CSS uses the following fonts for code blocks:

> "Inconsolata", "Source Code Pro", "Consolas", "Monaco", "Courier", monospace

So either it is using one of those fonts (Courier and Nimbus Mono L are
similar I guess), the site is serving you special CSS that I'm not getting
(and I've tested it on Linux and Windows), or Firefox has done some weird font
aliasing and one of the above is being treated as Nimbus Mono L.

~~~
cabalamat
I've checked and it's picking up the "Courier" from the CSS.

(I tried removing Courier and it displayed the text in something nice-looking
which Firefox reports is DejaVu Sans Mono)

------
tomkin
I love things like this, but I find I have about 30 of these sorts of things
bookmarked, and I never think to pull them up when I'm in need – I immediately
go to Google and find something like the Mozilla ref @shpx mentioned. It's a
real problem I wish there was a solution for. Other than of course having a
better memory.

------
HNaTTY
The filter checkboxes are a bit weird, for example elements (such as br and
img) which are both self-closing and inline only show up if both self-closing
and inline are selected, instead of one or the other. Also there are several
elements such as li which are not categorized and show up even if no
checkboxes are selected.

------
0x1d
This is the cleanest HTML5 reference site I've seen. I like that it has links
back to MDN as well.

Is it design completely custom or did you use a template or theme? I'm really
struggling with the design side of my side projects.

Also, if you don't mind me asking, how difficult was it to get approved for
Carbon Ads?

------
neogodless
For some reason, if I have self-closing and inline checked, and uncheck
inline, meta items appear.

~~~
neogodless
To expand, the issue seems to happen after clicking a tag and then pressing
back. It's not specific to meta. This time block elements were appearing when
not tagged.

~~~
villancikos
And as an example, when filtering by "self-closing" the <img> tag does not
appear. That happens because "inline" is not selected. Same behavior with
<embed> and removing either "self-closing" or "block".

------
darkhorn
Keygen is missing
[https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_k...](https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_keygen)
which is available in Firefox 51.

------
macintux
Reminiscing about days spent digging through
[http://www.blooberry.com/indexdot/html/index.html](http://www.blooberry.com/indexdot/html/index.html)

------
projektir
The design is really cute!

I appreciate that the website works well even with all scripts blocked.

------
karol
Can you help with a community driven website content as well?
[http://docs.webplatform.org/wiki/html](http://docs.webplatform.org/wiki/html)

~~~
karol
Actually not with this one, unfortunately it has been discontinued.

------
ulucs
quite cool! but even after deselecting all the options, I'm still being shown
some tags (select, tr, th, td, dt, li). I think it's because they haven't been
tagged with anything

------
aiaf
I've only checked the anchor tag, and it is lacking.

It should link to the URI RFC to illustrate all possibly valid syntax for the
href attribute. Also doesn't mention 'javascript:'

------
badthingfactory
Every time I look at lists of HTML5 elements, I about how I really need to get
better at writing semantic HTML. Tomorrow I will go to work and create 500
more div tags.

------
criswell
If you like this, you'll lOoOoOoOve this:
[http://cssreference.io/](http://cssreference.io/)

------
cyborgx7
Why does it want me to whitelist it in my adblocker when it claims to be free
and to always be free?

~~~
nathancahill
It's free to you, not free to them.

~~~
cyborgx7
If I'm supposed to let them sell my privacy and attention, I wouldn't really
call it free. Money isn't the only thing of value I can give to a website.

~~~
recursive
Free means you don't have to give them money to use it. If you use a different
definition, you will often be confused.

~~~
mcbits
It's the voluntary nature of the payment and whether the cost is tangible to
you that determine what is free, not the currency used. Substitute "your FBI
file" for your ad network profile and "compute time on your Amazon instance"
for JavaScript time in your browser to make this clearer.

~~~
nathancahill
Tell me more about this Silicon Valley place where everything is magically
free?

~~~
mcbits
I'll have to defer to someone who actually makes that claim.

~~~
jeshan25
Decide for yourself, either use it or don't.

------
KingMob
Nice. Can you add support for <svg>? I know it's not HTML...but it would be
handy.

------
NKCSS
If I uncheck-all but experimental, it doesn't hide dt, li, option, td, th and
tr.

------
jeshan25
really really cool. I've shared it in a facebook group for front end devs that
I'm part of.

One minor issue: Your search bar doesn't look like one :) I didn't notice it
until my second visit.

------
k__
Is there a good list of the most used meta tags out there?

------
jkochis
Can you add the 'range' input type?

------
lisper
You left out <center> ;-)

~~~
malydok
Don't forget <marquee> also!

~~~
lisper
And <blink>! And <font>!

~~~
myfonj
And beloved <xmp> and <plaintext>, which, unlike <blink>, have still 100%
support in current browsers.

------
SFJulie
Reading the comments:

\- nice brogramming; \- not up to date; \- not refering the spec (sorry this
is important when you are in trouble); \- well read @shpx comment he is right

Verdict: more signal less noise policiy says, don't click to the bait _.

_ normally I put a goatse.cx link here or a rickroll

