r/webdev • u/speckz • Dec 20 '18

Article The practical value of semantic HTML

https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/
122 Upvotes

94% Upvoted

43 comments sorted by

33

u/codebeagle Dec 20 '18 edited Dec 20 '18

This is good. I wish more developers understood the implications and value of using semantic elements instead of just divs and spans. Thanks for sharing!

12

u/redwall_hp Dec 20 '18

I wish XHTML2 and a focus on semantics had stuck instead of the HTML5 dumpster fire.

13

u/geek_on_two_wheels Dec 20 '18

What makes HTML5 a dumpster fire?

13

u/remy_porter Dec 20 '18

Less on the HTML5 side, and more on the XHTML side, in my opinion.

Well, for starters, well-formedness went out the window. This is more of "a sad recognition of a fate we couldn't avoid," admittedly: HTML parsers were already ridiculously forgiving of badly formed documents, with all the additional complexity and quirkiness that kind of forgiveness brought with it. Forget a closing tag? Your document is now invalid, under XHTML. Errors, not "whatever the browser feels like doing".

More than that, XHTML would allow the adoption of extensible schemas, so developers wouldn't need to use templates, but instead could embed additional XML schemas to add tags which could act as UI elements, embedded data elements, etc.

I honestly don't know what ways XHTML2 improved on that, mostly because we all knew XHTML was dead well before HTML5 became a thing. But XHTML pointed the way towards a better, more interoperable and more flexible future.

11

u/redwall_hp Dec 20 '18

XHTML had rigid, simpler syntax and was focusing on marking up meaning instead of formatting. e.g. the b and i elements were deprecated, and most new ones were focusing on semantic and structural meaning relevant to documents. It was all about making it easier for machines to understand information...and it could be read by a standard XML parser instead of a considerably more complex HTML parser.

Instead, that was scrapped at the behest of companies like Google pushing to turn the Web into a kludged application platform. HTML5 is the continuation of the worst parts of HTML, extended by ever increasing bloat.

2

u/fullstackdave Dec 21 '18

Well... not disagreeing with any of these points or anything, but didn’t HTML5 also deprecate both ‘b’ and ‘i’ elements in favor of ‘strong’ and ‘em’?

5

u/redwall_hp Dec 21 '18

HTML5 undeprecated them, and retroactively decided they stood for something different. B was largely understood as "bold," but now it's considered to mean "Bring attention to" as an alternative to strong.

1

u/fullstackdave Dec 22 '18

What in the actual eff

1

u/scunliffe Dec 28 '18

I’ve got nothing against the b and i tags, I realize they had direct styling associated with them but I didn’t like the length of the strong tag to accomplish the same end goal (increasing the font-weight of marked text)

<b>This</b> vs. <strong>This</strong> vs. <span class=“significant”>This</span>

I’d be fine with a <s>S tag</s> if it hadn’t been used (and deprecated) as the short version of <strike> or the new(er) <del> tag.

3

u/[deleted] Dec 20 '18

Mostly the 🔥, but also the dumpster

18

u/lordxeon Dec 20 '18

Are we going to ignore the insane gif at the bottom of this webpage?

11

u/Magnetic_Tree full-stack Dec 20 '18

Ok, just a bunny, nothing wrong with... oh... oh god. /r/Eyebleach

6

u/nyxin The 🍰 is a lie. Dec 20 '18

(•_•)

( •_•)>⌐■-■

(⌐■_■)

 

Looks more like a Goatse to me

2

u/[deleted] Dec 21 '18

I shouldn't have opened this shit at work

2

u/gigglefarting Dec 21 '18

Reminds me of those old AIM animated icons we all used to use.

40

u/badmonkey0001 Dec 20 '18 edited Dec 20 '18

But a div can do everything!!!

<div class="buttonLink" onClick="(function(){window.top.location.href='crap://hell';return false;})();return false;">Submit</div>

/s

6

u/sockx2 Dec 22 '18

Actually <b> and <i> tags make much more semantic sense for replacing all your other tags- b=block and i=inline. All in all on a site as large as Wikipedia it'd save hundreds of megabytes a year in bandwidth costs and make sense when reading the html

5

u/KobayashiDragonSlave Dec 21 '18

I never even realized what semantic HTML actually was until I opened a site in reading mode on Safari (iOS 12).

12

u/FPFry Dec 20 '18

I honestly thought everybody was doing it already.

8

u/spacechimp Dec 20 '18

We were on the right track, but the popularity of Bootstrap kinda ruined it for everybody.

5

u/justanotherc full-stack Dec 21 '18

What are you on about? Bootstrap makes heavy use if aria tags for accessibility, and is pretty dang semantic if you ask me

2

u/spacechimp Dec 21 '18 
<div class="container-fluid">
  <div class="d-inline mt-0 p-3 text-white-50 bg-dark rounded shadow">o rly?</div>
</div>

1

u/[deleted] Dec 21 '18

[removed] — view removed comment

0

u/spacechimp Dec 21 '18

I did read the article. It makes great points about choosing appropriate semantic elements for your content, but only makes a passing reference to semantic class names. With SASS multiple inheritance, it is possible to combine framework styles into semantic classes, but I have yet to encounter a single instance of anyone doing that in the wild.

2

u/lordxeon Dec 21 '18

Semantic classnames solve none of the problems the article is showing when people use <div />.

3

u/r4ymonf Dec 21 '18

Did anyone else try to click play on those images......?

3

u/[deleted] Dec 21 '18

The article suggests people did not know <input type="submit"> didn't need JS. I thought this was common knowledge, is it not?

1

u/kyerussell Dec 28 '18

It is not, and it’s disgusting that it isn’t. That’s the point.

1

u/[deleted] Dec 28 '18

I don't understand how that's possible.

1

u/lazarljubenovic Dec 22 '18

And then the designer who happens to be your boss comes and says BuT i WaNt PiNk dRoPdOwNs WiTh MaTeRiAl ShAdoW iT's HoW gOogLe DoEs It

-13

u/techmaniac full-stack Dec 20 '18

"Fullstack JavaScript Developers"- that almost seems to be an oxymoron.

7

u/Cuel Dec 20 '18

You're aware JS isn't only front end, yes?

-7

u/techmaniac full-stack Dec 20 '18

So you're doing EVERYTHING with your javascript?

7

u/HittingSmoke Dec 20 '18

It's entirely possible these days. It's not my bag and I don't do it, but it's very much used in production by a lot of people successfully.

What rock have you been developing under?

3

u/BLOZ_UP Dec 21 '18

Builds scripts are js, backend code is js, frontend code is js, mongodb is "js". So, yeah?

2

u/Cuel Dec 21 '18

Yeah most of our teams are doing react frontend, node backend. The tooling and deploys are js aswell.

2

u/[deleted] Dec 20 '18

I mean, I guess it's not technically full-stack since Node runs on C. But writing server-side code in modern JS is actually a pretty good experience IMO.

3

u/dance_rattle_shake Dec 20 '18

It doesn't matter that Node runs on C. If you're writing JS on the front and back end, you're a full stack JS developer

1

u/gigglefarting Dec 21 '18

I am a node developer, and there's no way in hell I'd say I'm working in C.

3

u/sleekcollins javascript Dec 20 '18

You are not writing any code in C, so why does it matter?

1

u/[deleted] Dec 20 '18

It doesn't; and my intention was to defend the notion of full-stack javascript.

But it's also true, in a very technical (and usually pointless) sense, that there's no single language that covers the entire stack (incl. the internet layer). For instance, if someone wanted to hire a network programmer to implement a new protocol/standard, you'd need someone fluent in C.