Thomasorus wiki

HTML and CSS simple tips and tricks for your website

The goal of this page is to help you with easy tricks to make the HTML of your website accessible, readable by everyone and optimized for low bandwidth.

This tips and tricks are from personal experience working as a front-end web developer specialized in UI and accessibility for the last 5 years. It might not be perfect or 100% accurate. If you find any problem, please contact me.

About accessibility

Accessibility is making your website inclusive for people with disabilities. If respecting accessibility can seem like a chore, it's actually a good way of learning good HTML practices and everything in these pages is therefore influenced by it.

The basics of HTML

This section will give your some basic knowledge and code to get started. It will also explain the basics of semantic HTML and why it's important. As everything in these pages, it's a toolbox of things I use, not a full specification rewriting, and it's heavily influenced by my own practices.

Layouts in HTML

Once you have the basics sets it's probably time to do some layouts. There are parts that you can do just in HTML, and others that need CSS. Layouts are the ones who need CSS. You can save dozens of lines of HTML by using 3 lines of CSS when you are doing layout. So don't try doing all your layout only in HTML. You'll just have a hard time doing what you want and your markup will be ugly.

Layout examples will be given through these pages, try to inspect them with your browser, reuse and tweak them to your needs.

Common elements inside your layouts

So we have our page layouts structured by semantic HTML elements. Now is the time to put some content. Text! Images! Videos! Titles! We want them all!

The inline semantic elements

What's the difference between the text semantic elements and the inline semantic elements? Well the first ones are still used to structure your content, but the second ones are used to indicate more precisely what the text inside is about.

The not very used interactive elements

Interactive elements are fully functional tools in HTML. Unfortunately they are difficult to style and most often not used that much for this reason. Still some of them are really cool.

Performance

Performance is a hot topic as the website obesity crisis keeps going. In these pages I already explained a few things to improve performance, especially in the video and image pages. Still there are a few broader topics related to performance that we should talk about.

Page updates

24/08/2020
Added a section about reader modes in the accessibility section.
22/08/2020
In the interactive elements page I wrote that <details> and <summary> could not be animated. I was wrong.