Obscure HTML Tags(devapt.com)
devapt.com
Obscure HTML Tags
https://devapt.com/html-tags
24 comments
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.
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.
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.
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.
- noscript
- js failed to init
- app loaded
I’m very big on graceful failure though because it builds systems that you can really trust.
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:
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). 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.
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>
<script type="text/javascript">document.write("<style type='text/css'>.nojs{display:none}</style>")</script>
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). 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.
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.
The problem is that there are so many SPAs now, it's just a totally broken experience to turn off JS.
A complete reference to all HTML tags (along with simple descriptions): https://developer.mozilla.org/en-US/docs/Web/HTML/Element
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
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
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
[0]: http://www.the-pope.com/lostHTML.htm
<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.
Don't tell that to the billion-dollar healthcare company I'm currently building a web site for.
Why not? They'd be impressed and you can charge more.
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.
Just make a dialog with a div like you've always have been.
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
That nine year journey was tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=840640
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.
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.
Obscure? I'm not sure about that. Some of the tags, like <meter> or <mark>, you can perhaps label as not frequently used.
More Obscure HTML Tags in here
Link: https://books.goalkicker.com/HTML5Book
Link: https://books.goalkicker.com/HTML5Book
Doesn’t mention NEXTID, XMP, or LISTING. I guess those aren’t just obscure but obsolete.
dl/dt/dd aren't obscure necessarily, but when I see them, they're almost always misused.
datalist doesn't seem to work on FF mobile. Works fine on chrome.
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/
- In some other posts, I use details/summary to collapse large code blocks.