16 ms·

Those HTML attributes you never use

490 points by makaimc 5y ago

thomasfl 5y ago
The web standards are large and complex. I still discover new parts of the standards almost every month, even if I have made websites since the stoneage, in 1995. The title attribute of stylesheets was new to me.
toastal 5y ago
I'm pretty bummed the title attribute on stylesheets didn't get the love it needed. We had a native, built-in theme switcher (except Chromium) that would have been prefered to some of the contemporary options of needing to put it behind user preferences. If it could hawe been fixed to persist the selection as well as not load unused, then we'd maybe see a different space.
- giancarlostoro 5y ago
  Is there no JS APIs to use those either? Cause that would make it infinitely cooler imho, then you can surface it as a way to show off web app themes on the front-end too.
  - iggldiggl 5y ago
    Nothing pre-built, but you can cobble something together yourself – query the DOM for stylesheets, evaluate their attributes (i.e. especially the "title" and "alternate" attributes) and then enable and disable them as required. I wrote something like that for my homepage, although as I only needed to switch between two styles and I'm not a front-end person, I didn't bother with an actual selection drop-down and just wrote a toggle that cycles through all alternate stylesheets one at a time.
    - toastal 5y ago
      This works pretty nicely if they only refer to which CSS variables to load and the main CSS file is waiting to be overridden by these variables. I just wish it got a higher priority by browsers to have good built-ins.
- clairity 5y ago
  i still use this feature in firefox, and it's still one of my favorite little tricks to add to personal projects for a little flair. i'd only wish safari would support it as well (i don't care for chrome or google in general).
ravenstine 5y ago
I expected to read this article and think "yeah, no wonder I don't use those", but those first 2 in particular are pretty dope. The "Page Style" dropdown in the browser is something I never really thought you could add to. I think I know the next thing I'll play with in my next personal project. :D
- johannes1234321 5y ago
  There are so many fun things a browser could do in it's user interface. For instance HTML defines <link rel="previois|next|up|contents|glossary|..." href="..."> which could allow to have navigation for manuals and similar documents. Or imagine web browsers providing upload progress ;) But well, designers like to give all that their custom design.
  - 9dev 5y ago
    It's not the designers fault that browsers provide ridiculously bad default form controls with almost no way of styling them. Really, we have WASM, Bluetooth APIs in JS, and boatloads of other extremely advanced engineering feats in browsers -- but they can't be bothered to provide usable form elements? Just imagine all the developer time wasted on creating progress bars or date pickers...
    - johannes1234321 5y ago
      Yeah, aside from <optgroup> there hasn't been much improvement in that area (well maybe fieldset and related) in that space.
    - 6510 5y ago
      FormData is hilarious. https://developer.mozilla.org/en-US/docs/Web/API/FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData Uhh, JSON would have been nice I guess? When I got frustrated with the user needing to be able to re-edit a form with waaay to many fields and the option to add more fields of various exotic types. I wrote a hilarious hack where I just went over the input elements and elm.setAttribute("value", elm.value). Then I rip out the entire form innerHTML, POST it and store it in the database. Want to edit it again? Here you go! When displaying the content wrap the form in: <fieldset disabled="disabled"> and add some border:0;color:black For such a terrible idea it looked remarkably clean.
amelius 5y ago
Why aren't all attributes CSS properties?
- detaro 5y ago
  Because attributes are not for styling.
  - ravenstine 5y ago
    To clarify, they can specify meaning, data, and behavior. Technically the `style` tag applies any abstract styling, and there are attributes for things like table-related elements that can change the superficial appearance (not sure which one that was); just pretend that the latter isn't a thing.
    - tannhaeuser 5y ago
      Don't know if you're kidding ;) but how's <p style="margin-top: 2em;"> any better than <p margin-top="2em">?
      - have_faith 5y ago
        It keeps style instructions together instead of mingling them with data and behaviour attributes. There's some exceptions with some elements having attributes like width and border but it's mostly historical.
        tannhaeuser 5y ago
        Do you really believe that "style" requires entire new syntax, as opposed to "data" and "behavior", vague as these categories are? In a markup language based on SGML already chock full of syntactical constructs for managing/inheriting item-value pairs? In SGML, attributes are exactly there for things that aren't to be displayed to the user; the idea that attributes are for "behaviour" or whatever is entirely made-up after the fact to justify CSS' existence.
NKosmatos 5y ago
<blink>Came here for deprecated attributes, but found an informative article.</blink>
- ravenstine 5y ago
  <marquee>Never forget the fun of the early web!</marquee> Yeah, I had the same cynical assumption before reading. All in all, I can't remember coming across a deprecated HTML feature that I needed and didn't already have a better alternative.
  - 0des 5y ago
    Pouring one out for server side includes and my homie cgi-bin as we speak
    - extra88 5y ago
      I still have some web pages I update on a shared host that use server side includes to display the HTML file's last modified date.
    - matt_kantor 5y ago
      Those aren't part of HTML, rather features of web servers that are evaluated server-side. Furthermore I think you can still use this stuff. Apache and Lighttpd are still perfectly fine web servers depending on the use case. Also nginx supports server-side includes and fastCGI.
  - bryanrasmussen 5y ago
    The xmp element worked better for its purpose than any of the replacing elements, in my experience, http://www.the-pope.com/listin.html http://www.the-pope.com/listin.html
  - chrisfinazzo 5y ago
    I'm a bit surprised the autoplay attribute - at least how it's been used for <audio> and <video> hasn't been similarly consigned to the dustbin of history. What is taking so long? /s (Only a bit of sarcasm there, I actually would like to know...)
