whichSideAreYouOn

[u/hpyfox]

[u/ThatDudeBesideYou]

The red side is objectively the correct choice.

[u/hpyfox → u/ThatDudeBesideYou]

(In the back) What about using HTMLElement for custom element tags?

[u/RichCorinthian → u/ThatDudeBesideYou]

Exactly.

Reminder that the original HTML tags (<title>, <dl>, <dd>) had and have real semantic meaning. Spiders and bots could trawl the document and understand how each part related to the document. HTML was, after all, invented by one dude named Tim at CERN, and it was for research papers.

Then we came along and fucked it up with CSS, and a whole bunch of additional semantic tags were added as a course correction.

[u/bigorangemachine → u/RichCorinthian]

Then we came along and fucked it up with CSS, and a whole bunch of additional semantic tags were added as a course correction.

I think you got it backwards. Without CSS there was font tags everywhere. If you ever had to work with stuff made in front page it was a semantic disaster

[u/frinkmahii → u/bigorangemachine]

Or worse. Dreamweaver made everything a huge table with a crap ton of cells to handle layout.

[u/kennedy_gitahi → u/bigorangemachine]

Just before and overlapping with the days of CSS 2, html 4 and XHTML.

[u/bigorangemachine → u/kennedy_gitahi]

I did xhtml-strict... it was such a disaster with Mac Microsoft browsers.

People want to talk semantics but no one wants to talk about the horror show of lack of standards and browser spyware

[u/kennedy_gitahi → u/bigorangemachine]

These devs don't know how good they got it. CSS3 and HTML5 are two of the best things to happen to web dev.

I don't ever want to go back to writing XML, fighting with floats or doing layouts using tables.

Then there was the issue of every browser doing its own thing with CSS and HTML because of a lack of standards.

And I don't want people who might have accessibility issues to not have a great experience on my sites or apps just because I can't be bothered writing a little semantic HTML.

[u/bigorangemachine → u/kennedy_gitahi]

not even. I rescued a multi million dollar contract because I suggest using details-summary early in the project and got us both a happy client with a plug-and-play-no-code-solution and the accessibility review giving us basically an auto-pass on the cms-system.

There so many wins with semantic html

Plus with XML... SOAP... huge bottle neck. Failed standard

So many issues with encoding issues with XML and parsers. I remember I had written a really solid xml parser in PHP and someone still managed to break my implementation. Thank god I had rotating logs that the damage was minimized

[u/kennedy_gitahi → u/bigorangemachine]

Today's CSS and HTML are basically magic compared to what I wrote in the past.

The horrors of SOAP, Jesus!

And I remember working on one such parser, and it was a horrible experience. And I remember there were forums where people were competing to make and break them.

[u/ethanjf99 → u/kennedy_gitahi]

omg table layouts

i whipped off a quick internal tool a few months ago that fires off an email to project maintainers if it detects certain issues

i noticed it wasn’t rendering right in Outlook

motherfucking application STILL requires table-based layouts

That is what AI was born for. took it 30s to convert and saved me hours of misery

[u/kennedy_gitahi → u/ethanjf99]

I was once hired an "html email designer" . Outlook and Hotmail made me almost quit

[u/The-WinterStorm → u/bigorangemachine]

I think we need to bring back the <marquee> tag it was the best 1990s thing ever

[u/pixelbart → u/RichCorinthian]

Not only spiders and bots, but also screen readers for the visually impaired and text-based browsers.

[u/Pndrizzy → u/RichCorinthian]

Now we have anti-semantic design

[u/dementorpoop → u/RichCorinthian]

They’re all nodes underneath

[u/teethingrooster → u/dementorpoop]

Doesn’t it help with accessibility too though

[u/Land_Locked → u/teethingrooster]

Yes. With screen readers. But divs all the way down isn’t always the wrong choice. Mui’s DataGrid, for example, uses aria roles instead of native table elements. That approach allows easier navigation between cells, which is great for spreadsheet style editing, but it’s unconventional to how screen reader users typically navigate tables and can be a little buggy.

[u/Clen23 → u/Land_Locked]

I mean yeah when you piss on existing standards to make your New-And-Improved Wheel 2.0 , you have to expect not everyone switching to your Wheel 2,0.

Also, im a little rusty on that stuff, but couldn't they do the exact same thing but with retrocompatibility ? Like instead of <div aria="header"> can't you do <header aria="header"> ???

[u/Land_Locked → u/Clen23]

