8 ms·

Cool HTML elements nobody uses

257 points by nateb2022 4y ago

meigwilym 4y ago
> 4. map & area 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?
- jiggywiggy 4y ago
  Responsive reasons. Hardly ever can you do full absolute positioning.
  - parminya 4y ago
    I think they died well before responsive became a concern. Their heyday was really the time before not just CSS but even tables, at which time they were the only way to have links positioned in space rather than in flowing text. I don't think anyone liked imagemaps - it's just that there was no alternative. 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.
    - perilunar 4y ago
      > 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 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.
- superkuh 4y ago
  I think they went out of style because they weren't javascript. But many older websites still use them to create fast loading, universally supported, interactive data visualizations that JS would still struggle to match. One of my favorites is the dynamic space weather visualization from Lockheed Martin Solar and Astrophysics Laboratory, https://www.lmsal.com/solarsoft/latest_events/ https://www.lmsal.com/solarsoft/latest_events/
  - RedShift1 4y ago
    What's interactive about that example?
    - the_third_wave 4y ago
      It'll load detailed pages based on the location of the image you click. It might not be interactive in the modern CSS-animated way but it does provide interaction with what would otherwise be a static image.
    - superkuh 4y ago
      I said dynamic, not interactive. The image and the image map are updated every few minutes. Within the image map there are links to external space weather resources you can click. These are updated in real time as they become available. The image is dynamic with time as are the links to the resources within and they're all displayed in a single unified time plot that loads instantly and displays on everything back to the 90s.
- Brajeshwar 4y ago
  I think because it was hard to write it manually unless you use something like Ultradev/Dreamweaver.
  - otherme123 4y ago
    I remember wasting a lot of time making one fancy map, only to have people complaining about "where is the link to...?"
- irrational 4y ago
  Same. I remember using this feature extensively way back when. But I can’t remember when I stopped using it and what replaced it. Hmm, now that I think about it, this was in the days before we started using Flash. But after the Flash era we didn’t go back to using map.
- Agentlien 4y ago
  I was thinking of this just a few weeks ago! When I made my first webpage in school (about 20 years ago) I used a sitemap made out of an image with map. I was thinking back to it and wondering whatever happened to that element.
- vehemenz 4y ago
  You can still use them, but you need JavaScript calculations to make sure the map still works when the image shrinks. Not a big deal to be honest.
- chrismorgan 4y ago
  They’re not actually that useful in practice. 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).
- Minor49er 4y ago
  They are still in use on Bandcamp for navigation in custom headers
donatj 4y ago
I am old enough to remember development when image maps were still common for things like headers and big hero homepage navigation images. 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-example/xy-coordinates-example.html https://mdn.github.io/learning-area/html/forms/image-type-ex...
- sebazzz 4y ago
  Trip down memory lane: Internet Explorer didn’t quite interpret the standard correctly and sent the coordinates as floating point numbers. If you had this input[type=image] on a ASP.NET WebForms page, this then caused ASP.NET WebForms to crash, as it tried to interpret the postback arguments of the X/Y coordinates as integers. I think this was later fixed by patching Internet Explorer.
  - dylan604 4y ago
    Trip down memory lane: Internet Explorer didn’t quite interpret the standard correctly. Full stop. Anything said after this is just using words for vanity ;-)
    - yakshaving_jgt 4y ago
      This was a fun one: https://jezenthomas.com/you-think-css-in-js-is-bad/ https://jezenthomas.com/you-think-css-in-js-is-bad/
      - ttfkam 4y ago
        Ah, CSS expressions. So many memories of making IE6/7 polyfills in 2011. Without CSS expressions and behaviors, wonderful tools like CSS3PIE would never have been possible. https://github.com/lojjic/PIE https://github.com/lojjic/PIE As painful as IE6 and IE7 were in the late 2000s/early 2010s, they were surprisingly polyfillable (at a speed cost).