andrewingram 5y ago
When I worked on themes for a blog engine back in 2005/2006, I used the titled stylesheets to allow me to switch between themes quickly. There was actually an upper limit on how many you could have before browsers started breaking, but it was still a useful capability.
nkozyra 5y ago
enterkeyhint doesn't do anything on Chrome on Android. Which kind of illustrates why a lot of these things are not well-known. Why do something that that works on Firefox but not Chrome/Edge or on Safari/Firefox but not Chrome, etc? Specs are great, but near universal, reliably similar implementation is key. In a lot of cases it means you have to build edge case UX. I'd rather lean on UX that's mostly under my control and not at the whim of browser adoption. I did at least find some blink discussion on it: https://groups.google.com/a/chromium.org/g/blink-dev/c/Hfe5xktjSV8?pli=1 https://groups.google.com/a/chromium.org/g/blink-dev/c/Hfe5x...
- hackyhacky 5y ago
  Although your complaint about unsupported features is generally well-observed, in the case of this particular you feature, I believe you're wrong. This site suggests that enterkeyhint is supported on Chrome: https://caniuse.com/mdn-html_global_attributes_enterkeyhint https://caniuse.com/mdn-html_global_attributes_enterkeyhint My own testing also shows that it works. Using the "search" value of the attribute, I was able to change the enter button into a magnifying glass.
  - nkozyra 5y ago
    Wonder why their codepen example does nothing for me then? Latest chrome, pixel 6.
    - easrng 5y ago
      What keyboard app are you using? I'm using OpenBoard (Pretty close to AOSP) and it changes the icon on the enter key for me. I'll make a screen recording in a sec.
      - easrng 5y ago
        Ok, it works for me but only if I dismiss the keyboard in between fields. https://owo.whats-th.is/D4Vf7g6.mp4 https://owo.whats-th.is/D4Vf7g6.mp4
      - 5y ago
dgb23 5y ago
The form attribute on fields is very useful to decouple the What from the How (it is laid out on the screen). You might for example want an upload widget, which does a separate request, right next to some other fields. Instead of wrapping things in forms (which you cannot nest) you can now freely lay out your document. Similarly you might want several fields or buttons spread across your document and don't want to wrap everything with a big form, or several forms.
- bennyp101 5y ago
  Yep, super handy for having fields in a form in table. Each row can be its own form and you still end up with valid html.
- andrewingram 5y ago
  I’ve been meaning to use these attributes for the very reasons you mention, but I’d need to check the impact on the accessibility tree. I’m not sure of the impact of having the submit buttons in a completely different part of the DOM to the inputs.
  - extra88 5y ago
    The accessibility tree doesn't represent form elements in relation to their particular <form>, a submit button's position in the accessibility tree will be equivalent to its position in the DOM tree. The button's name (optionally also its description) and to some degree its position in the DOM order (what heading and/or other form elements precedes it) needs to be sufficient to convey what will happen when it's used.
    - andrewingram 5y ago
      That’s useful stuff, thanks!
efortis 5y ago
My favorite: <abbr title="Abbreviation">abbr</abbr>
- hombre_fatal 5y ago
  I like the title property, especially on <a> elements, but always found that there was too much delay to discover it as a user. Like I wouldn't hover that long on a link/abbr unless I knew something was going to pop up. I think this is one reason people quickly move on to using popover libraries for simple popovers.
martin_a 5y ago
> The decoding Attribute For The <img> Element This is an interesting one, although I find native lazy-loading with the "loading"-attribute more interesting: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading https://developer.mozilla.org/en-US/docs/Web/HTML/Element/im...
- extra88 5y ago
  The loading attribute is more interesting and useful but I think it's already fairly familiar to Smashing Magazine readers. I think the decoding attribute could be useful for page rendering on very low-end devices, maybe also on pages with a very large quantity of images.
hk__2 5y ago
Note that instead of using an input type=text and enterkeyhint=search, you can use input type=search.
- nkozyra 5y ago
  Sure, but this tip is explicitly to change the text (or icon, depending) of the onscreen virtual keyboard, so these are different functionalities.
- fleddr 5y ago
  These are not equivalents. Input type=search can have side effects in that it renders the input box differently, for example with a "X" inside to clear the search. Which may be good, but it may also conflict with your design system.
  - hk__2 5y ago
    Yes; personally I’d rather have a type=search to have the semantics and then apply CSS on it, rather than a type=text with no semantic meaning at all that’s modified to behave like a type=search.
- cxr 5y ago
  enterkeyhint is embarrassingly concrete. Should've accomplished this by specifying semantics for the alt and rel attributes.
  - TAKEMYMONEY 5y ago
    My first thought as well, should we expect `prntscrnkeyhint` soon?
- lloydatkinson 5y ago
  The search input sucks on iOS - it randomly has square corners or round corners depending on arbitrary information.
- deleted 5y ago
  [deleted]
hiccuphippo 5y ago
Their cookie consent window is one of the most confusing ones I've seen: "We use cookies for login, checkout and stats. Learn more in our privacy settings." Followed by two buttons: "No, thanks" and "It's okay". No thanks... I don't want to learn about your privacy settings? It's okay... store everything?
- xnorswap 5y ago
  Cookie warnings have got worse and worse. There are sites now that list 200+ checkboxes with a handy "reject all", but if you don't click through to the list of "legitimate interest" sites you miss out on rejecting 200+ more advertising partners (who somehow have "legitimate interest") with no reject all option.
  - chrisfinazzo 5y ago
    While GDPR and related laws (mostly) do the correct thing with respect to privacy, their emergence into the real world has only accelerated this trend. Really needs a course correct to find a better balance...
    - marcosdumay 5y ago
      It's only a matter of enforcing the GDPR.
  - dspillett 5y ago
    This is very common, and why I avoid add-on or user-script based solutions that click “reject all” – the authors of those awful dialogues will find yet another way of turning “reject all” into “go right ahead”. “Legitimate interest” is proof that “your privacy is valuable to us” just means “we are happy to shatter your privacy in exchange for some value”. Every “legitimate interest” box basically says “we see your preference, but fuck you and your preferences”.
