Show HN: A guide to all HTML5 elements and attributes • Hacker News Board

Re: Show HN: A guide to all HTML5 elements and attributes

#21

Post by danielhunt » Tue, Feb 14, 2017, 1:38 PM UTC

ahstro wrote: post #17

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.

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.

Re: Show HN: A guide to all HTML5 elements and attributes

#22

Post by malydok » Tue, Feb 14, 2017, 1:41 PM UTC

lisper wrote: post #13

You left out ;-)

Don't forget also!

Re: Show HN: A guide to all HTML5 elements and attributes

#23

Post by lisper » Tue, Feb 14, 2017, 1:53 PM UTC

malydok wrote: post #22

lisper wrote: post #13

You left out ;-)

Don't forget also!

And ! And !

Re: Show HN: A guide to all HTML5 elements and attributes

#24

Post by dahauns » Tue, Feb 14, 2017, 1:57 PM UTC

falsedan wrote: post #12

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

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

(Get off my lawn!)

Re: Show HN: A guide to all HTML5 elements and attributes

#25

Post by xamuel » Tue, Feb 14, 2017, 1:58 PM UTC

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.

Re: Show HN: A guide to all HTML5 elements and attributes

#26

Post by aiaf » Tue, Feb 14, 2017, 2:11 PM UTC

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:'

Re: Show HN: A guide to all HTML5 elements and attributes

#27

Post by jkochis » Tue, Feb 14, 2017, 2:15 PM UTC

Can you add the 'range' input type?

Re: Show HN: A guide to all HTML5 elements and attributes

#28

Post by projektir » Tue, Feb 14, 2017, 2:16 PM UTC

The design is really cute!

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

Re: Show HN: A guide to all HTML5 elements and attributes

#29

Post by etimberg » Tue, Feb 14, 2017, 2:18 PM UTC

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/ 2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ca...

Re: Show HN: A guide to all HTML5 elements and attributes

#30

Post by callahad » Tue, Feb 14, 2017, 2:20 PM UTC

I believe your kbd example is incorrect. You suggest

> To save, press Ctrl + S.

But the spec (both W3C and WHATWG) suggests that individual keys should be nested inside an outer 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 Ctrl + S.

Cite: https://w3c.github.io/html/textlevel-semantics.html#the-kbd-...

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 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.