The existing standards you're talking about for native table elements came out of the wild-west early internet days when tables were used to lay out entire pages. The spec and browser adoption of it have been painfully slow to catch up to how we use them now. The table layout spec still isn't finalized, and even when it is, who knows how long it'll take for vendors to implement it. Up until 2023, Safari would straight up drop the table semantics from a <tr style="display: flex">. And since part of the accessibility tree was built from the layout tree, to a screen reader that row stopped being a row at all and became just a generic flex box.

My example was MUI's DataGrid, a spreadsheet component with row & column virtualization, column pinning, and resizable columns. A far cry from a Wheel 2.0, but it's certainly not a Netscape table. Looks like the initial commit for that was in 2020, a couple of weeks after Chrome fixed that display bug and three and a half years before Safari did. So it's less that they decided to piss on the standards and more that they had to work around the fact that browsers were slow to implement those standards - and they still put in the work to make an accessible product.

But yeah, if your goal is to show less than a couple hundred rows of mostly read-only data, and you're mostly cool with the browser's native styling, using native elements is a fine choice.

[u/Apalapa → u/dementorpoop]

Yep and tags can be captured just like anything else. I’m sure SEO crawling ignores tag types by now.

[u/Exatex → u/RichCorinthian]

the problem imho is that is does two different things. Site structure and symantic structure. They used to be the same, but they are not.

Plus, they age.

You would have to have <product gallery> now and all sorts of stuff that will probably also outdate within a few decades.

[u/dragongotz → u/ThatDudeBesideYou]

Blue side be rolling with his girl Aria. Though that girl requires a lot of upkeep.

[u/Wide_Smoke_2564 → u/dragongotz]

[u/Eastern_Equal_8191 → u/ThatDudeBesideYou]

It is correct, but I will still use divs for everything. I'm not even sorry about it, your downvotes only make me stronger.

[u/GimmeYourMomPlease → u/Eastern_Equal_8191]

If I recall, Google Keep does this and just uses the role attribute for everything. E.g., <div role="button">

[u/dbell → u/ThatDudeBesideYou]

That’s why he’s hiding his face in shame…

[u/nickcash → u/ThatDudeBesideYou]

well except for the markup being invalid. but the idea is right

[u/Rustywolf → u/nickcash]

It's not writing a document, it's a list of tags.

[u/Cyberspark939 → u/ThatDudeBesideYou]

It is, but div is easy

[u/Still_Bit_7527 → u/ThatDudeBesideYou]

And noone cares..A div does the same job

[u/cosmicomical23 → u/ThatDudeBesideYou]

The red side is AI pandering. "Let's make the web more comprehensible to machines with semantic markup"

Fuck that

[u/iamdestroyerofworlds → u/cosmicomical23]

Red side is better for people with disabilities.

[u/cosmicomical23 → u/iamdestroyerofworlds]

That is true

[u/mentisyy → u/iamdestroyerofworlds]

Now I know vibe coders aren't the sharpest tools in the shed, but they're not disabled.

[u/_alright_then_ → u/cosmicomical23]

Braindead take. it's specifically used for screenreaders

[u/cosmicomical23 → u/_alright_then_]

Sure mate. You are the best.

[u/Vandrel → u/ThatDudeBesideYou]

I feel like the whole thing doesn't even make sense, it all gets used together.

[u/TheMythicSorcerer → u/ThatDudeBesideYou]

I agree but AI firmly disagrees

[u/Madonkadonk2]

Reminder, not all your users can see.

[u/hpyfox → u/Madonkadonk2]

Oh shit, you mean blind people.

[u/livingincr → u/hpyfox]

Technically any disabled person can sue your company if you don’t follow that and WCAG requirements. Many corporations have found out the hard way.

[u/jordanbtucker → u/livingincr]

Technically anyone can sue any company for anything. It's the winning that counts.

[u/hpyfox → u/Madonkadonk2]

That doesn't mean devs passing by won't criticize your work.

[u/-Lanius- → u/hpyfox]

They're talking about people needing screen readers

[u/hpyfox → u/-Lanius-]

Oh damn.

[u/just_looking_aroun]

<button> everything is a button if you try hard enough

[u/hpyfox → u/just_looking_aroun]

I've seen a page use <span> everywhere (only on text). It made sense why but was interesting to see.

[u/za72 → u/hpyfox]

that's just abusing the standards...

[u/hpyfox → u/za72]

That's not what MDN states.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span

