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.
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.
- Don't you dare use tables for layout!
- The basics of layout with the display property
- Flexbox, the goat
- CSS Grid the almighty
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!
- Order your titles correctly
- Organize your text content
- All about images
- All about video and audio
- Doing forms correctly
- Tables are not that complicated
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.
- Make your links clear and accessible
- When to use a button and a link
- The mess of strong b em and i
- Other kinda useful semantic elements
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 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.
- Added a SVG subsection in the image page
- Added a section about reader modes in the accessibility section.
- In the interactive elements page I wrote that
<summary>could not be animated. I was wrong.