HTML 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.

I need to go fast

Then visit the TL;DR page, where a set of sensible defaults will be given to you for a basic website.

If you're not in a hurry, continue below.

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.

Page updates

03/11/2020
Added a SVG subsection in the image page
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.

Initially published: November 23rd, 2020
Generated: November 1st, 2022
Statistics for: HTML tips Time spent
Time spent
27 hours total
Started
week 32 of 2020
Last update
week 34 of 2020
All times entries for this page
YearWeekHours
2020343
20203321
2020323