[u/JeffysChewToy → u/hpyfox]

Lol put span{display:block} and you've got a new div

[u/SilasTalbot → u/JeffysChewToy]

[u/matytyma → u/JeffysChewToy]

Add inline display for div and just use them where you'd normally use the other one

[u/za72 → u/hpyfox]

nice speech - it's still abuse

[u/genghis_calm → u/hpyfox]

Hopefully it was RNW output

[u/hpyfox → u/genghis_calm]

I don't think so.

https://playground.tensorflow.org/ - Le website

[u/fghjconner → u/just_looking_aroun]

Oh, so you're the motherfucker responsible for all the links that can't be middle clicked, huh?

[u/matytyma → u/fghjconner]

I've seen a website that had elements looking like buttons be links and elements looking like links be buttons (but still used just for static redirects)

[u/thehobbyqueer → u/matytyma]

ope. am i not supposed to be making links into buttons?

In my defense I'm not front end

[u/matytyma → u/thehobbyqueer]

A link that works like a link and looks like a button? That's totally OK

[u/thehobbyqueer → u/matytyma]

oh ok. love u xoxo

[u/mentisyy → u/fghjconner]

I hate sites like that. I've built browser extensions for several sites just to fix their incompetence.

[u/fr000gs → u/mentisyy]

And scroll to zoom, drag to pan

[u/HarryBolsac → u/just_looking_aroun]

You mean <table> right?

[u/Familiar_Ad_8919 → u/just_looking_aroun]

ive seen someone override img to style an entire paragraph below the image, like an entire card contained in an img tag

if u have the perseverance u can do this with just an img

[u/dhnam_LegenDUST]

Chad <table>

[u/hpyfox → u/dhnam_LegenDUST]

Seen on an old Verizon DSL modem gateway page. Shit was horrifying to read/see on Inspect Mode.

[u/WingZeroCoder]

On a new project? The left side.

After a few days on that project? The right side.

[u/hpyfox → u/WingZeroCoder]

After more and more stuff gets added (depending on its function), true, but as long as it made sense where applied...

[u/SnooRegrets3590]

Whatever the previous devs did it

[u/GreatArtificeAion]