- leephillips 5y ago
  I don't see most of these cookie warnings as I use this bookmarklet: https://lee-phillips.org/nomorecookiewarnings/ https://lee-phillips.org/nomorecookiewarnings/ It’s not perfect, but it helps.
acatton 5y ago
> The `download` Attribute For The <a> Element This can also be done by the webserver with Content-Disposition. [1] But it's cool, I didn't know this could be done with HTML, it offers a lot of possibilities. [1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#examples https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...
- chrisfinazzo 5y ago
  I actually hadn't heard of CD before. Looking at it, using an attribute seems more straightforward and simple. Maybe just me.
  - jdmichal 5y ago
    `Content-Disposition` also works for form submission. If a response to a form submission contains the `Content-Disposition` header, the browser will expose that to the user as a download and the page will not navigate.
- strogonoff 5y ago
  The <a download> attribute sounds great on paper, but if request fails for whatever reason your user will, very confusingly, download a file named exactly as you specify but with error page HTML as contents. There is no straightforward way[0] for you to gracefully handle an error, which is quite an oversight once you factor in that network isn’t always reliable. Having used it at first, I switched to server-side logic where I return data with Content-Disposition header if everything went well or redirect the user to show a proper error message in case of a problem. [0] I imagine this could be worked around with some JS-based preflight or other trickery—which sounds like a suitable solution only if you have no control over the headers returned for some reason.
  - chrisfinazzo 5y ago
    Huh. Whenever I've used it, things have all been on the same domain so this doesn't come up - good to know.
ktpsns 5y ago
The graveyard of HTML attributes which never gained public attention/usage is large and full of useful ideas. My favourite was relational links such as <link rel='first' href='/de' title='Homepage' /> <link rel='prev' href='/some/bunnies.php' title='Previous Page about bunnies' /> <link rel='next' href='/some/cats.php' title='Next page about cats' /> <link rel="copyright" href="/de/impressum.php" title="Impressum"> <link rel="alternate" href="/gr/samepage.php" hreflang="gr" title="Page name in greek"> Opera was the only browser which had a toolbar with these relational links. This was around mid-2000. Unfortunately, this toolbar never survived or got taken over by other browsers. Some relations survived (such as rel="search" for custom search pages), some got killed-by-ecosystem (such as RSS).
- dfox 5y ago
  Mozilla Suite also had toolbar for this kind of links. And early versions of Firefox either had it too or there was extension for it.
- oneeyedpigeon 5y ago
  I've made use of those even recently. Even if they're not used much now, it's potential future-proofing. And I've written tools that manage content and read these values to organise pages in a series.
  - clairity 5y ago
    yah, rel links are still usuable at least for machine-read purposes, if not the old 'back', 'forward', 'up', type site navigation links that browsers used to display if those were present in the document.
  - novocantico 5y ago
    Who knows, maybe someone who works on Chrome or Edge or Safari is reading this thread and will talk to their higher-ups about using it somehow. (Wishful thinking?)
- edeion 5y ago
  I seem to remember this was used by emacs' mode embedding the w3m browser. It was great to read long structured documentation sites by just pressing space-bar to "scroll" through pages.
nl 5y ago
I have a recollection of early versions of Firefox exposing the stylesheet switcher in the footer chrome. Maybe it was an extension though? I can't find references to it online.
- cxr 5y ago
  Firefox's style switcher is in the View menu ("Page Style"; try it out on <http://virtualplastic.net http://virtualplastic.net>). The statusbar style switcher was from the Mozilla suite. There was a nostalgia-fueled extension for reimplemented the original statusbar widget in Firefox.
  - HenryMulligan 5y ago
    Congratulations on finding a menu item that I had no idea even existed. I don't know how it is possible, but I am pretty sure I have never seen that menu item before. I will be trying this out on various web sites now. Thanks!
    - cxr 5y ago
      Prepare to be disappointed. There are probably fewer pages using this now than there were 15–20 years ago, despite the rise of "Dark Mode". (The menu item was actually mentioned in the article linked here.)
  - nl 5y ago
    Glad I'm not misremembering! I found some posts from from 2004 which does refer to the icon: https://fantasai.inkedblade.net/weblog/2004/firefox-altss/ https://fantasai.inkedblade.net/weblog/2004/firefox-altss/ https://web.archive.org/web/20041103090311/http://weblogs.mozillazine.org/roadmap/archives/006411.html https://web.archive.org/web/20041103090311/http://weblogs.mo... I wish I could find some screenshots!
agumonkey 5y ago
The enterkeyhint is brilliant. Yet it's sad it can't affect physical keyboards because it would be an ergonomic boom for all the non tech savvy people (input order and submission is often slowed down and confusing due to that, yet something that was leaner in old as400 terminal UIs). Maybe keyboards will have a few lcd keys, or for cost cutting a colored led keys to match these kind of hints
- SSLy 5y ago
  >Maybe keyboards will have a colored led keys to match these kind of hints There are enormous numbers of keyboards with per-key RGB lighting available. And the host OS can control them (right now my keyboard is lighting up with the music)
  - agumonkey 5y ago
    but I assume material and software cost of these are too high for the people i was describing.
- tenebrisalietum 5y ago
  Keys on Optimus Maximus keyboards have individual LCD screens. Quite pricey last time I checked. > non tech savvy people Tech, in many situations that intersect with non-tech people, is now some form of touchscreen with an onscreen keyboard. Exceptions are corporate HR departments, whose hardware, software, and flow seem to ignore the fact that phones are the primary Internet device now, not PCs like it was in the 90s. If your actual job requires you to use a PC, you probably simply just need to learn to use a keyboard because the apps you are using are going to be complex to, e.g. Office suite, etc.
  - agumonkey 5y ago
    > you probably simply just need to learn to use a keyboard it's not the keyboard, it's the meaning 'RET' has for a particular form. It can be a per field 'accept then go next' it can be 'validate the local group', 'validate the main form and submit it back', 'accept a partial choice but don't change focus'. That's why the hint is brilliant, it removes confusion. Also people who need this knowledge are never given good tutors. It's mostly "deal with it, and be fast or else.."
bugmen0t 5y ago
Nit: `integrity` also works for stylesheets, not just scripts
- watersb 5y ago
  Does anyone remember JavaScript Style Sheets?
  - easrng 5y ago
    I was never around when they actually existed, but I have seen mentions in books and things. IIRC Netscape translated CSS to JSSS internally, at least at first.
  - mxuribe 5y ago
    That sounds vaguely familiar...then again, there are many things from the late 90s/early 2000s web development that i wish to forget. ;-)
