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! :tealheart:

RIP my notifications. 😂
But glad people are hearing the message!

If you are not sure what/how to use semantic html, please click on the element you need info on in this great article:

Happy coding!

Show thread

@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!)


> I know that standard semantic elements usually have really frustrating default styles

not really? not in my experience? main/nav/aside and all those have no styles. ul/li look like bulleted lists. this seems fine.

probably the search terms you're looking for are "css reset", but be sure that the one that you use doesn't remove the tab key focus indicator.

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

@someonetellmetosleep @dzuk I love definition lists too, I started using them recently. :)

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

@thomasorus I am not a dev but I don't know how to proper align stuff without a table, with tables it's so much more easier UwU
@thomasorus for example vertical alignment
I don't know how to do that without a table uwu
@amael @thomasorus as I am learning myself for fun -> thank you for mentioning stuff ^w^

@isi @amael If you are learning for fun then I have some good games for you!

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:

As for grid, this game can teach you a lot too:

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!

@isi @thomasorus

position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

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 🤩

@pixelcode @thomasorus I've tried stuff like that already but it broke for using multiple buttons for example :blobcatcry:

@isi @thomasorus If you want to center multiple elements don't align each of them itself but create a parent div (or span or whatever) which contains them.

@isi @thomasorus You can also try Bootstrap. It's a CSS framework created for developers who don't have enough time, resources or knowledge to design their frontend themselves. There are plenty of tutorials on YouTube (Invidious)

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

@resynth1943 Sorry I don't know enough about to help you in this. :(

@thomasorus It's actually

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.

@thomasorus But italics doesn't always mean emphasis, that's only one of its possible functions. So in cases like "Kim only kissed <em>Ashley</em>", "Kim only <em>kissed</em> Ashley", em makes sense to use instead of i.

But italics, for instance, are often used for the titles of things: "J.R.R. Tolkien wrote <i>The Hobbit</i>." And we don't want this to be translated as emphasis in that case: that is, we don't want screen readers to treat italicised titles as emphasised.

And italics and emphasis could be stacked, since their functions are disjoint: "J.R.R. Tolkien didn't write <i>War and Peace</i>, he wrote <em><i>The Hobbit</i></em>."

And, of course, emphasis isn't always realised visually as italics (could be instead bold or caps or smallcaps or whatever).

The other thing is that I'm not entirely surely how em and strong differ semantically. And how do screen readers tend to render <em>word</em> vs <strong>word</strong>?
Sign in to participate in the conversation

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.