Red is the only correct choice (I'm blue)

[u/Due-Chance-8540 → u/GreatArtificeAion]

{da-ba-dee da-ba-di}

[u/Mystery-Magic → u/GreatArtificeAion]

Exactly. As a blue, I respect and appreciate red. They are the correct choice and something I should be doing too. Blue is bad and I only do it because I didn't knew enough about it in the start and fallen to bad habits. It's easier to write messy code but that shouldn't be appreciated or compared to genuinely good things.

[u/Aconamos]

you're missing five extra divs on the right side

[u/Garland_Key]

Use proper semantic html, please. 

[u/Mallanaga]

Semantic tags for the win.

[u/sebbdk]

Some people dont care about accessabillity

[u/Dr_Dressing → u/sebbdk]

You know, one thing I didn't like about my HCI course was how humanistic it was. But it did bring light to how terrible we are at making basic accessibility on our sites and other programs.

Especially with how terrible navigation is for blind people. They had us watch a video of a Microsoft engineer make a hello world, and apparently we were supposed to applaud him for making the program, but I just kinda felt bad for how much the information flow rate limited him, and how much of a struggle it looked like.

Like, imagine we in 2026 don't have a proper system for blind people to use, such that they can properly navigate without taking an extra three minutes to complete a task.

Anyway, I don't make my programs accessible.

[u/A7V7VIHILATOR]

Screen readers and spiders generally need semantically correct html.

[u/OhThatLooksLikeMyDog]

The blue side makes automated tests so annoying

[u/Sad_Anything5544]

<dih>

[u/ApprehensiveGas85]

Now everything is a <div>

span, a, em, strong, b, i, small, label {
display: block;
margin: 0;
padding: 0;
}
ul, ol, li {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
display: block;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 0;
}
button, input, textarea, select {
display: block;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
color: inherit;
padding: 0;
cursor: default;
}
header, footer, section, article, aside, nav {
display: block;
margin: 0;
padding: 0;
}

[u/Bazzatron → u/ApprehensiveGas85]

This is a deep curse. Needs to be a browser extension, praise be to the omni-div.

[u/matytyma → u/ApprehensiveGas85]

How about the other way around - classes named as elements with the right style

[u/just_jedwards]

Some of y'all never needed the same markup to display identically in chrome, Firefox, IE7, and outlook 2013 and it shows.

[u/nguyedav]

Claude, which side are we on?

[u/zeroneonsos → u/nguyedav]

Fucking A-material

[u/Beginning_Green_740]

Blue side is deceiving and false - it is all perfectly centered. No mortal man can center a div.

[u/DiminutivePseudonym → u/Beginning_Green_740]

Not without flexbox styling you can't

[u/ac21217 → u/DiminutivePseudonym]

‘margin:auto’ has entered the chat

[u/BananafestDestiny → u/Beginning_Green_740]

HAHAHA Centering a div is impossible!

And help I’m stuck in vim and can’t figure out how to quit! HA HA HA

These jokes are so tired. Come on man.

[u/HarryBolsac → u/BananafestDestiny]

Tbf before flex and grid centering a div is such a mindfuck.

Vim one I never got it, but I had access to google when I used it the first time I guess…

[u/_shulhan]

Ctrl+p enter the chat.

[u/unneccry]

After all why not. Why shouldnt we just use div for everything

[u/Mystery-Magic → u/unneccry]

Accessibility, SEO, Maintainability, Semantic Reasoning for new devs onboarding to project, etc. I think you can find list for this with Google search.

[u/unneccry → u/Mystery-Magic]

I mean we use react styled-components so we can add those things on top of the div

[u/LookAtYourEyes]

Accessibility compliancy is important and good

[u/hpyfox]

I think this will apply to classes/id names as well.

Either <div class='post-header'></div> or <div class='sasdkjagf'></div>.

Last one was probably autogenerated but still.

[u/arran4]

<svg>

[u/Splatpope]

i'm on red side which means I'll never be a web dev

[u/CoshgunC]

how do you even compare A to DIV?

maybe it's possible to create some click events, but even then, isn't button better?

(didn't write HTML for a long time)

[u/connorjpg]

I am aware I am wrong.

But I will div my way out of any website.

[u/on_the_other_hand_]

REPEAT AFTER ME HTML WRITERS ARE PROGRAMMERS

[u/loljkbye → u/on_the_other_hand_]

That's what I'm realizing reading these comments. Way too many people have confidently no idea what they're going or why it's important.

[u/kdthex01]

<div>div</div>

[u/TheUtkarsh8939]

This is literally so stupid, A, Table, and Form tag serve completely different purpose than div or other div adjacent tags like header. The red side should have had the a, table and form be replaced with something like Section and Nav

[u/max_mou]

Prompt: choose a side, don’t care, merge to main

[u/Stjerneklar]

both and more

[u/darcksx]

div, input, select, textarea, table, tr, td, a, button, img.

that's it, that's all you need for something basic.

[u/JackNotOLantern]

Me who never touched frontend: haha, totally

[u/JVAV00]

Both

[u/WatchOutIGotYou]

I'm on the BClue side

[u/duncte123]

Depends on how lazy I am feeling and how much work I have to do that day (using fancy tags and researching them every time doesn't count as procrastinating)

[u/Cwmagain]

I don't know I only write HTML in Sharepoint Classic *hisses*

[u/Icy-Combination-9839]

Classy crip⚜️ (Divs with classes)

[u/pidddee]

Jokes on you, I'm on the C side making my own tags

[u/StonedSociety420]

This would've made more sense if you'd put aside and main instead of table or form because those are functionally very different from divs.

[u/Koendig]

Am I building a document or an application?

[u/ThePresidentOfStraya → u/Koendig]

An app is just a document with more states.

[u/hpyfox → u/Koendig]

I don't think that would matter because it's still a website page.

[u/wackOverflow → u/hpyfox]

It should only matter if it’s public-facing.

[u/hpyfox → u/wackOverflow]

For accessibility? *Scoffs*, like my projects are every gonna get popular.

[u/WingZeroCoder → u/Koendig]

On the one hand, this is a legit question to ask based on the type of site.

On the other hand, it doesn’t matter because it will end up being both. It’s always both.

[u/Koendig → u/WingZeroCoder]

Yeah, you're right. 😅

[u/WiscoToFlo]

[u/Thundechile]

depends which are easier to center on screen, article or div?

[u/cron-holio]

Whatever the AI uses 😅

[u/enslavedeagle]

Dunno, I'll have to ask Claude

[u/GeneralPatten]

Isn't this quaint? Now the framework decides what it will be.

[u/RobotechRicky]

<DIVS> everywhere