chrisfinazzo 5y ago
<cite> is a bit of a surprise to me. The Standard Ebooks[1] project uses almost religiously it when styling blockquotes. [1]: https://standardebooks.org/manual/1.6.3/single-page#5.8 https://standardebooks.org/manual/1.6.3/single-page#5.8 I love the <download> attribute, it's a quick way to use the default file download mechanisms without having to bother the user with opening a link or prompting. I realize there is the potential for abuse, but if you're careful, it's wonderful. Native lazy loading support is coming to a bunch of things in the near future, if it's not there already, so this one is living on borrowed time. If you've ever tried to implement CSP on a site, crossorigin and integrity should be famiilar - alas, CSP is hard, but you already knew that didn't you :)
- extra88 5y ago
  You're mixing up elements and element attributes. There is an <cite> element, which it appears Standard Ebooks uses, and a cite attribute, which is seldom used, probably because it's not exposed to the user in any way. Writing "<download>", with the word in angle brackets, makes it look like an element but it's not, download is an element attribute.
  - chrisfinazzo 5y ago
    Ack. Yeah, the first one is my mistake looking at it again - although I would argue this element is relatively underused because it's not something you would need outside of contexts where printing is a concern - SE is a slight exception in that they are starting from print transcriptions in most cases. I am aware of the distinction, I only used that way b/c HN doesn't really have a good way to indicate code without multiple spaces or just blindly using the ` character which is...not great.
    - extra88 5y ago
      <cite> does have a default browser style (italic), Standard Ebook's use of <i> within it would be redundant on the web, I don't know if the conventions are different in EPUB. How to use <cite> is often misunderstood. Many think it can be used to identify the author of a quotation but it should only be used to name the work a quotation is from. Standard Ebook placed it inside the <blockquote> but I've also seen it placed after <blockquote>, I don't know whether both are considered correct or if it's a point of disagreement; to me, <blockquote> should contain only the quoted material itself but I understand the appeal of having the quote and its source be neatly contained within one semantic element. Using the Markdown convention of putting backticks around `code` may not be great but at least it won't be confused for the wrong actual code.
cfj 5y ago
Seeing the download attribute mentionend felt weirdly nostalgic. I wrote a short blog post about that attribute which shot up to the number one spot here on HN when I submitted it back in 2013[0]. In the nine years since that post, I have not once used it in a real project. [0]: https://news.ycombinator.com/item?id=5594791 https://news.ycombinator.com/item?id=5594791
sebazzz 5y ago
> The title Attribute On Stylesheets w3.org used to feature this, you could view the website in any of the stylesheets they offered, which were a bunch (about 5-10 if I recall correctly).
TAKEMYMONEY 5y ago
No one uses the <a> `download` attribute for the reason we stopped forcing users to open new browser windows with target="_blank", they know how to download (or open a new tab) if they want to, and it breaks or confuses more often than it works. Who's using (or even heard of) <abbr> and <dfn> without `title`? I kinda thought that was what made them most useful, providing the full unabbreviated version for example.
- brewmarche 5y ago
  <abbr> sounds useful for screen readers
- vikingerik 5y ago
  target="_blank" wasn't replaced by user behavior, it was replaced by Javascript intercepting and logging and tracking every click. That said, opening links in a new tab/window is the less-breaky approach these days, since every page that the clicks came from is a mess of infinite scroll and reactive components and all sorts of other state that gets lost by clicking to another page and trying to go back.
  - deleted 5y ago
    [deleted]
- mdavidn 5y ago
  I used the download attribute recently to force downloads for attachments from another service, one whose Content-Disposition headers are outside my control.
- clairity 5y ago
  an <abbr> can be marked as a abbreviation without providing the long form via a title, if you don't know the long form but want to note it as an abbr, or if the abbr is titled previously and you're reusing the same abbr multiple times in the same context. not sure about <dfn> without a title though.
- efortis 5y ago
  The download attribute is helpful. For instance, my app is offline-first and the "Files" you can create with it are JSON. Therefore, it's better that they get downloaded so the user can open or drop them into the app without having to see the raw data.
zhte415 5y ago
The article didn't use the blockquote cite attribute in the blockquote that explains why it's not used much. This is perhaps internally consistent.
jer0me 5y ago
I also like the `formaction` attribute that can be added to buttons and input-buttons in forms to specify different actions. I used it to let users choose between multiple payment methods.
inopinatus 5y ago
I highly recommend re-reading the entire formal standard for technologies you work with routinely, on a roughly annual basis. It's a triple whammy of refresher, update, and niche discovery. I attribute this advice to Æleen Frisch; albeit without pulling my very dog-eared copy from the stacks, I recall that words to similar effect can be found in the epochal Essential System Administration (2002), possibly in the form of reading every manpage in your local Unix base system.
Melatonic 5y ago
Would be nice to be able to rely on HTML attributes for filtering but sadly they are just too easy to spoof
charcircuit 5y ago
Page Style is useless because there is no persistence. Even navigating to another page on that same website will reset it back to default.
maps7 5y ago
Cool. Most of these were new to me too. I will likely forget them again until I read about them in another blog post but interesting nonetheless.

490 points by makaimc 5y ago

The web standards are large and complex. I still discover new parts of the standards almost every month, even if I have made websites since the stoneage, in 1995. The title attribute of stylesheets was new to me.

toastal 5y ago

I'm pretty bummed the title attribute on stylesheets didn't get the love it needed. We had a native, built-in theme switcher (except Chromium) that would have been prefered to some of the contemporary options of needing to put it behind user preferences. If it could hawe been fixed to persist the selection as well as not load unused, then we'd maybe see a different space.

giancarlostoro 5y ago
Is there no JS APIs to use those either? Cause that would make it infinitely cooler imho, then you can surface it as a way to show off web app themes on the front-end too.
- iggldiggl 5y ago
  Nothing pre-built, but you can cobble something together yourself – query the DOM for stylesheets, evaluate their attributes (i.e. especially the "title" and "alternate" attributes) and then enable and disable them as required. I wrote something like that for my homepage, although as I only needed to switch between two styles and I'm not a front-end person, I didn't bother with an actual selection drop-down and just wrote a toggle that cycles through all alternate stylesheets one at a time.
  - toastal 5y ago
    This works pretty nicely if they only refer to which CSS variables to load and the main CSS file is waiting to be overridden by these variables. I just wish it got a higher priority by browsers to have good built-ins.
clairity 5y ago
i still use this feature in firefox, and it's still one of my favorite little tricks to add to personal projects for a little flair. i'd only wish safari would support it as well (i don't care for chrome or google in general).

ravenstine 5y ago

I expected to read this article and think "yeah, no wonder I don't use those", but those first 2 in particular are pretty dope. The "Page Style" dropdown in the browser is something I never really thought you could add to. I think I know the next thing I'll play with in my next personal project. :D

johannes1234321 5y ago
There are so many fun things a browser could do in it's user interface. For instance HTML defines <link rel="previois|next|up|contents|glossary|..." href="..."> which could allow to have navigation for manuals and similar documents. Or imagine web browsers providing upload progress ;) But well, designers like to give all that their custom design.
- 9dev 5y ago
  It's not the designers fault that browsers provide ridiculously bad default form controls with almost no way of styling them. Really, we have WASM, Bluetooth APIs in JS, and boatloads of other extremely advanced engineering feats in browsers -- but they can't be bothered to provide usable form elements? Just imagine all the developer time wasted on creating progress bars or date pickers...
  - johannes1234321 5y ago
    Yeah, aside from <optgroup> there hasn't been much improvement in that area (well maybe fieldset and related) in that space.
  - 6510 5y ago
    FormData is hilarious. https://developer.mozilla.org/en-US/docs/Web/API/FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData Uhh, JSON would have been nice I guess? When I got frustrated with the user needing to be able to re-edit a form with waaay to many fields and the option to add more fields of various exotic types. I wrote a hilarious hack where I just went over the input elements and elm.setAttribute("value", elm.value). Then I rip out the entire form innerHTML, POST it and store it in the database. Want to edit it again? Here you go! When displaying the content wrap the form in: <fieldset disabled="disabled"> and add some border:0;color:black For such a terrible idea it looked remarkably clean.

amelius 5y ago

Why aren't all attributes CSS properties?

detaro 5y ago
Because attributes are not for styling.
- ravenstine 5y ago
  To clarify, they can specify meaning, data, and behavior. Technically the `style` tag applies any abstract styling, and there are attributes for things like table-related elements that can change the superficial appearance (not sure which one that was); just pretend that the latter isn't a thing.
  - tannhaeuser 5y ago
    Don't know if you're kidding ;) but how's <p style="margin-top: 2em;"> any better than <p margin-top="2em">?
    - have_faith 5y ago
      It keeps style instructions together instead of mingling them with data and behaviour attributes. There's some exceptions with some elements having attributes like width and border but it's mostly historical.
      - tannhaeuser 5y ago
        Do you really believe that "style" requires entire new syntax, as opposed to "data" and "behavior", vague as these categories are? In a markup language based on SGML already chock full of syntactical constructs for managing/inheriting item-value pairs? In SGML, attributes are exactly there for things that aren't to be displayed to the user; the idea that attributes are for "behaviour" or whatever is entirely made-up after the fact to justify CSS' existence.

NKosmatos 5y ago

<blink>Came here for deprecated attributes, but found an informative article.</blink>

ravenstine 5y ago
<marquee>Never forget the fun of the early web!</marquee> Yeah, I had the same cynical assumption before reading. All in all, I can't remember coming across a deprecated HTML feature that I needed and didn't already have a better alternative.
- 0des 5y ago
  Pouring one out for server side includes and my homie cgi-bin as we speak
  - extra88 5y ago
    I still have some web pages I update on a shared host that use server side includes to display the HTML file's last modified date.
  - matt_kantor 5y ago
    Those aren't part of HTML, rather features of web servers that are evaluated server-side. Furthermore I think you can still use this stuff. Apache and Lighttpd are still perfectly fine web servers depending on the use case. Also nginx supports server-side includes and fastCGI.
- bryanrasmussen 5y ago
  The xmp element worked better for its purpose than any of the replacing elements, in my experience, http://www.the-pope.com/listin.html http://www.the-pope.com/listin.html
- chrisfinazzo 5y ago
  I'm a bit surprised the autoplay attribute - at least how it's been used for <audio> and <video> hasn't been similarly consigned to the dustbin of history. What is taking so long? /s (Only a bit of sarcasm there, I actually would like to know...)

andrewingram 5y ago

When I worked on themes for a blog engine back in 2005/2006, I used the titled stylesheets to allow me to switch between themes quickly. There was actually an upper limit on how many you could have before browsers started breaking, but it was still a useful capability.

nkozyra 5y ago

enterkeyhint doesn't do anything on Chrome on Android. Which kind of illustrates why a lot of these things are not well-known. Why do something that that works on Firefox but not Chrome/Edge or on Safari/Firefox but not Chrome, etc? Specs are great, but near universal, reliably similar implementation is key. In a lot of cases it means you have to build edge case UX. I'd rather lean on UX that's mostly under my control and not at the whim of browser adoption. I did at least find some blink discussion on it: https://groups.google.com/a/chromium.org/g/blink-dev/c/Hfe5xktjSV8?pli=1 https://groups.google.com/a/chromium.org/g/blink-dev/c/Hfe5x...

hackyhacky 5y ago
Although your complaint about unsupported features is generally well-observed, in the case of this particular you feature, I believe you're wrong. This site suggests that enterkeyhint is supported on Chrome: https://caniuse.com/mdn-html_global_attributes_enterkeyhint https://caniuse.com/mdn-html_global_attributes_enterkeyhint My own testing also shows that it works. Using the "search" value of the attribute, I was able to change the enter button into a magnifying glass.
- nkozyra 5y ago
  Wonder why their codepen example does nothing for me then? Latest chrome, pixel 6.
  - easrng 5y ago
    What keyboard app are you using? I'm using OpenBoard (Pretty close to AOSP) and it changes the icon on the enter key for me. I'll make a screen recording in a sec.
    - easrng 5y ago
      Ok, it works for me but only if I dismiss the keyboard in between fields. https://owo.whats-th.is/D4Vf7g6.mp4 https://owo.whats-th.is/D4Vf7g6.mp4
    - 5y ago

dgb23 5y ago

The form attribute on fields is very useful to decouple the What from the How (it is laid out on the screen). You might for example want an upload widget, which does a separate request, right next to some other fields. Instead of wrapping things in forms (which you cannot nest) you can now freely lay out your document. Similarly you might want several fields or buttons spread across your document and don't want to wrap everything with a big form, or several forms.

bennyp101 5y ago
Yep, super handy for having fields in a form in table. Each row can be its own form and you still end up with valid html.
andrewingram 5y ago
I’ve been meaning to use these attributes for the very reasons you mention, but I’d need to check the impact on the accessibility tree. I’m not sure of the impact of having the submit buttons in a completely different part of the DOM to the inputs.
- extra88 5y ago
  The accessibility tree doesn't represent form elements in relation to their particular <form>, a submit button's position in the accessibility tree will be equivalent to its position in the DOM tree. The button's name (optionally also its description) and to some degree its position in the DOM order (what heading and/or other form elements precedes it) needs to be sufficient to convey what will happen when it's used.
  - andrewingram 5y ago
    That’s useful stuff, thanks!

efortis 5y ago

My favorite: <abbr title="Abbreviation">abbr</abbr>

hombre_fatal 5y ago
I like the title property, especially on <a> elements, but always found that there was too much delay to discover it as a user. Like I wouldn't hover that long on a link/abbr unless I knew something was going to pop up. I think this is one reason people quickly move on to using popover libraries for simple popovers.

martin_a 5y ago

> The decoding Attribute For The <img> Element This is an interesting one, although I find native lazy-loading with the "loading"-attribute more interesting: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading https://developer.mozilla.org/en-US/docs/Web/HTML/Element/im...

extra88 5y ago
The loading attribute is more interesting and useful but I think it's already fairly familiar to Smashing Magazine readers. I think the decoding attribute could be useful for page rendering on very low-end devices, maybe also on pages with a very large quantity of images.

hk__2 5y ago

Note that instead of using an input type=text and enterkeyhint=search, you can use input type=search.

nkozyra 5y ago
Sure, but this tip is explicitly to change the text (or icon, depending) of the onscreen virtual keyboard, so these are different functionalities.
fleddr 5y ago
These are not equivalents. Input type=search can have side effects in that it renders the input box differently, for example with a "X" inside to clear the search. Which may be good, but it may also conflict with your design system.
- hk__2 5y ago
  Yes; personally I’d rather have a type=search to have the semantics and then apply CSS on it, rather than a type=text with no semantic meaning at all that’s modified to behave like a type=search.
cxr 5y ago
enterkeyhint is embarrassingly concrete. Should've accomplished this by specifying semantics for the alt and rel attributes.
- TAKEMYMONEY 5y ago
  My first thought as well, should we expect `prntscrnkeyhint` soon?
lloydatkinson 5y ago
The search input sucks on iOS - it randomly has square corners or round corners depending on arbitrary information.
deleted 5y ago
[deleted]

hiccuphippo 5y ago

Their cookie consent window is one of the most confusing ones I've seen: "We use cookies for login, checkout and stats. Learn more in our privacy settings." Followed by two buttons: "No, thanks" and "It's okay". No thanks... I don't want to learn about your privacy settings? It's okay... store everything?

xnorswap 5y ago
Cookie warnings have got worse and worse. There are sites now that list 200+ checkboxes with a handy "reject all", but if you don't click through to the list of "legitimate interest" sites you miss out on rejecting 200+ more advertising partners (who somehow have "legitimate interest") with no reject all option.
- chrisfinazzo 5y ago
  While GDPR and related laws (mostly) do the correct thing with respect to privacy, their emergence into the real world has only accelerated this trend. Really needs a course correct to find a better balance...
  - marcosdumay 5y ago
    It's only a matter of enforcing the GDPR.
- dspillett 5y ago
  This is very common, and why I avoid add-on or user-script based solutions that click “reject all” – the authors of those awful dialogues will find yet another way of turning “reject all” into “go right ahead”. “Legitimate interest” is proof that “your privacy is valuable to us” just means “we are happy to shatter your privacy in exchange for some value”. Every “legitimate interest” box basically says “we see your preference, but fuck you and your preferences”.
leephillips 5y ago
I don't see most of these cookie warnings as I use this bookmarklet: https://lee-phillips.org/nomorecookiewarnings/ https://lee-phillips.org/nomorecookiewarnings/ It’s not perfect, but it helps.

acatton 5y ago

> The `download` Attribute For The <a> Element This can also be done by the webserver with Content-Disposition. [1] But it's cool, I didn't know this could be done with HTML, it offers a lot of possibilities. [1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#examples https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...

chrisfinazzo 5y ago
I actually hadn't heard of CD before. Looking at it, using an attribute seems more straightforward and simple. Maybe just me.
- jdmichal 5y ago
  `Content-Disposition` also works for form submission. If a response to a form submission contains the `Content-Disposition` header, the browser will expose that to the user as a download and the page will not navigate.
strogonoff 5y ago
The <a download> attribute sounds great on paper, but if request fails for whatever reason your user will, very confusingly, download a file named exactly as you specify but with error page HTML as contents. There is no straightforward way[0] for you to gracefully handle an error, which is quite an oversight once you factor in that network isn’t always reliable. Having used it at first, I switched to server-side logic where I return data with Content-Disposition header if everything went well or redirect the user to show a proper error message in case of a problem. [0] I imagine this could be worked around with some JS-based preflight or other trickery—which sounds like a suitable solution only if you have no control over the headers returned for some reason.
- chrisfinazzo 5y ago
  Huh. Whenever I've used it, things have all been on the same domain so this doesn't come up - good to know.

ktpsns 5y ago

The graveyard of HTML attributes which never gained public attention/usage is large and full of useful ideas. My favourite was relational links such as <link rel='first' href='/de' title='Homepage' /> <link rel='prev' href='/some/bunnies.php' title='Previous Page about bunnies' /> <link rel='next' href='/some/cats.php' title='Next page about cats' /> <link rel="copyright" href="/de/impressum.php" title="Impressum"> <link rel="alternate" href="/gr/samepage.php" hreflang="gr" title="Page name in greek"> Opera was the only browser which had a toolbar with these relational links. This was around mid-2000. Unfortunately, this toolbar never survived or got taken over by other browsers. Some relations survived (such as rel="search" for custom search pages), some got killed-by-ecosystem (such as RSS).

dfox 5y ago
Mozilla Suite also had toolbar for this kind of links. And early versions of Firefox either had it too or there was extension for it.
oneeyedpigeon 5y ago
I've made use of those even recently. Even if they're not used much now, it's potential future-proofing. And I've written tools that manage content and read these values to organise pages in a series.
- clairity 5y ago
  yah, rel links are still usuable at least for machine-read purposes, if not the old 'back', 'forward', 'up', type site navigation links that browsers used to display if those were present in the document.
- novocantico 5y ago
  Who knows, maybe someone who works on Chrome or Edge or Safari is reading this thread and will talk to their higher-ups about using it somehow. (Wishful thinking?)
edeion 5y ago
I seem to remember this was used by emacs' mode embedding the w3m browser. It was great to read long structured documentation sites by just pressing space-bar to "scroll" through pages.

nl 5y ago

I have a recollection of early versions of Firefox exposing the stylesheet switcher in the footer chrome. Maybe it was an extension though? I can't find references to it online.

cxr 5y ago
Firefox's style switcher is in the View menu ("Page Style"; try it out on <http://virtualplastic.net http://virtualplastic.net>). The statusbar style switcher was from the Mozilla suite. There was a nostalgia-fueled extension for reimplemented the original statusbar widget in Firefox.
- HenryMulligan 5y ago
  Congratulations on finding a menu item that I had no idea even existed. I don't know how it is possible, but I am pretty sure I have never seen that menu item before. I will be trying this out on various web sites now. Thanks!
  - cxr 5y ago
    Prepare to be disappointed. There are probably fewer pages using this now than there were 15–20 years ago, despite the rise of "Dark Mode". (The menu item was actually mentioned in the article linked here.)
- nl 5y ago
  Glad I'm not misremembering! I found some posts from from 2004 which does refer to the icon: https://fantasai.inkedblade.net/weblog/2004/firefox-altss/ https://fantasai.inkedblade.net/weblog/2004/firefox-altss/ https://web.archive.org/web/20041103090311/http://weblogs.mozillazine.org/roadmap/archives/006411.html https://web.archive.org/web/20041103090311/http://weblogs.mo... I wish I could find some screenshots!

agumonkey 5y ago

The enterkeyhint is brilliant. Yet it's sad it can't affect physical keyboards because it would be an ergonomic boom for all the non tech savvy people (input order and submission is often slowed down and confusing due to that, yet something that was leaner in old as400 terminal UIs). Maybe keyboards will have a few lcd keys, or for cost cutting a colored led keys to match these kind of hints

SSLy 5y ago
>Maybe keyboards will have a colored led keys to match these kind of hints There are enormous numbers of keyboards with per-key RGB lighting available. And the host OS can control them (right now my keyboard is lighting up with the music)
- agumonkey 5y ago
  but I assume material and software cost of these are too high for the people i was describing.
tenebrisalietum 5y ago
Keys on Optimus Maximus keyboards have individual LCD screens. Quite pricey last time I checked. > non tech savvy people Tech, in many situations that intersect with non-tech people, is now some form of touchscreen with an onscreen keyboard. Exceptions are corporate HR departments, whose hardware, software, and flow seem to ignore the fact that phones are the primary Internet device now, not PCs like it was in the 90s. If your actual job requires you to use a PC, you probably simply just need to learn to use a keyboard because the apps you are using are going to be complex to, e.g. Office suite, etc.
- agumonkey 5y ago
  > you probably simply just need to learn to use a keyboard it's not the keyboard, it's the meaning 'RET' has for a particular form. It can be a per field 'accept then go next' it can be 'validate the local group', 'validate the main form and submit it back', 'accept a partial choice but don't change focus'. That's why the hint is brilliant, it removes confusion. Also people who need this knowledge are never given good tutors. It's mostly "deal with it, and be fast or else.."

bugmen0t 5y ago

Nit: `integrity` also works for stylesheets, not just scripts

watersb 5y ago
Does anyone remember JavaScript Style Sheets?
- easrng 5y ago
  I was never around when they actually existed, but I have seen mentions in books and things. IIRC Netscape translated CSS to JSSS internally, at least at first.
- mxuribe 5y ago
  That sounds vaguely familiar...then again, there are many things from the late 90s/early 2000s web development that i wish to forget. ;-)

chrisfinazzo 5y ago

<cite> is a bit of a surprise to me. The Standard Ebooks[1] project uses almost religiously it when styling blockquotes. [1]: https://standardebooks.org/manual/1.6.3/single-page#5.8 https://standardebooks.org/manual/1.6.3/single-page#5.8 I love the <download> attribute, it's a quick way to use the default file download mechanisms without having to bother the user with opening a link or prompting. I realize there is the potential for abuse, but if you're careful, it's wonderful. Native lazy loading support is coming to a bunch of things in the near future, if it's not there already, so this one is living on borrowed time. If you've ever tried to implement CSP on a site, crossorigin and integrity should be famiilar - alas, CSP is hard, but you already knew that didn't you :)

extra88 5y ago
You're mixing up elements and element attributes. There is an <cite> element, which it appears Standard Ebooks uses, and a cite attribute, which is seldom used, probably because it's not exposed to the user in any way. Writing "<download>", with the word in angle brackets, makes it look like an element but it's not, download is an element attribute.
- chrisfinazzo 5y ago
  Ack. Yeah, the first one is my mistake looking at it again - although I would argue this element is relatively underused because it's not something you would need outside of contexts where printing is a concern - SE is a slight exception in that they are starting from print transcriptions in most cases. I am aware of the distinction, I only used that way b/c HN doesn't really have a good way to indicate code without multiple spaces or just blindly using the ` character which is...not great.
  - extra88 5y ago
    <cite> does have a default browser style (italic), Standard Ebook's use of <i> within it would be redundant on the web, I don't know if the conventions are different in EPUB. How to use <cite> is often misunderstood. Many think it can be used to identify the author of a quotation but it should only be used to name the work a quotation is from. Standard Ebook placed it inside the <blockquote> but I've also seen it placed after <blockquote>, I don't know whether both are considered correct or if it's a point of disagreement; to me, <blockquote> should contain only the quoted material itself but I understand the appeal of having the quote and its source be neatly contained within one semantic element. Using the Markdown convention of putting backticks around `code` may not be great but at least it won't be confused for the wrong actual code.

