The beauty of HTML

HTML5

HTML is pretty great. The HTML we use today is fundamentally the same as it was when it was first introduced by Tim Berners-Lee in the early 90s. The only difference now is that it’s significantly better.

In the last newsletter, I wrote about how custom solutions have historically filled the gap for functionality that was missing from HTML. Then, as that functionality gains interest, it often becomes part of the HTML Living Standard, replacing the need for a custom solution.

When those new HTML standards become supported in modern browsers, they turn complex custom solutions into trivial tasks. JavaScript and special libraries are no longer necessary. Instead, all that’s typically needed are HTML elements and attributes.

In this issue, I discuss the enjoyment and utility of discovering new tags, why HTML is the best method for creating accessible sites, and how to get alerts when Google makes changes to rich result requirements.

Discovering new tags

HTML brackets

The wonderful thing about a living standard is that it’s always growing and adapting. Existing HTML elements and attributes frequently get updated, while others get added as entirely new tags. And the most exciting moments are when more contemporary HTML standards become supported by all or most modern browsers.

Early last year, I published a Coywolf Pro article on semantic HTML elements rarely used but should be. I shared them because most people don’t know about them or never consider using them, yet they can improve UX, accessibility, and even search visibility.

There are a lot of HTML tags, and I struggle to know all of them. Sometimes I stumble upon standards that have been around for years and have been supported by all major browsers, but it’s the first I’ve heard of them. That happened this past week when I discovered the download attribute.

The download attribute can be applied to links when you want visitors to download an image, PDF, or other file types instead of viewing it in the browser. Here is an HTML example for downloading an image:

<a href=“image-name.jpg" download>

You can also specify a value for the attribute that will save it with a different file name. For example, this code would save the PDF with the file name report.pdf:

<a href=“12-33-research.pdf” download=“report.pdf”>

While download works with all major browsers, its functionality varies depending on the browser being used. For example, it only works on Chrome and Firefox if the file is on the same-origin.

Making things more accessible

Number keyboard

While it’s unknown if search engines derive meaning from semantic HTML used to specify page regions, we do know that some browsers and assistive technologies do rely on them. Additionally, labeling regions with ARIA attributes can make a site significantly easier to access and use for everyone. All of this is done with only HTML elements and attributes.

Making inputs more accessible is also accomplished with HTML. Proper use of elements like the label tag can go a long way in making a form usable for all people. As form inputs become more complex, HTML adjusts gracefully.

The GOV.UK Design System team discovered that using input="number" – a method to make the number input keyword appear on mobile devices – wasn’t well supported by assistive technology like NVDA and Dragon Naturally Speaking. The root of the problem was semantic.

The number type should only be used for amounts, and text should be used for any number that’s not considered an amount. However, web developers were using number regardless because they wanted the number keyword to appear.

In a “hold my 🍺 moment,” the GOV.UK Design System team showed how HTML could provide the best of both worlds. Adding the pattern and inputmode attributes to the text input makes it become accessible and display the number keyboard on mobile devices.

<input type="text" pattern="[0-9]*" inputmode="numeric">

Standardizing the solution

The catalyst for this week’s newsletter was Terence Eden’s article on the unreasonable effectiveness of simple HTML. It served as a reminder of HTML’s staying power and long-term compatibility. Unlike custom solutions that may stop working in the future, take the time to research if the functionality you need can be accomplished with only HTML.

Cool find of the week: Schema Alerts

Sitebulb debuted a free service that will email you when changes are made to Schema structured data. I’ve been wanting something like this for awhile. Like HTML, the Schema vocabulary and requirements are constantly changing, as are Google’s requirements for rich results. So this is a welcome new resource.

Structured Data Change History Timeline