poiuyytrewq 4y ago
"7 Cool HTML Elements Nobody Uses" => "7 Cool HTML Elements [the author] Never Uses"
- commandlinefan 4y ago
  Actually most of these are things that people used to use in the 90's, but stopped using because they didn't give you as much control as you needed.
koala_man 4y ago
I didn't know about datalist, but now I'll start using it. I've been annoyed at the multitude of completion implementations that all behave slightly differently.
- swyx 4y ago
  i think the problem with datalist is the default styles, and the lack of customizability (eg if you want multiple slections, or to display descriptions or images next to each choice, or you want fuzzy matching). most of the time you'll just want to go ahead and import a ComboBox component someone else has made
  - timw4mail 4y ago
    The problem is more the inconsistent behavior. Styling is also a concern, but why doesn't the Option element behave the same in a datalist as in a select? (I think only Firefox actually does this properly).
- timw4mail 4y ago
  Yeah, it's really odd. Some browsers will only show the value, some will show the label and the value, and some will (properly) show the label when you have both a label and a value. 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.
dynm 4y ago
It's treated as an obvious thing in this document, but I was surprised to learn about the <var> tag for mathematical expressions: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var https://developer.mozilla.org/en-US/docs/Web/HTML/Element/va...
keeganjw 4y ago
I was literally just thinking about how to embed a PDF in a webpage yesterday! Thanks for the info! Probably going to start using most of these.
vehemenz 4y ago
Here's one very few people know: <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 ).
- chrismorgan 4y ago
  A subtlety to point out about <wbr> when comparing it to its textual alternative ZWSP (U+200B ZERO WIDTH SPACE): if someone copies the text (as text—if it’s copied as formatted HTML, anything could happen), ZWSP will remain, whereas <wbr> will disappear. You could exclude the ZWSP with something like `user-select: none`. So really, <wbr> is kinda like <word-break-opportunity style="user-select:none"></word-break-opportunity>. My experience is that <wbr> is almost always what you want rather than ZWSP. 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.
franga2000 4y ago
Having used all of these in the past, here's why this is the case: 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.
- sebazzz 4y ago
  The problem with detail/summary is that in some browsers that element is hard to style correctly and always turns out to be so limited that you ask yourself why you don’t fully develop this functionality manually and put some aria attributes on it for good WCAG2.1 measure. Also applies to progress, for which you need to use obscure browser-specific CSS rules.
- statico 4y ago
  For some reason <object> makes me anxious. Is there some memory of the Flash/ActionScript days, or maybe ActiveX or something, that causes me to frown at seeing a mention of <object>?
  - derefr 4y ago
    <object> is supposed to be for exposing modules from hosted runtimes into the host execution-context as, well, objects (in the OOP sense. Or the COM sense, I suppose.) 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>.
eimrine 4y ago
<marquee>
- dagurp 4y ago
  This and <blink> were so overused that browsers started to show them without any animation
  - dunham 4y ago
    Decades ago, I disabled blink by loading my netscape binary into emacs and changing the tag name. Surprisingly marquee is still there, you can even go into the DOM and rename your top level elements "marquee" and the entire page scrolls.
    - sli 4y ago
      Just did that to HN's <center>. Got a good chuckle out of it, thanks.
      - theandrewbailey 4y ago
        I did that (via browser inspector), then wanted to upvote you. It was very hard. Eventually got it!
  - yamtaddle 4y ago
    A couple years ago I went looking for JS marquee replacements and zero of them I could find would deliver the same functionality as <marquee> Functionality's gone, it seems. Evidently it's hard to replicate all of it because none of the options I could find managed it.
    - stonogo 4y ago
      You don't need javascript to replace marquee tags. There are a plethora of implementations using CSS animation.
francisofascii 4y ago
You can add these to your list of esoteric tech questions to ask during interviews. /s
croes 4y ago
sub doesn't seem to work in Android Chrome
nashashmi 4y ago
+ Marquee for image divs that websites keep using JS for.
- nashashmi 4y ago
  https://codepen.io/hanihsdd/pen/KKaQxdX https://codepen.io/hanihsdd/pen/KKaQxdX
