Web Development

Headings: Semantics, Fluidity, and Styling — Oh My!

A few links about headings that I’ve had stored under my top hat. “Page headings don’t belong in the header” Martin Underhill: I’ll start with where the <h1> should be placed, and you’ll start to see why the <header> isn’t the right location: it’s the header for the page, and the main page content should live within the <main> element. A classic

Headings: Semantics, Fluidity, and Styling — Oh My! Read More »

Smashing Animations Part 6: Magnificent SVGs With “ And CSS Custom Properties

I explained recently how I use <symbol>, <use>, and CSS Media Queries to develop what I call adaptive SVGs. Symbols let us define an element once and then use it again and again, making SVG animations easier to maintain, more efficient, and lightweight. Since I wrote that explanation, I’ve designed and implemented new Magnificent 7

Smashing Animations Part 6: Magnificent SVGs With “ And CSS Custom Properties Read More »

Explaining the Accessible Benefits of Using Semantic HTML Elements

Here’s something you’ll spot in the wild: <div class=”btn” role=”button”>Custom Button</div> This is one of those code smells that makes me stop in my tracks because we know there’s a semantic <button> element that we can use instead. There’s a whole other thing about conflating anchors (e.g., <a class=”btn”>) and buttons, but that’s not exactly

Explaining the Accessible Benefits of Using Semantic HTML Elements Read More »