4 ms·

Obscure HTML Tags

53 points by daolf 5y ago

eternityforest 5y ago
I had no idea about details/summary! I've been using what now seems like a horrible hack, p class="help" to make help boxes that expand on mouseover all this time.
theandrewbailey 5y ago
A complete reference to all HTML tags (along with simple descriptions): https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://developer.mozilla.org/en-US/docs/Web/HTML/Element
colejohnson66 5y ago
For an interesting rabbit hole, read "The Lost Tags of HTML"[0]. It's about historical tags HTML 1.0 through 3.2 that don't exist anymore. [0]: http://www.the-pope.com/lostHTML.htm http://www.the-pope.com/lostHTML.htm
blacksmith_tb 5y ago
Sad if true that <noscript> is obscure these days - sort of tempting to put some special easter egg in one just to see if anyone can see it.
- MrVandemar 5y ago
  I browse with as little javascript as I can get away with and I'm sorely tempted to wrap my entire site content in <noscript> tags.
- aluminum96 5y ago
  The problem is that there are so many SPAs now, it's just a totally broken experience to turn off JS.
- wolfgang42 5y ago
  My experience has been that <noscript> is too unreliable to be usable: the problem is that a lot of users browsing "with JavaScript turned off" are actually browsing with it turned on but not executing (some arbitrary subset of!) the <script> tags on the page. The way to achieve the same effect without this problem is to include the nojs content unconditionally, and then have your script delete it from the DOM somewhere far enough through execution that you're confident that your script and its dependencies are all running properly. Otherwise you end up in situations where the JS is broken because something is being blocked, but it's working just well enough that the browser isn't showing the nice message you wrote explaining what the problem is.
  - thrashh 5y ago
    That’s true but I always had 3 levels: - noscript - js failed to init - app loaded I’m very big on graceful failure though because it builds systems that you can really trust.
- jlokier 5y ago
  As wolfgang42 says, these days it's common for JS to be disabled by user preference but <noscript> elements are not displayed. Sometimes only a subset of JS is disabled. <noscript> is really for browsers that don't support JS at all. A simple alternative if you want to display something to users who have JS entirely disabled (i.e. not partially) is to use a CSS class 'nojs' and inline <script> very early in the file. If you're happy to assume a HTML5 browser: <script>document.write("<style>.nojs{display:none}</style>")</script> and if not: <script type="text/javascript">document.write("<style type='text/css'>.nojs{display:none}</style>")</script> If running on a browser that doesn't support CSS or JS, this will display the 'nojs' content, which is probably what you want. You can of course use this method without <script> to provide a 'nocss' class that will display on CSS-incapable browsers. I prefer this over the method of deleting a DOM node after everything has been loaded and parsed, because this inline script is guaranteed to take effect before the 'nojs' content is reached so it's impossible for the 'nojs' content to be temporarily flashed to users on a slow connection (https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content). It's also a bit more versatile (you can place the 'nojs' anywhere, use it for alternative form elements etc.), and it's short. If you want to do something more like progressive enhancement, where the default is to not show something fancy unless JS loads successfully, add a 'js' class, where an inline <style> sets display:none, followed by JS which overrides the inline style to make 'js' elements visible again. Similarly with elements you want to display (or not) depending on specific feature detections.
reaperducer 5y ago
<progress>, <fieldset>, <datalist>, <details>, and <mark> tags are obscure? Don't tell that to the billion-dollar healthcare company I'm currently building a web site for.
- fortyseven 5y ago
  Why not? They'd be impressed and you can charge more.
kaushalmodi 5y ago
To me at least, mark, details/summary and description lists are not obscure! While I don't code in HTML directly, I write the mark-up in Org mode that exports to those. - My recent blog post where I used mark few times (I have set the mark highlight to be brownish to match my site theme) and also the description lists: https://scripter.co/hugo-modules-getting-started/ https://scripter.co/hugo-modules-getting-started/ - In some other posts, I use details/summary to collapse large code blocks.
brogrammer2018 5y ago
More Obscure HTML Tags in here Link: https://books.goalkicker.com/HTML5Book https://books.goalkicker.com/HTML5Book
mattl 5y ago
<isindex> is the most obscure HTML tag I can think of.
- mattl 5y ago
  Actually <nextid> is.
bdcravens 5y ago
dl/dt/dd aren't obscure necessarily, but when I see them, they're almost always misused.
pyuser583 5y ago
Doesn’t mention NEXTID, XMP, or LISTING. I guess those aren’t just obscure but obsolete.
montroser 5y ago
It is so wonderful to see that <dialog> finally shipped in Firefox 98, yielding full cross-browser support for that feature at long last. That nine year journey was tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=840640 https://bugzilla.mozilla.org/show_bug.cgi?id=840640
alx__ 5y ago
I've found <fieldset> to be immensely useful. For one it lets you create logical groupings and paired with legend give you a header type element. The main bonus is if you add the attribute "disabled" it will disable all the child form elements. Which makes it very simple to lock a form when it's being submitted to the server
john567 5y ago
FYI do. not. use. the dialog tag. It may work but it has a host of other issues. I don't even know if it's an accessibility benefit for anyone but it behaves in weird and uncontrollable ways. Just make a dialog with a div like you've always have been.
- Zardoz84 5y ago
  I'm being using <dialog> for a few years, and I don't find any problems. Except for requiring a polyfill for Firefox (and this will be not necessary anymore).
- winrid 5y ago
  Citation/details? I just used it for the first time today... :)
DangitBobby 5y ago
datalist doesn't seem to work on FF mobile. Works fine on chrome.
devonnull 5y ago
Obscure? I'm not sure about that. Some of the tags, like <meter> or <mark>, you can perhaps label as not frequently used.

