Hot HTML Summer housekeeping

It’s still summer, so I’m doing a bit of Hot HTML Summer housekeeping based on what I learned from taking the web.dev Learn HTML course. Earlier in the summer I wrote a series of posts, one for each lesson in the course. In the I included a list of things to check on and update as necessary. I’ve made some good progress!

As noted in the changelog, around here I cleaned up my <section> usage, added a <nav> element to the footer links and added rel="next" and rel="previous" to some pagination links I missed the first time around.

Over at the Junk Drawer I’ve made two major changes. One to address the incorrect usage of <cite> within the WordPress quote block, and adding the lang attribute to text where I’ve used different languages.

While learning about <blockquote> and <cite> in the Text Basics module of Learn HTML I discovered that the WordPress quote block incorrectly applies the <cite> element if you use the “citation” feature.

As a refresher, <cite> belongs outside of the <blockquote> element. Since I’ve used this pretty extensively at the Junk Drawer I had to figure out to remove <cite> but still keep my design intact. It wasn’t that hard, but making the updates was a bit of a pain.

I was using the <cite> element to set the style, so moved the styles to a new class selector. Then the fun began. I had to add a new paragraph in the quote, edit it as HTML to add my class selector to the paragraph tag, then convert it to an HTML block. Sounds easy, right?

It would’ve been much easier if every time I tried to preview the HTML or just click out of the HTML editing area I didn’t get the above error. If this happens to you, don’t click the “Attempt Block Recovery” button, it doesn’t recover the block and you’re back to step one. Click on the tiny, easy to miss, options menu to the right of the button and select “convert to HTML”. Now it’s an HTML block.

Going forward it will be a lot easier as I made a reusable block that will place an HTML block within the content that includes a paragraph tag and my class selector. There’s more information about creating and using reusable blocks in the WordPress documentation.

After all that, the kicker is that even if using <cite> within <blockquote> was the correct approach, I was still using it incorrectly! From the course…

The content of the <cite> is the work, not the author.

Good thing all those references to the authors are no longer cite elements or attributes!

In the Document Structure module of the course I made note of wanting to add the language attribute at the Junk Drawer,. I mention non-US TV shows by their original title with some frequency, many times this is in a different language.

I thought I was going to have to go the “convert to HTML” route again, but found a really useful plugin called Lang Attribute for the Block Editor. This makes it easy to select text and apply the ISO language code.

The only small issue I have is that is also applies class selector and dir, the direction attribute. The upside is that you can also change the text direction to match the language, but the selection is defaulted so it’s always applied.

I’ll probably add an issue and suggest that it would be a nice addition if the class selector and direction attribute were optional, but having the redundant attributes is a small price to pay for such a useful plugin!

You can see the results in action in this post at the Junk Drawer, which may also be of interest if you like crime drama series. The first show in the list is a Swedish show (lang="sv").

I don’t know if there’s a definitively inclusive list of codes, but here are a couple of lists that I found useful. The Wikipedia list includes more languages but the Gist includes regions.

• Wikipedia, use the two letter 639-1 codes
• Gist, not a full list but includes regions

I still have one outstanding item on my Hot HTML Summer to list, and that’s to try markdown-it-table-captions. I’ll give that a shot on my starter project and if it works out well I’ll integrate it here.

I’m hoping to come up with a submissions for this year’s HTMHell Advent Calendar. The deadline is a fast approaching August 24, you should definitely consider submitting an idea!

I have two whopper older WordPress sites that I’m in the process of archiving. That includes moving a slimmed down version of each to Eleventy. I’ve already spent a fair amount of time working out the process and overall design, but I’ll probably be spending most of my time on that for the foreseeable future.

Other than that I’ll be doing my usual fiddling here and at the Junk Drawer. I’d like to clean up the Projects section of this site before the end of the year. Just saying that out loud to up the chances of it happening.