HTML

Articles and resources in the HTML category. A full list of categories is also available.

  1. An enhancement to accessible responsive tables

    Article posted 30th August 2024 in Accessibility, HTML and JavaScript

    I’ve written about accessible responsive tables before but something has been bugging me. So here’s another step to make those tables even better.

  2. Images as the first thing in a button or link

    Article posted 23rd April 2024 in Accessibility and HTML

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  3. XHTML syntax is still worth using

    Article posted 11th May 2022 in Development and HTML

    A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.

  4. Sometimes when it’s false, it’s true

    Article posted 6th May 2022 in Development and HTML

    Boolean attributes in HTML are quirky, and it’s worth knowing how they work in case you end up setting one value and getting the opposite!

  5. Safari 15.4

    Article posted 15th March 2022 in Accessibility, Apple, CSS and HTML

    macOS 12.3 and iOS 15.4 landed yesterday, and with them came Safari 15.4 and some exciting new features. Here are the five that stood out to me.

  6. If HTML and ARIA don’t allow it, it’s probably a bad idea

    Article posted 25th October 2021 in Accessibility, Design and HTML

    I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!

  7. Links, missing href attributes, and over-engineered code

    Article posted 30th September 2021 in Accessibility, Development and HTML

    Links without an href attribute are ignored by browsers; making them ‘behave’ using JavaScript, CSS, and other HTML attributes is not a solution.

  8. The trouble with back links

    Article posted 4th June 2021 in Development and HTML

    You’d think that adding a back link to a web page would be straightforward. Well, it turn out that it’s not! Let’s have a look at three ways to do it.

  9. Fixing Safari’s HTML-only Dark Mode bug

    Article posted 3rd June 2021 in Accessibility, CSS and HTML

    A bug with link text colours in Safari’s HTML-only Dark Mode theme means we need a bit of extra code. Here’s how to patch things until it’s fixed.

  10. HTML-only Dark Mode

    Article posted 2nd June 2021 in Accessibility, CSS and HTML

    When our CSS contains Dark Mode rules and the file fails to load, we’re left with plain old HTML. Luckily we can request Dark Mode in our markup!

  11. Front of the frontend

    Article posted 1st June 2021 in CSS, Development and HTML

    Frontend development use to be simple. First it was just HTML, then it was HTML, CSS and some JavaScript; then it exploded.

  12. Accessible responsive tables

    Article posted 28th May 2021 in Accessibility, CSS, Development and HTML

    Tables can be tricky to make work responsively; they can also be tricky to make accessible. Here’s a step by step guide to making your tables both!

  13. Be careful with strikethrough

    Article posted 20th April 2021 in Accessibility, Development and HTML

    Struck-through text isn’t read by screen readers. This is true of all text-level semantics, but it’s worth drawing attention to strikethough.

  14. The difference between strikethrough and del

    Article posted 14th April 2021 in Development and HTML

    Just like <em> and <i>, and <strong> and <b>, the distinction between <s> and <del> is subtle, but it’s worth knowing.

  15. When and how to use the section element

    Article posted 11th February 2021 in Accessibility and HTML

    So what on earth is a <section> element actually for? The answer isn’t as obvious as you might have hoped, but it’s definitely straightforward.

  16. The right way to use break tags in HTML

    Article posted 28th July 2020 in Development and HTML

    Break tags are often misused. I’ll demo some markup patterns to avoid them, and reveal the one and only legitimate use case I can think of.

  17. Using address in HTML won’t be problematic for much longer

    Article posted 22nd July 2020 in Accessibility, Development and HTML

    There’s a bug in Safari that adds an implicit role to <address> which causes problems for screen readers. The good news is, a fix is very close!

  18. Using horizontal rules in HTML

    Article posted 20th July 2020 in Development and HTML

    The horizontal rule is pretty widely misunderstood and often abused. It’s not an HTML element I reach for very much, but it’s worth writing about.

  19. How to change the first number of an ordered list in HTML

    Article posted 15th July 2020 in Development and HTML

    What happens when starting an ordered list at 1 doesn’t make sense? HTML has an attribute that lets you start your count at any number!

  20. Reversing an ordered list in HTML

    Article posted 14th July 2020 in Development and HTML

    When the order of a list matters, you might find yourself in a situation where you need to reverse the order. Fortunately, you can do that with HTML.

  21. Self-closing elements in HTML

    Article posted 10th July 2020 in Development and HTML

    Some elements don’t look like the others; those are self-closing elements, which are just an opening tag with no content and no closing tag.

  22. An introduction to HTML attributes

    Article posted 9th July 2020 in Development and HTML

    An HTML attribute lives on the opening tag of an element and gives that element powers it might not otherwise have had.

  23. Using image aspect ratios to avoiding janky page loading

    Article posted 6th July 2020 in Development, HTML and Performance

    Adding dimensions to images in HTML is useful again! They’re a progressive enhancement to calculate the image’s aspect ratio and prevent jank.

  24. Lazy loading images without JavaScript

    Article posted 3rd July 2020 in Development, HTML and Performance

    Non-JavaScript lazy loading is a great progressive enhancement for image-heavy pages on the web. Just a simple HTML attribute and you’re away!