cfj 5y ago

Seeing the download attribute mentionend felt weirdly nostalgic. I wrote a short blog post about that attribute which shot up to the number one spot here on HN when I submitted it back in 2013[0]. In the nine years since that post, I have not once used it in a real project. [0]: https://news.ycombinator.com/item?id=5594791 https://news.ycombinator.com/item?id=5594791

sebazzz 5y ago

> The title Attribute On Stylesheets w3.org used to feature this, you could view the website in any of the stylesheets they offered, which were a bunch (about 5-10 if I recall correctly).

TAKEMYMONEY 5y ago

No one uses the <a> `download` attribute for the reason we stopped forcing users to open new browser windows with target="_blank", they know how to download (or open a new tab) if they want to, and it breaks or confuses more often than it works. Who's using (or even heard of) <abbr> and <dfn> without `title`? I kinda thought that was what made them most useful, providing the full unabbreviated version for example.

brewmarche 5y ago
<abbr> sounds useful for screen readers
vikingerik 5y ago
target="_blank" wasn't replaced by user behavior, it was replaced by Javascript intercepting and logging and tracking every click. That said, opening links in a new tab/window is the less-breaky approach these days, since every page that the clicks came from is a mess of infinite scroll and reactive components and all sorts of other state that gets lost by clicking to another page and trying to go back.
- deleted 5y ago
  [deleted]