silvestrov 4y ago
<sup> and <sub> has the problem that they change the line height. So if you have an paragraph and one line contains "Nice ground with 42 m² grass" then that line is taller than all the other lines, which makes it rather ugly. So I automatically converts all m<sup>2</sup> and similar into the unicode symbols: https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts#Superscripts_and_subscripts_block https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...
- derefr 4y ago
  > So I automatically converts all m<sup>2</sup> and similar into the unicode symbols 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.)
- flanbiscuit 4y ago
  > <sup> and <sub> has the problem that they change the line height. So if you have an paragraph and one line contains "Nice ground with 42 m² grass" then that line is taller than all the other lines, which makes it rather ugly. normalize.css fixed this problem by setting the line-height to 0 and using position relative. https://github.com/necolas/normalize.css/blob/master/normalize.css#L125 https://github.com/necolas/normalize.css/blob/master/normali...
- WorldMaker 4y ago
  Though it useful to point out that the Unicode superscripts and subscripts were also originally intended to be ascenders/descenders (which in the strictest sense would also affect line height) are as represented in most fonts instead as roughly "numerator/denominator" numbers instead of "proper" superscripts and subscripts. 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_superscripts https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...
nayuki 4y ago
My favorite obscure useful HTML elements: <var>, <wbr>, <time>, <dl>/<dt>/<dd>, <thead>/<tbody>/<tfoot>/<th>.
- parminya 4y ago
  I don't think tbody is really obscure to anyone writing with DOM. You can't embed a tr into a table: it has to be in a thead/tbody/tfoot. If you're writing HTML it's fine, the browser does it for you. But if you're writing DOM (directly or indirectly with e.g. React) you need to use the tbody tag or else it won't do you what you wanted.
  - chrismorgan 4y ago
    Fun fact: `table > tr` is actually valid HTML. > […] followed by either zero or more tbody elements or one or more tr elements […] — https://html.spec.whatwg.org/multipage/tables.html#the-table-element 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-restrictions 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.
fowlie 4y ago
<marquee>remember this tag?</marquee>
- solarkraft 4y ago
  <center><blink>hello!</blink></center>
