Hot HTML Summer: Wrap up

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer.

All good things must come to an end as the saying goes. But much like energy or matter, our Hot HTML Summer will not end, it will change from one form to another.

I’ve completed the web.dev Learn HTML course, and indeed it’s been a fun Hot HTML Summer. The fun isn’t ending there, now I can take all the things I learned and apply them. In fact, I’ve now got a boat load of things of double check, update and improve from all the things I learned along the way.

I came up a big list of things to check, things to learn more about and things to try to find in the wild.

In no particular order…

• Make sure I’m using <section> correctly, I can think of a few places where I know I’m not.
• See if I can use microdata to improve reader view.
• Check for instances of using different languages within the body of text and apply the language attribute.
• Add <nav> to the footer links on this site.
• Check for calling SVGs with image element, if so add role="img" (pretty sure I haven’t done this anywhere but will check anyway).
• Test markdown-it-table-captions to see if it’s a good way to add captions to tables in my Eleventy sites.
• Add rel="next" and rel="prev" attributes to pagination links (already added on this site).
• Fix all the incorrect instances of <cite> that the WordPress quote block incorrectly applies to <blockquote> at the Junk Drawer.
• Find a reason to use <data>.

• Element interfaces
• Aria roles

Scavenger hunt!

• rel="author"
• rel="bookmark"
• Form controls with more than one label (even Mr. HTMHell didn’t know this one!)

There’s a lot to like about this course. It’s broken down into easy to digest pieces. There are a lot of good tips and best practices. Modules reinforce things learned in previous modules without explicitly saying it, and there’s plenty of backstory and tea spilling.

The web would be a much better place if fullstack, framework-focused developers used Learn HTML to better understand the basics, but we all can learn something from the course. Course creator Estelle Weyl noted that the course was targeted towards beginners, but created for all skill levels, including “super-advanced people who don’t realize that they don’t know things”. Indeed.

In his recent CSS Day talk, That’s not how I wrote CSS 3 years ago, Manuel Matuzović mentioned that when he wrote 100 Days or More Less Modern CSS one of the biggest things he learned was the basics. He goes on to list a few examples where the thought he understood how something worked, but was wrong. I had the exact same experience here. There were things I thought I knew but didn’t, things I didn’t know at all, and things where I didn’t know the proper name.

Most of all, it was fun to learn from a place of comfort, building on something I already know. With only a few gaps, I’ve been writing HTML since 1996. I’m not employed as a developer, but I write production ready HTML and CSS at my job (delivering my designs in code to be integrated into whatever stack). Before this course I was confident in my HTML skills, and I learned a LOT.

I’ve noticed plenty of HTML content so far this summer. Here’s what I’ve seen so far.

• 4 More HTML Concepts You Didn’t Know
• Fieldsets, Legends and Screen Readers again
• Form and search landmarks
• Learn HTML by Building a Cat Photo App (YouTube)
• Implementing Tic Tac Toe with 170mb of HTML - no JS or CSS
• O dialog focus, where art thou?
• The article element and screen readers
• The case against self-closing tags in HTML
• The details element and in-page search
• You can also help design the inaugural State of HTML survey

Thanks for all the boosting, favoriting, sharing, general words of encouragement, and camaraderie along the way. I decided to do this as a series of posts to help me absorb the lessons and refer back to my notes in the future. It’s nice to know there were parts or posts that resonated with people!

If I had to sum up the course, it would be a slightly updated version of something I mentioned in the Navigation module post, “come for all the things you don’t know about HTML, stay for the tips on how use it more effectively”. In case it’s not yet clear, I highly recommend the course.

I’ll make an occasional post with updates on my punch list. Until then, enjoy the rest of your Hot HTML Summer.