[HN Gopher] Every HTML Element
___________________________________________________________________
Every HTML Element
Author : wxw
Score : 145 points
Date : 2025-01-25 19:02 UTC (3 hours ago)
(HTM) web link (iamwillwang.com)
(TXT) w3m dump (iamwillwang.com)
| XCSme wrote:
| Weird that the URL links to the bottom of the page(?).
| wxw wrote:
| Sorry bout that, fixed! It was scrolling to the <iframe>.
| amphitheatre wrote:
| On 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 wrote:
| I'm on PC (Brave) and I experienced the same thing.
| wxw wrote:
| Thanks for the heads up! Misconfigured the source in <iframe>.
| Interesting behavior.
| mg wrote:
| I 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
|
| 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 wrote:
| I 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 wrote:
| for 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 wrote:
| This is very good: https://meiert.com/en/indices/html-elements/
| TZubiri wrote:
| Except this custom one I just invented that I implement in my
| custom browser
| byearthithatius wrote:
| Too bad OP is not omniscient and capable of predicting your
| made up tags
| ruined wrote:
| ive been demaking html elements by removing them from my custom
| browser so it evens out
| bbx wrote:
| Relevant: https://htmlreference.io/
| alentred wrote:
| Wait. No <script> element? An elephant went missing!
| matchamatcha wrote:
| Look at the source.
| eieio wrote:
| I 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-
| ht...
|
| [2] HN discussion: https://news.ycombinator.com/item?id=37104742
| robby1066 wrote:
| First 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 wrote:
| PicoCSS uses them well, as an example:
| https://picocss.com/docs/typography#heading-group
| adzm wrote:
| hgroup is considered deprecated in HTML5 though, whatever that
| actually means.
| sillysaurusx wrote:
| It means if you use it then it'll work fine but younger
| people will frown at you.
| fsckboy wrote:
| unlike 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.
| 9dev wrote:
| I _absolutely_ need to write a polyfill for that.
| hellcow wrote:
| Is it? I don't see any such warning or notice on
| https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/hg.... It's still listed here:
| https://www.w3.org/TR/2011/WD-
| html5-20110405/sections.html#t....
|
| Perhaps it was re-added?
| adzm wrote:
| Hmmm you are right! This discussion explains that a bit
| https://stackoverflow.com/questions/15808330/hgroup-
| element-... looks like it was going to be removed, but
| WHATWG ended up keeping it.
| alwillis wrote:
| > hgroup is considered deprecated in HTML5 though, whatever
| that actually means.
|
| It was only deprecated in the W3C specification, not the
| WHATWG specification.
|
| But now it's back in good standing:
| https://www.tpgi.com/subheadings-subtitles-alternative-
| title...
| alwillis wrote:
| > First I've ever heard of hgroup.
|
| <hgroup> was officially added to the HTML spec in 2018 [1]
|
| It was deprecated in the W3C spec but not from the WHATWG spec,
| before they were merged.
|
| [1]: https://html.spec.whatwg.org/#the-hgroup-element
| joshdavham wrote:
| I like that you included the <ruby> tag! I really wish more pages
| would use them when rendering Chinese/Japanese characters in
| English text.
| fsckboy wrote:
| (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/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._
| joe8756438 wrote:
| no marquee? c'mon
| hinkley wrote:
| It's a prank bro!
| ewrong wrote:
| Blink
| cookie_monsta wrote:
| They are both there, in the table at the bottom
| pastureofplenty wrote:
| I know it's deprecated but I was expecting to see <xmp>.
| mwcz wrote:
| It was so fun tossing that opening tag into a forum post and
| watching the whole forum disintegrate.
| Isognoviastoma wrote:
| It's impressing that browser can display many levels of recursive
| iframe.
| queueueue wrote:
| I've counted 18! The next one was blank.
| Theodores wrote:
| Most 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 wrote:
| do you have an example?
| Theodores wrote:
| Not 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.
| hellcow wrote:
| This is a great approach. Just to add to it, you can also use
| custom elements in lieu of classes, such as:
|
| <my-product>...</my-product>
|
| Any tag with a hyphen is considered a custom element, which is
| completely valid HTML -- even without defining the element in
| JS.
|
| This gives you a more descriptive `div`, and then instead of
| classes like `product-primary`, you can use semantic
| attributes, like `<my-product primary size="large">`. In
| combination with CSS nesting, you can get some great looking
| HTML and CSS with minimal markup/visual noise and no build
| step.
| kayvulpe wrote:
| An index would be great
| fsckboy wrote:
| what 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/
| benwills wrote:
| For 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-
| layou... [2] https://webparsing.io/data/commoncrawl-2024-11-html-
| tags-att...
| bornfreddy wrote:
| No <details> / <summary>? [0]
|
| [0] https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/de...
| adzm wrote:
| It's at the bottom by the dialog!
| 1LCode wrote:
| I think there was at the bottom of the form? No? In the "click
| here" part.
| hmmokidk wrote:
| As a browser game enthusiast I will have you tried for missing
| canvas
| 3willows wrote:
| Lols you are offering to sell this for $1?
| https://iamwillwang.com/dollar/
| divbzero wrote:
| Disappointed 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.
| hn_acker wrote:
| The <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.
| divbzero wrote:
| Where is the good old... <center>alignment with
| no CSS</center>
___________________________________________________________________
(page generated 2025-01-25 23:00 UTC)