7 ms·
Every HTML Element
- amphitheatre 2y agoOn mobile (Safari), the link to the article scrolls me down towards the bottom of the page by the iframe/red dot, making me think half the page was missing.
- sidsancheti 2y agoI'm on PC (Brave) and I experienced the same thing.
- wxw 2y agoThanks for the heads up! Misconfigured the source in <iframe>. Interesting behavior.
- XCSme 2y agoWeird that the URL links to the bottom of the page(?).
- mg 2y agoI wonder if it would be possible to do this in a way that the page shows its own source code. Similar to: https://no-gravity.github.io/html-quine/index.html https://no-gravity.github.io/html-quine/index.html Could be tricky, because non-textual elements would probably have to be taken care of individually. For example a video would probably have to show a video of its own representation in code.
- jazzypants 2y agoI think it would be better to do a split panel so you could see the source and the end result side by side. This would eliminate the need for somehow showing the video and the source in the same place. You could even include the shadow DOM trees for a full explanation of how the browser renders complex tags like video.
- fsckboy 2y agofor certain elements, a quinesque approach might not be that useful, but source could be displayed juxtaposed to results. (to show numbered lists, do you want to display the ol tags before the numbers (thus using fake numbers) or do you let ol numbering tags tag the elements with numbers and then show the source inside that?) btw it really drives me crazy that browser implementors think that when I copy/paste a numbered list, I somehow don't want the numbers.
- alwillis 2y agoThis is very good: https://meiert.com/en/indices/html-elements/ https://meiert.com/en/indices/html-elements/
- TZubiri 2y agoExcept this custom one I just invented that I implement in my custom browser
- byearthithatius 2y agoToo bad OP is not omniscient and capable of predicting your made up tags
- deleted 2y ago[deleted]
- deleted 2y ago[deleted]
- lelanthran 2y ago> Too bad OP is not omniscient and capable of predicting your made up tags I think a more accurate word here would be "prescient". "Omniscient" means knowing everything, but I believe that "everything" doesn't include "everything now and in the future. "Prescient" means knowing future events, i.e. "predicting" (Emphasis mine)
- riffraff 2y agoThat's obviously up to your definition, but omniscience as commonly understood as an attribute of the Christian God is also knowledge of future events (which is why it's usually argued that it conflicts with free will). "The future" is part of "everything".
- lelanthran 2y agoI agree with your reasoning (I'm not married to those definitions). Looking at it again, I would still say that "prescient" would be more accurate, because: 1. Omniscient is a superset that include prescient" 2. Prescient is a narrower meaning than omniscient. IOW, when describing a car, for example 1. "Automobile" can be used to describe my wife's car 2. "SUV" is a more accurate description. So I'll still go with "prescient" being more accurate, in much the same way that "SUV is more accurate.
- bbx 2y agoRelevant: https://htmlreference.io/ https://htmlreference.io/
- assimpleaspossi 2y agoEven more relevant: https://html.spec.whatwg.org/dev/semantics.html#semantics https://html.spec.whatwg.org/dev/semantics.html#semantics
- Neuronaut 2y agoThe HTML Tags Memory Test [0] game refers to 114 tags. Your link got 113. I wonder what's missing? [0]: https://codepen.io/plfstr/full/zYqQeRw https://codepen.io/plfstr/full/zYqQeRw
- dmsnell 2y agoThe memory test is missing some deprecated and non-conforming elements. The HTML spec doesn’t have a single comprehensive list either, so it can be a little tricky to define or name “all” of the elements. For example, there are elements like nextid or isindex which don’t have element definitions but which appear in the parsing rules for legacy compatibility. These are necessary to avoid certain security issues, but the elements should not be used and in a sense don’t exist even though they are practically cemented into HTML forever.
- assimpleaspossi 2y agohttps://html.spec.whatwg.org/dev/obsolete.html https://html.spec.whatwg.org/dev/obsolete.html
- alentred 2y agoWait. No <script> element? An elephant went missing!
- matchamatcha 2y agoLook at the source.
- eieio 2y agoI like this! It's fun to compare it to "A blog post with every HTML element" [1][2], which gets at a (very!) similar thing but in a very different way. This post primary shows, and is a little more chaotic (meant positively!) whereas the other post is much more prose and explanation heavy (also good, but very different). [1] https://www.patrickweaver.net/blog/a-blog-post-with-every-html-element/ https://www.patrickweaver.net/blog/a-blog-post-with-every-ht... [2] HN discussion: https://news.ycombinator.com/item?id=37104742 https://news.ycombinator.com/item?id=37104742
- wxw 2y agoWhoa! I'm a big fan of yours. You've really inspired me to think more creatively about the web/software. Thanks a ton, I'm glad this reached you.
- eieio 2y agoAh well hello! I'm not sure I've been recognized like that on the internet before. Thank you, that makes me very happy! From your website it looks like we're in the same city; feel free to shoot me an email (mine is in my profile) if you'd like to grab coffee sometime :)
- lelanthran 2y agoAfter looking at the source for this, I have a tangential question (feel free to answer even if you aren't the OP): Whats the advantage of creating a separate `label` element before/after the input and using `for=` compared to simply wrapping the target input in the label element, like the code snippet below? <label> Your Name? <input /> </label> It seems to me that there is a lot less room for error when not using IDs, so I always wrap the input. My pages use a client-side webcomponent to inject fragments of HTML into the page (navbar, footer, etc), and using IDs almost always cause conflicts in the end, so I avoid ID attributes in all but a few very rare instances.
- assimpleaspossi 2y agoNote that the <input> tag does not need and does not use a closing slash and never has in any HTML standard: https://html.spec.whatwg.org/dev/input.html#the-input-element https://html.spec.whatwg.org/dev/input.html#the-input-elemen...
- robby1066 2y agoFirst I've ever heard of hgroup. Subheadings are one of those little things I've wondered about the proper semantics for a million times and always end up doing something slightly different on the fly.
- hellcow 2y agoPicoCSS uses them well, as an example: https://picocss.com/docs/typography#heading-group https://picocss.com/docs/typography#heading-group
- adzm 2y agohgroup is considered deprecated in HTML5 though, whatever that actually means.
- sillysaurusx 2y agoIt means if you use it then it’ll work fine but younger people will frown at you.
- fsckboy 2y agounlike the <blink> tag where younger people will just stare at you in a creepy extended unblinking gaze. it would be so much more satisfying if it still made them blink.
- 2y ago
- joshdavham 2y agoI like that you included the <ruby> tag! I really wish more pages would use them when rendering Chinese/Japanese characters in English text.
- fsckboy 2y ago(your comment is very minimally informative, containing 1 bit of information: "there is something to learn about ruby". Searching "show source", "hidden gems" on OP's page marks the ruby spot) and looking up the <ruby> tag: https://interactive-examples.mdn.mozilla.net/pages/tabbed/ruby.html https://interactive-examples.mdn.mozilla.net/pages/tabbed/ru... The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common. The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.
- efilife 2y agoI think it's very clear what he meant
- burgerrito 2y agoOh wow, TIL the HTML element for furigana is <ruby>
- joe8756438 2y agono marquee? c’mon
- hinkley 2y agoIt’s a prank bro!
- ewrong 2y agoBlink
- cookie_monsta 2y agoThey are both there, in the table at the bottom
- assimpleaspossi 2y agoBoth <marquee> and <blink> have never been part of any HTML specification since the beginning of time except, in marquee's case, it was included in the current spec for the whole purpose of marking it as obsolete.
- pastureofplenty 2y agoI know it's deprecated but I was expecting to see <xmp>.
- mwcz 2y agoIt was so fun tossing that opening tag into a forum post and watching the whole forum disintegrate.
- assimpleaspossi 2y ago<xmp> was made obsolete in HTML3.0 or 2.0 which was around 1995, I think. In any case, it was removed from version 4.0.
- Isognoviastoma 2y agoIt's impressing that browser can display many levels of recursive iframe.
- queueueue 2y agoI've counted 18! The next one was blank.
- Theodores 2y agoMost people insist on only using one element, which is the element of last resort, according to MDN. This is our friend, the <div>. The only use case I have for <div> is in a details/summary where there is no CSS to select the contents of a <details> element, excluding the <summary>. Does this mean I use <section> instead of <div>, as a 'direct replacement'? Nope. When using CSS grid, there is no need for <div> wrappers around everything. I do like to use the full HTML element set, and, with scoped CSS, to style the elements, rather than have loads of divs with loads of class attributes. It all looks so much neater, particularly if the unstyled CSS looks rather good.
- alxeder 2y agodo you have an example?
- Theodores 2y agoNot to hand, for sharing here, but just try it with something like your CV, in neat HTML. Set yourself some rules to not use classes (for the lols, not out of ideological hatred) or divs (there is always a better element). If you can't do it, there is probably more work to do with your document structure. Also try and always have a h1-h6 heading in your articles, sections, asides and even navs, at the top. Headings should not be in a sea of paragraphs, they should be at the top of a content sectioning element, nowhere else.
- rerdavies 2y agoOut of idle curiosity, which better element am I supposed to use when I'm using flex layout to space out elements on my page? (e.g., a toolbar with with left- and right- justified elements, among which is an expanding searchbox).
- assimpleaspossi 2y agoHTML elements are used to describe their content and not have anything to do with layout. While they often have common properties, these can be changed using CSS. So use the element that best describes its content.
- kayvulpe 2y agoAn index would be great
- fsckboy 2y agowhat this comment section is missing is "hey, here are other pages that do the same thing is a slighty different way" (there must be tons!? I would enjoy and learn from those type of comments so much I that I'd shout, "this is a motherfucking comment section!" https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/
- benwills 2y agoFor people interested in this sort of thing, I recently published a blog post looking at counts of HTML tags and their attribute values from a 2.9B page Common Crawl dataset. [1] There's also a SQLite DB available to download of the top 1k tag+attr+value combinations. [2] [1] https://webparsing.io/blog/hidden-in-html-parsing-page-layouts/ https://webparsing.io/blog/hidden-in-html-parsing-page-layou... [2] https://webparsing.io/data/commoncrawl-2024-11-html-tags-attributes-values/ https://webparsing.io/data/commoncrawl-2024-11-html-tags-att...
- jamesfinlayson 2y agoI think someone who works on Chrome did something a few years ago - though I can't remember exactly what they were trying to figure out.
- bornfreddy 2y agoNo <details> / <summary>? [0] [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
- hmmokidk 2y agoAs a browser game enthusiast I will have you tried for missing canvas
- butz 2y agoCanvas is stealthily hiding, as it has no content to display.
- 3willows 2y agoLols you are offering to sell this for $1? https://iamwillwang.com/dollar/ https://iamwillwang.com/dollar/
- wxw 2y agohaha, that's a bit of an inside joke (...for now?)
- divbzero 2y agoDisappointed to see <blink> or <marquee> merely mentioned but not used on that page, seemed like a serious omission. Based on my tests just now, <blink> no longer blinks in today’s browsers but <marquee> still scrolls happily.
- assimpleaspossi 2y agoBoth have never been part of any HTML specification. See my comment elsewhere here.
- hn_acker 2y agoThe <dialog> element says "This is a modal dialog displayed using just HTML." but that's a bit misleading because the dialog opens using JavaScript `document.getElementById('my-dialog').showModal()` in the onclick attribute of the relevant button.
- worble 2y agoWhich is strange because you absolutely can open dialogs without javascript with the popover attribute https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage https://developer.mozilla.org/en-US/docs/Web/API/Popover_API...
- robertoandred 2y agoThe Popover API only makes non-modal popups.
- worble 2y agoYes, but in the article I posted: > Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a <dialog> element is the right way to go. > You can turn a <dialog> element into a popover (<dialog popover> is perfectly valid) if you want to combine popover control with dialog semantics.
- robertoandred 2y agoBut it's still a non-modal dialog, which doesn't match the JavaScript functionality.
- worble 2y agoApologies, for some reason I was convinced you could get a proper modal using the popover api but you're right, it's not a proper modal.
- divbzero 2y agoWhere is the good old… <center>alignment with no CSS</center>
- assimpleaspossi 2y agoThat's been obsolete for over 20 years: https://html.spec.whatwg.org/dev/obsolete.html#non-conforming-features https://html.spec.whatwg.org/dev/obsolete.html#non-conformin...
- edoceo 2y agoBring back <blink> and <marquee>
- amenghra 2y agoYou can revive <blink> with a tiny bit of css: https://www.quaxio.com/blink.html https://www.quaxio.com/blink.html
- assimpleaspossi 2y agoYou can't bring back something that never existed and both of those have never been part of any HTML standard. See my comment about this elsewhere.
- assimpleaspossi 2y ago>>Ah, now there's some breathing room, thanks to <br />. That's XHTML which is XML. HTML does not use and does not need a closing slash and never has in any HTML specification. https://html.spec.whatwg.org/dev/text-level-semantics.html#the-br-element https://html.spec.whatwg.org/dev/text-level-semantics.html#t...
- thiht 2y agoI hate that XHTML went away. HTML parsing is terrible
- dmsnell 2y agoThe story of XHTML is instructive to the field of software design. There are plenty of good resources on the web if you search why did XHTML fail? HTML parsing at least is deterministic and fully specified, whereas XHTML, as an XML, leaves a number of syntax errors up to the parser and undefined. Conforming software may detect and report an error and may recover from it. While fatal errors should cause all parser to reject a document outright, this also leaves the end-user without any recovery of the information they care about. So XHTML leaves readers at a loss while failing to eliminating parsing ambiguity and undefined behavior. Interestingly, it’s possible to encode an invalid DOM with XHTML while it’s impossible to do so in HTML. That means that XML/XHTML has given up the possibility of invalid syntax (by acting like it doesn’t exist) for the sake of inviting invalid semantics.
- thiht 2y agoInteresting perspective, it makes me miss XHTML wayyy less. I was under the impression that XHTML (XML) was better specified and had less weirdness. I know HTML is now better specified but some of the things inherited from HTML 4 and before make no sense to me (optional closing times SOMETIMES, optional stuff everywhere).
- dmsnell 2y agoHTML didn’t make sense to me until I realized it’s built on a state machine and its rules are based on what’s on the stack of open elements. For example, a number of tags trigger a rule to close open P elements or list items, and many end tags trigger a rule saying something like “close open elements until you’ve closed one with the same name as this tag.” This, IMO, is a bigger reason to avoid regex and XML parsers for HTML documents. The rules aren’t apparent when thinking linearly about what strings appear after or before each other; they become clearer when thinking of HTML as a shorthand syntax for certain kinds of push and pop operations. XHTML is easier to parse, but for well-formed documents pushes the complexity of invalid markup into the rendering side. For example, it’s well-formed to include a button inside a button, so XHTML browsers render exactly this, but it makes no sense from a UI perspective and strange things happen when invalid markup is sent in well-formed XML.
- pretoriusdre 2y agoWebsites these days don't seem to use 'Under construction' animated gifs, and I think they are probably worse for it.
- assimpleaspossi 2y agoThe worse thing would be publishing an unfinished web site. That's why no one uses them anymore.
- smitelli 2y agoAccording to MDN [1] there is a <portal> element but hell if I know what it does. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...
- epcoa 2y agoWhile complexity of web tech means there's usually some hidden nuance, that description on MDN seems pretty clear: a non-interactive (other than for navigation) iframe, ie an <a> element that's a preview.
- assimpleaspossi 2y agoScroll to the bottom and you'll see that it must be enabled by the user, is experimental, and not listed in any HTML specification.
- bean-weevil 2y agoLooks to me like it's intended as a link with preview, and part of the idea is that user agents could do a sort of animated transition morphing the preview into the content of the destination page.
- paulddraper 2y agoIt’s a non-interactive iframe. (And experimental)
- Oia20 2y agoThe soundbite was great lol! Nice Work!
- nsonha 2y ago...all of which have poor dx and ui. There isn't any philosophy or process behind "what should become a tag" but hey, "use the platform"
- llmfan 2y ago[flagged]
- butz 2y agoIt would be useful if HTML content was not minified and have some comments added about each element besides them.
- noduerme 2y agoVery dismissive. Anyone not using <span> should take a second look. Of all the elements, this is the one to change font, size, color, etc. in any dynamic text without offsetting anything in your layout. Do you really want to throw your user's text inside a <div> inside your nice <div> layout? No.
- rahkiin 2y agoIndeed, <span> is for inline elements what <div> is for block elements: a way to organize and apply styling. With raw html/js it can also be used for targeting text changes.
- shahzaibmushtaq 2y agoLearned and also refreshed my HTML programming language (I'll not debate on it) knowledge without any touch of CSS.
- sylware 2y agogreat page, I discovered that my noscript/basic (x)html browser is doing more than I thought it did.
- rav 2y agoNo love for the <plaintext> tag? "The <plaintext> HTML element renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text." - it's my favorite obscure deprecated HTML tag.
- filcuk 2y agoWhat in the world was the intended use for that?
- kisonecat 2y agoI'm terrified of opening a paren andforgetting to close it! How terrifying to find a tagged paren that cannot be closed! "please accept from me this unpretentious bouquet of early-blooming" <plaintext>s
- layer8 2y agoIt was an easy way to use an existing plain-text document where HTML was expected. https://datatracker.ietf.org/doc/html/draft-ietf-html-spec-02.txt#section-14.2.3 https://datatracker.ietf.org/doc/html/draft-ietf-html-spec-0... The PLAINTEXT element was replaced by the LISTING element (which was itself deprecated in HTML 3.2): https://datatracker.ietf.org/doc/html/rfc1866#section-5.5.2.1 https://datatracker.ietf.org/doc/html/rfc1866#section-5.5.2....
- dmsnell 2y agoFun fact: this is very close but slightly inaccurate. I used to think this is how it worked before scrutinizing a rule in the HTML tree-building specification. The tag leads the parser to interpret everything following it as character data, but doesn’t impact rendering. In these cases, if there are active formatting elements that would normally be reconstructed, they will after the PLAINTEXT tag as well. It’s quite unexpected. <a href="https://news.ycombinator.com"><b><i><u><s><plaintext>hi In this example “hi” will render with every one of the preceding formats applied. https://software.hixie.ch/utilities/js/live-dom-viewer/?%3Ca%20href%3D%22https%3A%2F%2Fnews.ycombinator.com%22%3E%3Cb%3E%3Ci%3E%3Cu%3E%3Cs%3E%3Cplaintext%3Ehi https://software.hixie.ch/utilities/js/live-dom-viewer/?%3Ca... After I discovered this the note in the spec was updated to make it clearer. https://html.spec.whatwg.org/multipage/parsing.html#:~:text=A start tag whose tag name is "plaintext"
- monroewalker 2y agoIt’d be cool to have a gutter on the left with the html tag that appears for that line
- assimpleaspossi 2y agoDon't know which tag you are talking about but gutters are CSS, not HTML. If you want a gutter, add one with CSS.
- jy14898 2y agoThey're talking about the post itself and its structure
- soheil 2y agoAbsolutely mind-boggling I didn't know progress and meter existed, I supposed progress has been made. <progress value="70" onmousemove="value=Math.random()*100" max="100"/>
- eduramirezh 2y agoCool! I got some "House of Leaves" vibes from it.