A Blog Post With Every HTML Element by Patrick Weaver
I enjoyed this self-documenting journey of exploration.
The search element | scottohara.me
I’ve already add the search element to thesession.org, but while browser support is still rolling out, I’m being extra verbose:
<search role="search">
...
</search>Brought to you by the department of redunancy department.
I’ll remove the ARIA role once browsers are all on board. As Scott says:
Please be aware that this element landing in the HTML spec today does not mean it is available in browsers today. Issues have been filed to implement the search element in the major browsers, including the necessary accessibility mappings. Keep this in mind before you get all super excited and willy nilly add this new element to your pages.
Related links
30 Days of HTML
Receive one email a day for 30 days, each featuring at least one HTML element.
Right up my alley!
How Web Components Are Used at GitHub and Salesforce – The New Stack
I’m very taken with Github’s tab-container element—this is exactly how I think web components should be designed!
The Importance of HTML – Jerry Jones
You’re not going to get a Webby Award or thousands of views on Codepen for how amazingly crafted your HTML is. You’ll need to be OK going unrecognized for your work. But know that every time I use a screen reader or keyboard on a site and it works correctly, I have a little spark of joy.
HTML Tutorial for Beginners 101 (Including HTML5 Tags) - WebsiteSetup
A really great one-page guide to HTML from Bruce. I like his performance-focused intro:
If your site is based on good HTML, it will load fast. Browsers incrementally render HTML—that is, they will display a partially downloaded web page to the user while the browser awaits the remaining files from the server.
Modern fashionable development techniques, such as React, require a lot of JavaScript to be sent to the user. When it’s all downloaded, the user’s device must parse and execute the JavaScript before it can even start to construct the page. On a slow network, or on a cheaper, low-powered device, this can result in an excruciatingly slow load and is a heavy drain on the battery.
Related posts
Displaying HTML web components
You might want to use `display: contents` …maybe.
Extending
is=”too-hard”
Responsible Web Components
Extending the wheel, instead of reinventing it.
aria-live
An exception to my general rule that ARIA attributes should be added with JavaScript.
Accessible interactions
Abstracting common interaction patterns as a starting point for accessible components.