Cool HTML elements nobody uses
tapajyoti-bose.medium.com
tapajyoti-bose.medium.com
I'd like to add <input type="image" src="…"> which acts like an img tag and submit button that submits the clicked X and Y essentially as two separate inputs
Here's an MDN example showing X and Y position in GET string on click.
- https://mdn.github.io/learning-area/html/forms/image-type-ex...
As painful as IE6 and IE7 were in the late 2000s/early 2010s, they were surprisingly polyfillable (at a speed cost).
I think I published the last version of my personal website that I made with an image map in 2004 or so. I've been trying to think of a good use for one over the last couple years but haven't come up with anything yet.
The last really cool image map-based website I remember was Margot's Room by Emily Carroll [1]. Dunno if she coded it, but it's her comic.
the outcome wasn't planned, it just happened - but it was so funny i still have to laugh all those years later.
d₁ = 3, d₂ = 5
What happens at t = 15?
https://www.spacejam.com/1996/cmp/souvenirs/souvenirsframes....
Half of it was outputted by dreamweaver 3.0 but it needed a lot of manual touch up.
1. meter/progress - default style looks dated, styling works different on different browsers, the color scale options are confusing
2. sup/sub & 7. abbr - these are only useful for page content (as opposed to site design), which is usually WYSIWYG or something like Markdown. Many editors/parsers don't support it, at least by default.
4. map/area - it's absolute positioning, which is unusable for the variety of devices we use today
5. detail/summary - it's also more content than design and has basically no support in content editors, but it has been growing in popularity in things like GitHub READMEs where only basic markup is allowed.
6. object - hard to know what filetypes will be supported and little feedback when they aren't. It usually safer to either include a JS reader with your site or just download the file.
Also applies to progress, for which you need to use obscure browser-specific CSS rules.
The original use-case would have been something like: imagine you code a game physics engine in Java, and deploy it as a Java applet. You can embed that physics engine into a page as an <object> — and then consume it as a local API using JavaScript embedded on the same page.
(And yes, this is almost certainly the real reason JavaScript is called "JavaScript." When it was created, it was precisely positioned as a glue language for consuming/driving Java-applet APIs!)
Java-applet-based APIs (and their Windows-proprietary ActiveX cousins) are dead, so there's no real reason to care about <object> any more. As long as the browser knows how to render the media if you navigate directly to its URL, you can just use an <iframe>.
It's not needed anymore for audio or video — they have their own tags now — and plugins are dead.
also, CSS Flex
You don't (and didn't) need PHP for server-side includes. Apache has had them forever. A lot of cheap hosting is LAMP stack, so has PHP available, but you don't need to use it to get SSI.
Mind you, I'm talking about cheapest hosting possible, where 20 MB was a "step up" option.
SSI was commonly enabled on university web servers IIRC, but not commercial hosts.
This was a significant dissuader, especially when you consider how you can’t transition the height (very often desirable) without added JavaScript. So <details> has really only been seeing much use in the last few years.
(The minimum possible polyfill is just under 750 bytes, supporting IE9+/Edge, requiring <summary> to be provided, and disallowing text children of <details>. The typical polyfill was more like 2–3KB.)
meter/progress can be styled consistently, but it's tricky because of the browser inconsistencies you mention. it took a lot of playing around with weird vendor-prefixed pseudos to get these looking similar across platforms.
sub/sub/abbr just need to be normalized first - normalize.css is a good reference for this. abbr can be useful for providing short "aside" info on a word/phrase in a semantic way.
styling detail/summary is relatively easy and they're pretty useful for FAQs and the like. i see web designers experimenting with more and more these days.
map/area, i don't use, but have seen it used on experimental designs to neat effect. and object is as you said, hard to predict for styling.
ps - it looks like chrome (105) will finally support mathML along with firefox and safari, so perhaps that will impact sub/sup usage in the future.
Browser defaults for all HTML elements look "dated". The visual appearance of meter, as with all elements, is adjusted via CSS.
> . map/area - it's absolute positioning, which is unusable for the variety of devices we use today
It's relative to the image dimensions, not the page/viewport.
Easier now that plugins are dead and <object> is basically equivalent to <iframe>
<wbr/>
It works like a line break, but it only kicks in if the word needs to be broken. Very useful for email/URL formatting on mobile (along with ­).There are similar but more obscure considerations with the difference between <br> and a textual carriage return preserved by `white-space: pre`. Take the document data:text/html,<pre>a%0Ab<br>c</pre> (containing one carriage return and one manual line break), and document.body.textContent is "a\nbc" (the <br> disappears), while document.body.innerText is "a\nb\nc" (<br> becomes \n). As for removing the line breaks from what goes on the clipboard (which is desirable if you’re choosing visually-optimal break points manually), well, that’s unreliable. I’ve only ever tried it on Firefox, but tricks like `user-select: none` on a line break of either kind don’t work, netting you two line breaks for some reason; wrapping each line in something like <span style="display:block"> can work.
So `<math><![CDATA[x<y]]></math>` will print x<7, but `<p><![CDATA[x<y]]></p>` will emit a `cdata-in-html-content` parse error (your compliant HTML parser is allowed to give up here if it's lazy) and is parsed as `<p><!--[CDATA[x<y]]--></p>` (your HTML parser will actually do this because giving up leads to poor user experience when no one else does)
Aside: plaintext is one reason browser DOM is a superset of HTML. By which I mean you can add <plaintext> to the middle of your DOM through JavaScript and everything is hunky-dory, but it's impossible to serialize the DOM to HTML so it'll HTML-parse back to the same DOM (at least if the serializer doesn't produce any JavaScript).
So I automatically converts all m<sup>2</sup> and similar into the unicode symbols: https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...
Nice in theory, but only works for trivial cases. Most old-school use of <sup> is as a quick-and-dirty pre-MathML way of rendering equations as (accessible) text in browsers. (The people who didn't care about accessibility rendered TeX to an image and embedded it.)
normalize.css fixed this problem by setting the line-height to 0 and using position relative.
https://github.com/necolas/normalize.css/blob/master/normali...
The W3C recommends to prefer the markup versions, and various years the Unicode committee has also suggested not to use the Unicode versions except in backwards compatibility with old ISO codes and in certain semantically more meaningful situations as "single words" (chemistry formulas more so than math, for instance). Though the Unicode recommendations have waffled back and forth over the years. Both have recommended it in part because of metadata available to screen-readers for accessibility.
Not that you always have to follow such recommendations from groups such as these, just that it is useful to know what the recommendations are. Also as others pointed out, some CSS stylesheets are better than others at line-height of sub/sup markup and while the default styles are kind of awful, it is useful to know there are CSS options.
https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...
My experience is that superscripts/subscripts are normally on a different line to numerators/denominators. A couple of very simple examples to test this: ¹½₂ ({superscript one}{vulgar fraction one half}{subscript two}), ²2⁄1₁ ({superscript two}{digit two}{fraction slash}{digit one}{subscript one}).
[1]: https://chriswarrick.com/blog/2020/02/09/when-html-is-not-en... (disclaimer: my blog post, from 2 years ago, although most of the issues apply today) [2]: https://bugs.chromium.org/p/chromium/issues/detail?id=949555
These take me back, but I'm trying to remember why I stopped using them. Did they go out of fashion? Or was it accessibility related?
But their limitations were massive. Chiefly, in a period when dialup internet was becoming more common, an image map meant that before a user could interact with your website, they had to wait for a very slow download of a very large image that contained mostly text. You couldn't interact with them any more - no ability to select the text in them, or perhaps the reader had a different color/font preference? Tough luck.
When tables came out, they began to face competition, but they weren't defeated. Aside from table-first designs that mixed images and text, you could mostly do without imagemaps by cutting the image up, eliminating table borders/cellpadding/cellspacing and making careful use of colspan and rowspan, with a part of the image in each cell. This had most of the same user-side problems as imagemaps, but was easier for many people to maintain (I'm not sure quite why: I assume some people have trouble with thinking in terms of x/y coordinates and regions).
CSS thoroughly destroyed them. Everything an image map could do, tables+CSS and eventually CSS could do better. This was still ages before responsive became a concern, at a time when webpage maintainers would assume you used an 800x600 or 1024x768 screen with a maximized window and just ignore everyone who didn't match that.
Nowadays, any time an image map might look like the solution, the actual solution is SVG, which gives you everything an image map had but is moreover correct.
Back then we also had the lowsrc attribute for images, so that large image should have been preceded by a much smaller 1-bit version.
The era of imagemaps was one where they were raster images at a fixed size, and when CSS wasn’t particularly good for interesting positioning and layout. Once you acknowledge viewports are extremely variable in size, there’s very little place left for imagemaps, and so people stopped making the kinds of designs that could benefit from it; and once you had alpha channels and better CSS and cross-platform vector graphics, there was even less place for traditional client-side imagemaps.
(As for server-side imagemaps, ismap, no one ever really used them. A few years ago I deliberately used them in order to just barely support JavaScript-free operation on a toy just for the sake of it, but they’re very much a solution looking for a problem these days.)
I haven’t used an actual client-side imagemap for years; what I have done is used SVG as a form of better imagemap, not least because you can actually target the areas with styles. The imagemap in the article is approximately equal to this:
<svg viewBox="0 0 400 379" width="400" height="379" fill="none">
<image href="workplace.jpg" width="400" height="379"><desc>Workplace</desc></image>
<a href="computer.html">
<title>Computer</title>
<rect x="34" y="34" width="270" height="350"/>
</a>
<a href="phone.html">
<title>Phone</title>
<rect x="290" y="172" width="333" height="250"/>
</a>
<a href="coffee.html">
<title>Cup of coffee</title>
<circle cx="337" cy="300" r="44"/>
</a>
</svg>
But just think, now you can add rules like `a:hover { stroke: blue; stroke-width: 2px; } a:focus { fill: lime }` (maybe with some filter or mix-blend-mode).It kind of drives me nuts that it doesn't work the same way as the select element, when you are using option elements as a list.
> […] followed by either zero or more tbody elements or one or more tr elements […]
— https://html.spec.whatwg.org/multipage/tables.html#the-table..., the table element, content model.
Sure, the HTML syntax will imply it (and https://html.spec.whatwg.org/multipage/syntax.html#element-r... mentions this, how in HTML syntax `table > tr` is invalid), but this means that in XML syntax <table><tr><td/></tr></table> is actually valid.
I believe XHTML compatibility is the reason for this. But I have no real idea quite why XHTML 1.0 decided to allow (tbody+|tr+) (basically a mixture of HTML 3.2 and HTML 4) rather than tbody+ like HTML 4.
Basically let your users generate rsa keys so you could use mutual tls (i.e. client side certificates) instead of passwords.
map and area was how I was taught to write websites like 20 years ago (whew!).
Thanks a lot for meter and progress, though! I didn't knew about those, they will def. save me a lot of time in the future (I always end up implemented my own progres bar and it's a PITA).
MAP/AREA in particular was extensively used before table-based layouts. It was only once tables were added to HTML that individual images could be arranged into one large seamless-looking image while each piece was surrounded by its own anchor. Before that point, using MAP/AREA was a developer’s only option.
SUP and SUB I find don't work very well with glyphs, but work fine with standard Latin characters.
=> "7 Cool HTML Elements [the author] Never Uses"
for image divs that websites keep using JS for.
Functionality's gone, it seems. Evidently it's hard to replicate all of it because none of the options I could find managed it.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
I just know that when I went to try to make a marquee using some of these features a couple years ago, I couldn't find anything pre-made that could do what I wanted, which was nothing more than what <marquee> could do, so it was going to be a lot of custom work. Which surprised me, I expected someone to have perfectly re-created the whole tag just for giggles if nothing else. There were tons of partial solutions, but nothing that was a complete replacement.