9 ms·

Show HN: A guide to all HTML5 elements and attributes

• edent 10y ago
  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 10y ago
    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 10y ago
      > 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.
    • OJFord 10y ago
      > I think a nice feature would be if the description pages linked to the relevant MDN page They do, top right next to (the useless, ridiculous) 'share' link.
• ulucs 10y ago
  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
• adontz 10y ago
  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
• dagw 10y ago
  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 10y ago
    Don't ask a web reference page to act like a web page...
• neogodless 10y ago
  For some reason, if I have self-closing and inline checked, and uncheck inline, meta items appear.
  • neogodless 10y ago
    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 10y ago
      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".
• cabalamat 10y ago
  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 10y ago
    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 10y ago
      > 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 10y ago
        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 10y ago
• falsedan 10y ago
  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
  • bshimmin 10y ago
    Oh, such happy memories of that site... This has quite made my day!
  • dahauns 10y ago
    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!)
• lisper 10y ago
  You left out <center> ;-)
  • malydok 10y ago
    Don't forget <marquee> also!
    • lisper 10y ago
      And <blink>! And <font>!
      • myfonj 10y ago
        And beloved <xmp> and <plaintext>, which, unlike <blink>, have still 100% support in current browsers.
• teh_klev 10y ago
  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.
• tenaciousDaniel 10y ago
  I wouldn't say hgroup is experimental. It was on the standards track and now it's being deprecated.
  • jbeales 10y ago
    Came here to post that - it's not experimental at all - it's dead.
• ahstro 10y ago
  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 10y ago
    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.
  • Vendan 10y ago
    The tagging seems to be "filter out anything that has a tag that's not selected", not "only show things that have one of these tags"
• k__ 10y ago
  Is there a good list of the most used meta tags out there?
• alexgrcs 10y ago
  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/
• xamuel 10y ago
  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 10y ago
    In the past I've used http://devdocs.io/ http://devdocs.io/, which is available offline.
• aiaf 10y ago
  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:'
• jkochis 10y ago
  Can you add the 'range' input type?
• projektir 10y ago
  The design is really cute! I appreciate that the website works well even with all scripts blocked.
• etimberg 10y ago
  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/canvas https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ca...
• callahad 10y ago
  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-element 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 <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.
  • jacobmischka 10y ago
    Wow, the second example in fig 111. > <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd> Boy that's terrible. Edit: Oh, I missed that the example immediately following it is supposedly equivalent and only uses a single outer tag. I don't really understand then, if they're equivalent then what's the point of the defined semantics above?
    • callahad 10y ago
      My reading of it is that: 1. <kbd>___</kbd> means "literal user input" 2. <kbd><kbd>___</kbd></kbd> means "this specific, atomic keypress" 3. <kbd><kbd><samp>___</samp></kbd></kbd> means "this specific, atomic button/action/menu item" So you can fall back to just using method 1, but it implies generic user input, inclusive of but not limited to keypresses. Thus, styling and treating a single kbd tag specifically like a keyboard button is still likely incorrect, since that precludes other semantically valid uses?
      • 10y ago
• cyborgx7 10y ago
  Why does it want me to whitelist it in my adblocker when it claims to be free and to always be free?
  • nathancahill 10y ago
    It's free to you, not free to them.
    • cyborgx7 10y ago
      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 10y ago
        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 10y ago
          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 10y ago
            Tell me more about this Silicon Valley place where everything is magically free?
            • mcbits 10y ago
              I'll have to defer to someone who actually makes that claim.
• codingdave 10y ago
  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.
• jean- 10y ago
  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-element https://www.w3.org/TR/html5/grouping-content.html#the-p-elem...
  • nathancahill 10y ago
    Why would you do that to yourself?
  • talmand 10y ago
    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 10y ago
      I think the point is that you may not be expecting the P tag to auto close, in the case of things like Address.
  • tannhaeuser 10y ago
    Don't worry, http://sgmljs.net/docs/w3c-html51-dtd.html http://sgmljs.net/docs/w3c-html51-dtd.html has you covered Edit: to expand a bit, the link is to a pretty readable/hyperlinked DTD grammar for HTML (W3C HTML 5.1)
  • ytugiuyghvk 10y ago
    Nit: self-closing refers to tags that are closed like <this/>.
• xophishox 10y ago
  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.
• blauditore 10y ago
  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/
  • giancarlostoro 10y ago
    That site needs to be updated too, it links to WebPlatform Docs but that website / project itself is discontinued see: http://docs.webplatform.org/wiki/Main_Page http://docs.webplatform.org/wiki/Main_Page
  • chamini2 10y ago
    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/
• shdon 10y ago
  You've got the description for the "ins" element the same as for the (admittedly related) "del" element.
• 0x1d 10y ago
  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?
• criswell 10y ago
  If you like this, you'll lOoOoOoOve this: http://cssreference.io/ http://cssreference.io/
• mouzogu 10y ago
  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 10y ago
    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.
• darekkay 10y ago
  A more general/comprehensive API documentation tool (which can be also used offline) is DevDocs[1] [1] http://devdocs.io http://devdocs.io
  • jacobmischka 10y ago
    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
• HNaTTY 10y ago
  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.
• jeshan25 10y ago
  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.
• shpx 10y ago
  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/input https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...
  • deleted 10y ago
    [deleted]
  • deleted 10y ago
    [deleted]
  • myfonj 10y ago
    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.
• shpx 10y ago
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://developer.mozilla.org/en-US/docs/Web/HTML/Element 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.
• darkhorn 10y ago
  Keygen is missing https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_keygen https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_k... which is available in Firefox 51.
• KingMob 10y ago
  Nice. Can you add support for <svg>? I know it's not HTML...but it would be handy.
• karol 10y ago
  Can you help with a community driven website content as well? http://docs.webplatform.org/wiki/html http://docs.webplatform.org/wiki/html
  • karol 10y ago
    Actually not with this one, unfortunately it has been discontinued.
• tomkin 10y ago
  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.
• SFJulie 10y ago
  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
• badthingfactory 10y ago
  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.
• javajosh 10y ago
  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.
• NKCSS 10y ago
  If I uncheck-all but experimental, it doesn't hide dt, li, option, td, th and tr.
• macintux 10y ago
  Reminiscing about days spent digging through http://www.blooberry.com/indexdot/html/index.html http://www.blooberry.com/indexdot/html/index.html