spdustin 4y ago
My favorite (non-conforming, do-not-use) element is <xmp>. It switches the browser's parsing context to "generic raw text"; it emits any "child" markup as-is, without parsing it. [0] https://jsfiddle.net/spdustin/y4m3qd71/1/ https://jsfiddle.net/spdustin/y4m3qd71/1/
- derefr 4y ago
  I believe you can also just write <![CDATA[whatever]]>. (See https://stackoverflow.com/questions/3302648/should-i-use-cdata-in-html5 https://stackoverflow.com/questions/3302648/should-i-use-cda...). It's normally only used to wrap non-HTML content inside <style> and <script>; but you could put "HTML that should be rendered as text" in there as well!
  - missblit 4y ago
    Note that CData can _only_ be used what HTML calls foreign content. 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></p>` (your HTML parser will actually do this because giving up leads to poor user experience when no one else does)
- missblit 4y ago
  <plaintext> is also fun. Unlike <xmp> you can't get out of it with a closing tag. 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).
  - eurasiantiger 4y ago
    Certainly it is possible. Try document.documentElement.outerHTML. Why would it be impossible?
chazeon 4y ago
In terms of <sub> and <sup>, I have to rely on them to write equations in Markdown on GitHub due to its buggy MathJax implementation (or previously, lack thereof).
rekabis 4y ago
SUB/SUP, MAP/AREA, and ABBR have all been in frequent use since the beginning. 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.
math0ne 4y ago
Abbreviations seems actually useful!
rekado 4y ago
`details`/`summary` and `progress` have decent default styles in picocss. I was under the impression that these elements were used much more often in "modern" HTML than, for example, `map`/`area` or `object` (yuck!).
deleted 4y ago
[deleted]
moralestapia 4y ago
sup and sub are quite common, I think. 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).
ironmagma 4y ago
I spent hours and hours playing with <MARQUEE />, had lots of fun putting a marquee within a marquee. Sad that there's no mention of it.
exabrial 4y ago
`<blink>` tag!
Kwpolska 4y ago
<datalist> might sound like a good idea, but it tends to be inconsistent between browsers [1]. It also doesn’t work on Firefox on Android (both Focus and standard). It was also broken in web views on Android for 1.5 years [2]. [1]: https://chriswarrick.com/blog/2020/02/09/when-html-is-not-enough-a-tale-of-the-datalist-element/ 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 https://bugs.chromium.org/p/chromium/issues/detail?id=949555
sbf501 4y ago
MAP and AREA have been around since the 90's, but METER/PROGRESS? I never noticed those sneak into HTML. I've been using Bootstrap for ages. Cool. SUP and SUB I find don't work very well with glyphs, but work fine with standard Latin characters.
AlbinoDaffy 4y ago
Oh hey I know the 4th one! I use <details> and <summary> all the time for gitlab tag comments and releases!
mattlondon 4y ago
1997 called, they want their cool elements back.
- Sohcahtoa82 4y ago
  Yeah, why use simple HTML elements when you can use a few thousand lines of JavaScript instead?
bawolff 4y ago
The one im sad never caught on was (the now removed from spec) <keygen> Basically let your users generate rsa keys so you could use mutual tls (i.e. client side certificates) instead of passwords.
somat 4y ago
I have this unhealthy aversion to javascript. so when I make a web application it is in a very late 90's style. For my latest thing, I needed to select points on an image and did I do the sane thing and write two lines of javascript and be done with it, of course not, I went with server side image maps. in 2022. sigh, no, I don't know what is wrong with me either. https://www.w3schools.com/Tags/att_img_ismap.asp https://www.w3schools.com/Tags/att_img_ismap.asp
mNovak 4y ago
There's a certain irony to me that this discussion of cool html elements is all embedded as images
nicbou 4y ago
<details> is great, but somewhat difficult to style.

257 points by nateb2022 4y ago

> 4. map & area 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?

jiggywiggy 4y ago
Responsive reasons. Hardly ever can you do full absolute positioning.
- parminya 4y ago
  I think they died well before responsive became a concern. Their heyday was really the time before not just CSS but even tables, at which time they were the only way to have links positioned in space rather than in flowing text. I don't think anyone liked imagemaps - it's just that there was no alternative. 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.
  - perilunar 4y ago
    > 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 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.
superkuh 4y ago
I think they went out of style because they weren't javascript. But many older websites still use them to create fast loading, universally supported, interactive data visualizations that JS would still struggle to match. One of my favorites is the dynamic space weather visualization from Lockheed Martin Solar and Astrophysics Laboratory, https://www.lmsal.com/solarsoft/latest_events/ https://www.lmsal.com/solarsoft/latest_events/
- RedShift1 4y ago
  What's interactive about that example?
  - the_third_wave 4y ago
    It'll load detailed pages based on the location of the image you click. It might not be interactive in the modern CSS-animated way but it does provide interaction with what would otherwise be a static image.
  - superkuh 4y ago
    I said dynamic, not interactive. The image and the image map are updated every few minutes. Within the image map there are links to external space weather resources you can click. These are updated in real time as they become available. The image is dynamic with time as are the links to the resources within and they're all displayed in a single unified time plot that loads instantly and displays on everything back to the 90s.
Brajeshwar 4y ago
I think because it was hard to write it manually unless you use something like Ultradev/Dreamweaver.
- otherme123 4y ago
  I remember wasting a lot of time making one fancy map, only to have people complaining about "where is the link to...?"
irrational 4y ago
Same. I remember using this feature extensively way back when. But I can’t remember when I stopped using it and what replaced it. Hmm, now that I think about it, this was in the days before we started using Flash. But after the Flash era we didn’t go back to using map.
Agentlien 4y ago
I was thinking of this just a few weeks ago! When I made my first webpage in school (about 20 years ago) I used a sitemap made out of an image with map. I was thinking back to it and wondering whatever happened to that element.
vehemenz 4y ago
You can still use them, but you need JavaScript calculations to make sure the map still works when the image shrinks. Not a big deal to be honest.
chrismorgan 4y ago
They’re not actually that useful in practice. 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).
Minor49er 4y ago
They are still in use on Bandcamp for navigation in custom headers

donatj 4y ago

I am old enough to remember development when image maps were still common for things like headers and big hero homepage navigation images. 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-example/xy-coordinates-example.html https://mdn.github.io/learning-area/html/forms/image-type-ex...

sebazzz 4y ago
Trip down memory lane: Internet Explorer didn’t quite interpret the standard correctly and sent the coordinates as floating point numbers. If you had this input[type=image] on a ASP.NET WebForms page, this then caused ASP.NET WebForms to crash, as it tried to interpret the postback arguments of the X/Y coordinates as integers. I think this was later fixed by patching Internet Explorer.
- dylan604 4y ago
  Trip down memory lane: Internet Explorer didn’t quite interpret the standard correctly. Full stop. Anything said after this is just using words for vanity ;-)
  - yakshaving_jgt 4y ago
    This was a fun one: https://jezenthomas.com/you-think-css-in-js-is-bad/ https://jezenthomas.com/you-think-css-in-js-is-bad/
    - ttfkam 4y ago
      Ah, CSS expressions. So many memories of making IE6/7 polyfills in 2011. Without CSS expressions and behaviors, wonderful tools like CSS3PIE would never have been possible. https://github.com/lojjic/PIE https://github.com/lojjic/PIE As painful as IE6 and IE7 were in the late 2000s/early 2010s, they were surprisingly polyfillable (at a speed cost).

poiuyytrewq 4y ago

"7 Cool HTML Elements Nobody Uses" => "7 Cool HTML Elements [the author] Never Uses"

commandlinefan 4y ago
Actually most of these are things that people used to use in the 90's, but stopped using because they didn't give you as much control as you needed.

koala_man 4y ago

I didn't know about datalist, but now I'll start using it. I've been annoyed at the multitude of completion implementations that all behave slightly differently.

swyx 4y ago
i think the problem with datalist is the default styles, and the lack of customizability (eg if you want multiple slections, or to display descriptions or images next to each choice, or you want fuzzy matching). most of the time you'll just want to go ahead and import a ComboBox component someone else has made
- timw4mail 4y ago
  The problem is more the inconsistent behavior. Styling is also a concern, but why doesn't the Option element behave the same in a datalist as in a select? (I think only Firefox actually does this properly).
timw4mail 4y ago
Yeah, it's really odd. Some browsers will only show the value, some will show the label and the value, and some will (properly) show the label when you have both a label and a value. 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.

dynm 4y ago

It's treated as an obvious thing in this document, but I was surprised to learn about the <var> tag for mathematical expressions: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var https://developer.mozilla.org/en-US/docs/Web/HTML/Element/va...

keeganjw 4y ago

I was literally just thinking about how to embed a PDF in a webpage yesterday! Thanks for the info! Probably going to start using most of these.

vehemenz 4y ago

Here's one very few people know: <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 ).

chrismorgan 4y ago
A subtlety to point out about <wbr> when comparing it to its textual alternative ZWSP (U+200B ZERO WIDTH SPACE): if someone copies the text (as text—if it’s copied as formatted HTML, anything could happen), ZWSP will remain, whereas <wbr> will disappear. You could exclude the ZWSP with something like `user-select: none`. So really, <wbr> is kinda like <word-break-opportunity style="user-select:none"></word-break-opportunity>. My experience is that <wbr> is almost always what you want rather than ZWSP. 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.

franga2000 4y ago

Having used all of these in the past, here's why this is the case: 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.

sebazzz 4y ago
The problem with detail/summary is that in some browsers that element is hard to style correctly and always turns out to be so limited that you ask yourself why you don’t fully develop this functionality manually and put some aria attributes on it for good WCAG2.1 measure. Also applies to progress, for which you need to use obscure browser-specific CSS rules.
statico 4y ago
For some reason <object> makes me anxious. Is there some memory of the Flash/ActionScript days, or maybe ActiveX or something, that causes me to frown at seeing a mention of <object>?
- derefr 4y ago
  <object> is supposed to be for exposing modules from hosted runtimes into the host execution-context as, well, objects (in the OOP sense. Or the COM sense, I suppose.) 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>.

eimrine 4y ago

dagurp 4y ago
This and <blink> were so overused that browsers started to show them without any animation
- dunham 4y ago
  Decades ago, I disabled blink by loading my netscape binary into emacs and changing the tag name. Surprisingly marquee is still there, you can even go into the DOM and rename your top level elements "marquee" and the entire page scrolls.
  - sli 4y ago
    Just did that to HN's <center>. Got a good chuckle out of it, thanks.
    - theandrewbailey 4y ago
      I did that (via browser inspector), then wanted to upvote you. It was very hard. Eventually got it!
- yamtaddle 4y ago
  A couple years ago I went looking for JS marquee replacements and zero of them I could find would deliver the same functionality as <marquee> Functionality's gone, it seems. Evidently it's hard to replicate all of it because none of the options I could find managed it.
  - stonogo 4y ago
    You don't need javascript to replace marquee tags. There are a plethora of implementations using CSS animation.

francisofascii 4y ago

You can add these to your list of esoteric tech questions to ask during interviews. /s

croes 4y ago

sub doesn't seem to work in Android Chrome

nashashmi 4y ago

+ Marquee for image divs that websites keep using JS for.

nashashmi 4y ago
https://codepen.io/hanihsdd/pen/KKaQxdX https://codepen.io/hanihsdd/pen/KKaQxdX

silvestrov 4y ago

<sup> and <sub> has the problem that they change the line height. So if you have an paragraph and one line contains "Nice ground with 42 m² grass" then that line is taller than all the other lines, which makes it rather ugly. So I automatically converts all m<sup>2</sup> and similar into the unicode symbols: https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts#Superscripts_and_subscripts_block https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...

derefr 4y ago
> So I automatically converts all m<sup>2</sup> and similar into the unicode symbols 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.)
flanbiscuit 4y ago
> <sup> and <sub> has the problem that they change the line height. So if you have an paragraph and one line contains "Nice ground with 42 m² grass" then that line is taller than all the other lines, which makes it rather ugly. normalize.css fixed this problem by setting the line-height to 0 and using position relative. https://github.com/necolas/normalize.css/blob/master/normalize.css#L125 https://github.com/necolas/normalize.css/blob/master/normali...
WorldMaker 4y ago
Though it useful to point out that the Unicode superscripts and subscripts were also originally intended to be ascenders/descenders (which in the strictest sense would also affect line height) are as represented in most fonts instead as roughly "numerator/denominator" numbers instead of "proper" superscripts and subscripts. 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_superscripts https://en.wikipedia.org/wiki/Unicode_subscripts_and_supersc...

nayuki 4y ago

My favorite obscure useful HTML elements: <var>, <wbr>, <time>, <dl>/<dt>/<dd>, <thead>/<tbody>/<tfoot>/<th>.

parminya 4y ago
I don't think tbody is really obscure to anyone writing with DOM. You can't embed a tr into a table: it has to be in a thead/tbody/tfoot. If you're writing HTML it's fine, the browser does it for you. But if you're writing DOM (directly or indirectly with e.g. React) you need to use the tbody tag or else it won't do you what you wanted.
- chrismorgan 4y ago
  Fun fact: `table > tr` is actually valid HTML. > […] followed by either zero or more tbody elements or one or more tr elements […] — https://html.spec.whatwg.org/multipage/tables.html#the-table-element 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-restrictions 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.

fowlie 4y ago

<marquee>remember this tag?</marquee>

solarkraft 4y ago
<center><blink>hello!</blink></center>

spdustin 4y ago

My favorite (non-conforming, do-not-use) element is <xmp>. It switches the browser's parsing context to "generic raw text"; it emits any "child" markup as-is, without parsing it. [0] https://jsfiddle.net/spdustin/y4m3qd71/1/ https://jsfiddle.net/spdustin/y4m3qd71/1/

derefr 4y ago
I believe you can also just write <![CDATA[whatever]]>. (See https://stackoverflow.com/questions/3302648/should-i-use-cdata-in-html5 https://stackoverflow.com/questions/3302648/should-i-use-cda...). It's normally only used to wrap non-HTML content inside <style> and <script>; but you could put "HTML that should be rendered as text" in there as well!
- missblit 4y ago
  Note that CData can _only_ be used what HTML calls foreign content. 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></p>` (your HTML parser will actually do this because giving up leads to poor user experience when no one else does)
missblit 4y ago
<plaintext> is also fun. Unlike <xmp> you can't get out of it with a closing tag. 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).
- eurasiantiger 4y ago
  Certainly it is possible. Try document.documentElement.outerHTML. Why would it be impossible?

chazeon 4y ago

In terms of <sub> and <sup>, I have to rely on them to write equations in Markdown on GitHub due to its buggy MathJax implementation (or previously, lack thereof).

rekabis 4y ago

SUB/SUP, MAP/AREA, and ABBR have all been in frequent use since the beginning. 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.

math0ne 4y ago

Abbreviations seems actually useful!

rekado 4y ago

`details`/`summary` and `progress` have decent default styles in picocss. I was under the impression that these elements were used much more often in "modern" HTML than, for example, `map`/`area` or `object` (yuck!).

deleted 4y ago

[deleted]

moralestapia 4y ago

sup and sub are quite common, I think. 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).

