Hey devs, please use semantic html. This is important!
When listing things, use ul/li! When writing things, use p! When adding navigation, use nav! When putting the main part of your website inside a div, use main! Please use h1, h2, h3 for your titles! Don't use table for layout, they are for data!
Screen readers users have shortcuts to jump to all those parts of your website instead of reading it from top to bottom. But it only works with semantic html. So please help them!
@thomasorus brb, rewriting my website's theme.
Thanks for pointing this out!
@thomasorus It's the price of being a web celeb :D
I started working on improving my semantic HTML (my current solution is horrific, in hindsight!) and I'm testing changes locally, but there's still a bunch of things to finish. The article will surely help.
You definitely should remove boost/favourite notifications, though :P
@raelzero I can't cross the street anymore without a kid pointing the finger at me and saying "Look mom, he's doing semantic html"! When will I recover my privacy?🤡
@thomasorus I would also add that like, as a dev myself I know that standard semantic elements usually have really frustrating default styles, but it pays off if you spend a bit of time to come up with a little toolkit of styles that lets you clear/manage that, you can get over it. (And when you've got that out of the way, it helps your HTML be more readable too!)
@dzuk @thomasorus A good example of a semantic element with terrible default styles is the definition list, which looks so bad by default that everyone apparently just collectively glanced at it once and dismissed it out of disgust so it faded into obscurity, but it's actually really useful because it pairs an item with a description in a list so it's worth styling and using. I have a few on my website and they're much better than what I had before.
@thomasorus also, even if you work for a bad company that doesn't care about accessibility, using semantic HTML correctly will still make your job easier
@fool Yeah it's way easier to reread someone else's code when semantics are correctly done.
@thomasorus I was talking about doing this thing with someone and they said "I just don't always think to optimize SEO" and I immediately deflated and lost the will to keep talking about it.
We gotta stop thinking of this stuff as marketing tricks. It's an accessibility feature!
@sandrockcstm Yeah accessibility is still seen by a lot of designers or marketing people as something that prevents them to do what they want, but most of the time it's not the case. From my experience accessibility prevents bad design decisions more than it prevents good ones happening.
Basically the goto for a lot of people now is flex. Once you know it's soooo simple to use you put it everywhere. You can learn it here: https://flexboxfroggy.com/
As for grid, this game can teach you a lot too: https://cssgridgarden.com/#
Flex and Grid are complementary and does not have the same purpose. It might take a bit of time to learn to use them but you won't regret it!
That means: Put the top left corner of your element to the center of the page or the parent and pull the element to the top left by 50% of its own height and width so that your element's center is now at 50% 50%.
I love this transform-translate 🤩
@thomasorus does the use of <em> and <strong> for mere styling purposes instead of <i> and <b> cause any issues, as far as you know?
@dp Not in my experience, you probably can use them without problem.
@thomasorus Thank you for sharing this! It's perhaps seemingly not a big difference to some, but it really does help a lot with screen reader navigation. Websites with headings really shouldn't be a thing. :(
So, while I can't speak for all the other blind people, if this convinces anyone to update their website, I'll definitely be thankful.
"This document has been organized by topic rather than by the grammar of HTML. Topics are grouped into three categories: structure, presentation, and interactivity.
the model reflects the HTML Working Group's experience that separating a document's structure from its presentation produces more effective and maintainable documents."
Although superseded, it still describes best the purpose of html: structuring the document.
CSS is for presentation
"HTML is the World Wide Web’s core markup language. Originally, HTML was primarily designed as a language for semantically describing scientific documents. Its general design, however, has enabled it to be adapted, over the subsequent years, to describe a number of other types of documents and even applications."
Shows you it's still accurate.
@thomasorus what about scheme.org
@resynth1943 Sorry I don't know enough about scheme.org to help you in this. :(
@thomasorus It's actually schema.org.
You don't know what Schema is? Surprised, it's another initiative to create semantic functionality for HTML. You can drop it in easily, without affecting anything.
Check it out.
@emacsomancer Use em! Em means emphasis, but i just means test in italic, but what does italic text means when you can’t read it? It’s the same for strong and b.
Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.