A Blog Post with Every HTML Element
> Some of deprecated elements won’t render without some extra work, for example <frame> and <frameset> are designed to be used instead of a <body>, for I guess some kind of collage web page made up of other pages.
The author is too young to remember frames, huh? :) I'd just link the Wikipedia article ( https://en.wikipedia.org/wiki/Frame_(World_Wide_Web) ), but I feel like it doesn't explain it very well.
So, to briefly explain -- in the early web (OK, not the really early web, but once it got popular) frames were very common. They were commonly used for menus/sidebars, as well as things like headers that were meant to stay visible. So perhaps a page would have three frames -- a frame up top with a persistent header, one on the left with a sidebar, and then one main frame with the content.
Each frame acted fairly independently, with e.g. its own back/forward history (a link in a frame would by default only affect that frame, although you could have links in one frame open in another, useful for implementing a sidebar). This meant using back/forward/reload/etc with frames could be pretty troublesome and unintuitive. If you somehow got a page into a messed-up state where the wrong thing was loaded in one frame, it could be hard to get out of this state other than by navigating to the page from the start. Or it could be troublesome if you accidentally loaded just the content page without the framing page it was supposed to be a part of.
CSS got rid of most of the use case for frames, which is good, because frames were a real pain to deal with as a user!
This comes up briefly but I do still find it ridiculous that there's no simple standard CSS declaration to hide something from visible display but keep it for screenreaders.
Everything I've seen still does clip, or positions the content off the side of the page, or something like that. How is this not just an alternative "display" value, or an additional property?
There's been a "speak" property floating around in one of those theoretical CSS modules that would accomplish this but as far as I know it has zero uptake among implementers.
Regarding the <menu> element, which the OP mentions their confusion about as:
> I was initially surprised that it survived to HTML 5 (while <menuitem> didn’t) because modern browsers treat it as essentially a <ul>. Researching further on Wikipedia I read: "MENU existed in HTML Tags, and was standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict; then redefined in HTML5, but removed in HTML 5.2," and now I don’t know what to think.
HTML 5.2 was retired by W3C in 2021 in favour of the WhatWG HTML Living Standard, which (unlike HTML 5.2) never deprecated <menu>, and has been redefined as representing "a toolbar consisting of its contents, in the form of an unordered list of items (represented by li elements), each of which represents a command that the user can perform or activate.".
Wikipedia's list of elements seems to be out of date here — along with a lot of the Wikipedia information on HTML versions — as the <menu> element is still alive. Given its history of being repeatedly deprecated, and the fact that event recently browsers were confused by exactly what semantics to assign to <menu>, you are probably nearly always better off using <ul> with an appropriate ARIA role attribute (toolbar, menu, or menubar).
Most of these aren't widely used because they were quaint attempts at solving problems that no longer exist, could be better solved with CSS (as the author concedes with <small>), and very much depend on browser implementation.
I was excited when <details> and <summary> landed in all evergreen browsers for example, but just to get the content to slide open (guiding the user) instead of pop open requires JS (the best implementations I've seen use WAAPI), Safari adds a proprietary pseudo element, etc.
You can nest details/summary tags. I once created a choose-your-own adventure using it and posting it on our corporate intranet (I had a generator script to stitch things together. The actual text was only a few pages long.) The HTML was 5mb ... I broke a lot of browsers that day. It had to be deleted.
This reminded me of when when I first learned HTML in around 1995… anybody else remember Kevin Werbach’s Barebones Guide to HTML?
It was basically a site that listed all the HTML tags and what they did.
That plus a text editor and early version of Netscape Navigator was all you needed, and you were off to the races to learn and experiment!
I was trying to make a web browsing ai agent a few days ago and I was shocked to find that hacker news comments are implemented as table inside table inside table.
Semantic HTML has excellent potential. I personally like the style where footnotes for running text are placed in the right-side margin, in a smaller and/or semi-greyed font, and maybe with details/summary expanders.
But every implementation of styles like this seem to require some sort of detailed knowledge of CSS to wrangle it into working order.
First, this is a fantastic way to learn, such a great exercise!
It's also fun to see the author ponder some of the older and now unused elements, speculating on their use, when "back in the day" they were thrilling to suddenly have access to.
That said, handcrafting HTML through every rev since Mosaic, I don't like MDN because of retcon changes like "description list". I prefer original spec, "definition list".
To me dl, dt, dd, makes more sense to think of as "definition list", with defined terms, and defined definitions.
OK, description is broader than definition, but for me, definition is easier to remember the list (dl) has terms (dt) and definitions (dd).
And W3 calls it "definition list":
Has anyone ever encountered a real world scenario where you reached <h6>?
How fortunate, I was looking for something like this today for a side project. HTML can do so much already, I'd rather lean into it than use one of the bloated frameworks/libraries out there.
Really helpful to see it all in one place!
The article is interesting, but I often come across resources that talk about or reference the HTML5 specification by the W3C. Since 2019, HTML has become a living standard (and therefore no longer has a version number). It is available through Whatwg here: https://html.spec.whatwg.org/multipage/
It's so cool how much stuff you can get done with just stock HTML.
It's got <marquee> I'm happy.
Awesome article. Like the author, I'm also confused about when to use b and strong & i and em.
Bing back <blink>!
undefined
[dead]
[flagged]