ironmagma 4y ago

I spent hours and hours playing with <MARQUEE />, had lots of fun putting a marquee within a marquee. Sad that there's no mention of it.

exabrial 4y ago

`<blink>` tag!

Kwpolska 4y ago

<datalist> might sound like a good idea, but it tends to be inconsistent between browsers [1]. It also doesn’t work on Firefox on Android (both Focus and standard). It was also broken in web views on Android for 1.5 years [2]. [1]: https://chriswarrick.com/blog/2020/02/09/when-html-is-not-enough-a-tale-of-the-datalist-element/ 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 https://bugs.chromium.org/p/chromium/issues/detail?id=949555

sbf501 4y ago

MAP and AREA have been around since the 90's, but METER/PROGRESS? I never noticed those sneak into HTML. I've been using Bootstrap for ages. Cool. SUP and SUB I find don't work very well with glyphs, but work fine with standard Latin characters.

AlbinoDaffy 4y ago

Oh hey I know the 4th one! I use <details> and <summary> all the time for gitlab tag comments and releases!

mattlondon 4y ago

1997 called, they want their cool elements back.

Sohcahtoa82 4y ago
Yeah, why use simple HTML elements when you can use a few thousand lines of JavaScript instead?

bawolff 4y ago

The one im sad never caught on was (the now removed from spec) <keygen> Basically let your users generate rsa keys so you could use mutual tls (i.e. client side certificates) instead of passwords.

somat 4y ago

I have this unhealthy aversion to javascript. so when I make a web application it is in a very late 90's style. For my latest thing, I needed to select points on an image and did I do the sane thing and write two lines of javascript and be done with it, of course not, I went with server side image maps. in 2022. sigh, no, I don't know what is wrong with me either. https://www.w3schools.com/Tags/att_img_ismap.asp https://www.w3schools.com/Tags/att_img_ismap.asp

mNovak 4y ago

There's a certain irony to me that this discussion of cool html elements is all embedded as images

nicbou 4y ago

<details> is great, but somewhat difficult to style.