53 points by daolf 5y ago

I had no idea about details/summary! I've been using what now seems like a horrible hack, p class="help" to make help boxes that expand on mouseover all this time.

theandrewbailey 5y ago

A complete reference to all HTML tags (along with simple descriptions): https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://developer.mozilla.org/en-US/docs/Web/HTML/Element

colejohnson66 5y ago

For an interesting rabbit hole, read "The Lost Tags of HTML"[0]. It's about historical tags HTML 1.0 through 3.2 that don't exist anymore. [0]: http://www.the-pope.com/lostHTML.htm http://www.the-pope.com/lostHTML.htm

blacksmith_tb 5y ago

Sad if true that <noscript> is obscure these days - sort of tempting to put some special easter egg in one just to see if anyone can see it.

MrVandemar 5y ago
I browse with as little javascript as I can get away with and I'm sorely tempted to wrap my entire site content in <noscript> tags.
aluminum96 5y ago
The problem is that there are so many SPAs now, it's just a totally broken experience to turn off JS.
wolfgang42 5y ago
My experience has been that <noscript> is too unreliable to be usable: the problem is that a lot of users browsing "with JavaScript turned off" are actually browsing with it turned on but not executing (some arbitrary subset of!) the <script> tags on the page. The way to achieve the same effect without this problem is to include the nojs content unconditionally, and then have your script delete it from the DOM somewhere far enough through execution that you're confident that your script and its dependencies are all running properly. Otherwise you end up in situations where the JS is broken because something is being blocked, but it's working just well enough that the browser isn't showing the nice message you wrote explaining what the problem is.
- thrashh 5y ago
  That’s true but I always had 3 levels: - noscript - js failed to init - app loaded I’m very big on graceful failure though because it builds systems that you can really trust.
jlokier 5y ago
As wolfgang42 says, these days it's common for JS to be disabled by user preference but <noscript> elements are not displayed. Sometimes only a subset of JS is disabled. <noscript> is really for browsers that don't support JS at all. A simple alternative if you want to display something to users who have JS entirely disabled (i.e. not partially) is to use a CSS class 'nojs' and inline <script> very early in the file. If you're happy to assume a HTML5 browser: <script>document.write("<style>.nojs{display:none}</style>")</script> and if not: <script type="text/javascript">document.write("<style type='text/css'>.nojs{display:none}</style>")</script> If running on a browser that doesn't support CSS or JS, this will display the 'nojs' content, which is probably what you want. You can of course use this method without <script> to provide a 'nocss' class that will display on CSS-incapable browsers. I prefer this over the method of deleting a DOM node after everything has been loaded and parsed, because this inline script is guaranteed to take effect before the 'nojs' content is reached so it's impossible for the 'nojs' content to be temporarily flashed to users on a slow connection (https://en.wikipedia.org/wiki/Flash_of_unstyled_content https://en.wikipedia.org/wiki/Flash_of_unstyled_content). It's also a bit more versatile (you can place the 'nojs' anywhere, use it for alternative form elements etc.), and it's short. If you want to do something more like progressive enhancement, where the default is to not show something fancy unless JS loads successfully, add a 'js' class, where an inline <style> sets display:none, followed by JS which overrides the inline style to make 'js' elements visible again. Similarly with elements you want to display (or not) depending on specific feature detections.

reaperducer 5y ago

<progress>, <fieldset>, <datalist>, <details>, and <mark> tags are obscure? Don't tell that to the billion-dollar healthcare company I'm currently building a web site for.

fortyseven 5y ago
Why not? They'd be impressed and you can charge more.

kaushalmodi 5y ago

To me at least, mark, details/summary and description lists are not obscure! While I don't code in HTML directly, I write the mark-up in Org mode that exports to those. - My recent blog post where I used mark few times (I have set the mark highlight to be brownish to match my site theme) and also the description lists: https://scripter.co/hugo-modules-getting-started/ https://scripter.co/hugo-modules-getting-started/ - In some other posts, I use details/summary to collapse large code blocks.

brogrammer2018 5y ago

More Obscure HTML Tags in here Link: https://books.goalkicker.com/HTML5Book https://books.goalkicker.com/HTML5Book

mattl 5y ago

<isindex> is the most obscure HTML tag I can think of.

mattl 5y ago
Actually <nextid> is.

bdcravens 5y ago

dl/dt/dd aren't obscure necessarily, but when I see them, they're almost always misused.

pyuser583 5y ago

Doesn’t mention NEXTID, XMP, or LISTING. I guess those aren’t just obscure but obsolete.

montroser 5y ago

It is so wonderful to see that <dialog> finally shipped in Firefox 98, yielding full cross-browser support for that feature at long last. That nine year journey was tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=840640 https://bugzilla.mozilla.org/show_bug.cgi?id=840640

alx__ 5y ago

I've found <fieldset> to be immensely useful. For one it lets you create logical groupings and paired with legend give you a header type element. The main bonus is if you add the attribute "disabled" it will disable all the child form elements. Which makes it very simple to lock a form when it's being submitted to the server

john567 5y ago

FYI do. not. use. the dialog tag. It may work but it has a host of other issues. I don't even know if it's an accessibility benefit for anyone but it behaves in weird and uncontrollable ways. Just make a dialog with a div like you've always have been.

Zardoz84 5y ago
I'm being using <dialog> for a few years, and I don't find any problems. Except for requiring a polyfill for Firefox (and this will be not necessary anymore).
winrid 5y ago
Citation/details? I just used it for the first time today... :)

DangitBobby 5y ago

datalist doesn't seem to work on FF mobile. Works fine on chrome.

devonnull 5y ago

Obscure? I'm not sure about that. Some of the tags, like <meter> or <mark>, you can perhaps label as not frequently used.