10 Things You Didn’t Know About HTML: a blog about the more obscure parts of HTML.
HTML is the lingua franca of the web. And just like most large and widely spoken languages, it has its jargon, idioms, and some pretty cool conventions that you might not know about. You’ve probably read about the likes of HTML5 semantic elements and microformats. But what about all their new-fangled friends like <dialog>, <time>, <keygen> and <progress>? We’ll see how far we can push plain-old HTML markup to generate everything from simple popups to graphs to audio visualizers.
Section: The <dialog> element.
HTML is a mixed bag of good ideas and bad ones. There’s the <marquee> element, which no one should ever use — but then there’s the <dialog> element, which is a very cool idea that I wish would be implemented in all browsers. The <dialog> element represents a conversation or other interaction that can be moved to and from the screen without losing its context.
For example, you could have a “Help” dialog appear on the screen and then fade out when the user clicks “OK”. You could also have a modal dialog box where the user must click “OK” before continuing (think about any software installation process that requires you to agree to terms before proceeding).
The API for <dialog> is quite simple: you can show() it, hide() it, and toggle() it. If you want to add an OK button, you can do so by adding an element with a data-action attribute set to “ok”:
<button data-action=”ok”>OK</button>
It might seem like it’s not very useful since the <dialog> element is not yet supported in all browsers, but if you already know how to use the HTML5 APIs then it will come in handy.
Section: The <time> element.
The <time> element.
The <time> element is a relatively new HTML element that creates a time, date, or datetime. It was introduced in HTML5 to better control the presentation of dates and times on web pages.
If you’re used to the way browsers render dates and times (especially in the US), you may be surprised when you first use <time>. For starters, if you haven’t specified any additional formatting, the dates will appear in your user’s local language. You can also specify custom formatting for different uses. For example, if you want to display the year with four digits instead of two, you can add “y” as a value of the datetime attribute. If you want to display just the month and day without the year, you can add “F” as a value for the datetime attribute.
Since this is such a new element and browser support isn’t great yet, it’s probably too early to use <time> on your website. However, if your site is geared towards an international audience and/or you want to control how your users see dates and times, it’s worth looking into!
The <time> element is most used with the datetime attribute to markup events
Here is an example:
<a href=”http://www.example.com/event-name">Event Name</a> will take place on <time datetime=”2012–06–14T00:00">June 14th</time>.
Section: HTML can be used for UI half as well as JavaScript
The JavaScript that is used for modern UI development is often hundreds of lines long and is a significant learning curve for new developers. The solution to this issue is HTML! When using HTML for UI development, you can use the existing DOM, CSS, and JavaScript knowledge to drive your design. You can also take advantage of modern web technologies like HTTP/2 Server Push and Web Workers to deliver an experience that’s fast and responsive.
From my experience working with numerous JavaScript-heavy applications, JavaScript is not always the right tool for building UIs. There’s a lot of cognitive overhead for new developers who are learning how to use your app. In addition, writing code that runs in a browser environment is fundamentally different from writing code that runs on the server. This means that every developer must learn two separate sets of skills: one for client-side development and one for server-side development. That’s not good for anybody.
Especially when HTML can be used for UI half as well as JavaScript, at 10% of the size and with 100% less cognitive overhead for new developers (even if they’re coming from a different language).
Takeaway: HTML is awesome, let’s use it more!
What we call HTML5 is not a single monolithic spec that defines one language — it’s more like a collection of different specifications that work together to define a protocol for describing documents and applications on the Web. Over time, this collection has grown larger and more unwieldy as new features are added (and old ones are deprecated), but that’s part of what makes it so powerful.
