Hacker News new | ask | show | jobs
by merdaverse 1051 days ago
The problem I see with sematic web is that no matter how easy it gets, developers refuse to use it properly. I have been looking closely at the <main> tag since a browser extension of mine uses it, and although it is extremely clear what it should do in the MDN documentation (the documentation itself is a good example usage of <main>, <aside> etc.), very little sites use it properly. Even the fancy professional sites wrap all the page content, including navigation, footers and the like inside the <main> tag, which should only be for the main content of the page.

If such a simple element can't be used properly, I have no hope for all the others.

4 comments

The same developers who misuse http verbs, no less.

We shouldn't pretend that these things are contracts

> developers refuse to use it properly

literally every developer who has ever used a `<p>` tag for paragraph has used it properly. An `class="card"`. A `<link>`.

How are so many tech literate people in this thread bemoaning the "uselessness" or "failure" of semantic web? It's like if you told me "Man I wish motorvehicles were successful, it'd sure be nice to travel long distances!"

> simple element can't be used properly, I have no hope for all the others.

The first solution that comes to mind, is stricter validation. Where the browser would just refuse to render a <footer> properly unless it's structure is correct.

But we had that. Anything before HTML4 really. And it sucked even more.

So maybe browser dev-tooling that throws warning or errors when devs are Doing It Wrong?

Give me an incentive to use it. If it looks exactly the same and behaves exactly the same, "div" is half the characters of "footer" so it wins.

Personally, the argument that search engines will do nice things with semantic HTML didn't convince me back then, and I don't even see it brought up today, because search, like fish, stinks from the head, and we stopped pretending otherwise.

So that leaves accessibility. Is there a way to visualize what screen readers to with a page? I know about the tools that check for missing ARIA roles and whatnot, but that still doesn't catch me using a div when I should have used aside. And I know I won't try to navigate and use every aspect of things I make by actually using a screenreader. Call me lazy, but that's just not going to happen. But I also don't want to just give up and make it the problem of other people, either. I wanna meet halfway if possible. Any tips or tools or ideas welcome.

Maybe invest in an editor that helps you write ooter></footer> after typing f in the correct place. If amount of characters truly is your reason to avoid semantic markup.
I am not "avoiding" it, I am not going out of my way to implement something that has no effect on anything, other than taking up more characters in files.

If semantic markup is so important to you, give me a reason for why. If the reason is "because I told you so", you just added a reason not to do it.

The browser approach is best effort at rendering, rather than enforcing conventions.

And I doubt that tooling can help with all the complicated ways in which HTML is generated (React, SSR etc). I was actually surprised at how underbaked editor support for CSS is in VSCode (the most widely used frontend editor). If the most modern tooling can't understand that a CSS variable is declared in a different file and autocomplete it for me in a .vue file, I get the impression that tooling is severely lagging behind the frameworks.

I would love to just flip a switch in the browser dev tools and see html validation errors.
Me too. And I'd love to see it go beyond actual errors and suggest improvements like "a footer should typically only be inside a ..." And such.
There simply is no incentive whatsoever of using them correctly. I try to use them correctly but aside from the time spent in deciding what each element should be there were no differences at all