mdavidn 5y ago
I used the download attribute recently to force downloads for attachments from another service, one whose Content-Disposition headers are outside my control.
clairity 5y ago
an <abbr> can be marked as a abbreviation without providing the long form via a title, if you don't know the long form but want to note it as an abbr, or if the abbr is titled previously and you're reusing the same abbr multiple times in the same context. not sure about <dfn> without a title though.
efortis 5y ago
The download attribute is helpful. For instance, my app is offline-first and the "Files" you can create with it are JSON. Therefore, it's better that they get downloaded so the user can open or drop them into the app without having to see the raw data.

zhte415 5y ago

The article didn't use the blockquote cite attribute in the blockquote that explains why it's not used much. This is perhaps internally consistent.

jer0me 5y ago

I also like the `formaction` attribute that can be added to buttons and input-buttons in forms to specify different actions. I used it to let users choose between multiple payment methods.

inopinatus 5y ago

I highly recommend re-reading the entire formal standard for technologies you work with routinely, on a roughly annual basis. It's a triple whammy of refresher, update, and niche discovery. I attribute this advice to Æleen Frisch; albeit without pulling my very dog-eared copy from the stacks, I recall that words to similar effect can be found in the epochal Essential System Administration (2002), possibly in the form of reading every manpage in your local Unix base system.

Melatonic 5y ago

Would be nice to be able to rely on HTML attributes for filtering but sadly they are just too easy to spoof

charcircuit 5y ago

Page Style is useless because there is no persistence. Even navigating to another page on that same website will reset it back to default.

maps7 5y ago

Cool. Most of these were new to me too. I will likely forget them again until I read about them in another blog post but interesting nonetheless.