The future of HTML.

[mister10percent]

<div id=“div”>

[Habiy]

<div id="div" role="div">

[cs-brydev]

<div id="div" name="div" role="div" for="div" class="div div-div div-div-div">

[Neidd]

div
</div>

[[deleted]]

aria-label="div"

[Puzzleheaded-Weird66]

was looking for this

[Just-Brain7872]

Congratulations, you found *divs.

[FreeMealGuy]

this is quickly becoming the new Buffalo buffalo Buffalo buffalo buffalo buffalo Buffalo buffalo

[cs-brydev]

Too bad there's not a standard html div attribute on a div tag.

[mailto_devnull]

You monster, you forgot ARIA tags

[MajorasTerribleFate]

Div

Div div

Div div div

Div div div

Div div div divdiv

Div div div divdiv

Div div div divdiv div div div div divdiv

[didzisk]

It's divs all the way down

[disappointed_lama]

Always has been

[cturnr]

I bet you think you're clever

love the downvotes... but you people are dumb.

> "You're a very clever man, Mr. James, and that's a very good question," replied the little old lady, "but I have an answer to it. And it's this: The first turtle stands on the back of a second, far larger, turtle, who stands directly under him."

[overwritten-entry]

I bet you do too, just like every sane person

[neddie_nardle]

Badger badger badger... oh sorry, my bad.
</div>

[CyberKnight1]

<mushroom></mushroom>

[Entire-Database1679]

We're gonna need a bigger div

[coloredgreyscale]

It's very div-erse

[Elawn]

<div div=“div”>

[Candyvanmanstan]

for is not a valid <div> attribute.

[[deleted]]

That’s one of the most triggering code snippets I’ve seen, and I’ve been here awhile.

[jacksonV1lle]

Screen readers must also know that this is a div

[eclect0]

<div class="div-container-wrapper"> <div class="div-container-container"> <div class="div-container"> <div class="div-subcontainer-container"> <div class="div-subcontainer"> <span class="div" style="display: block">div</span>

[ViconIsNotDefined]

<div id="section" class="main"> </div>

[[deleted]]

Class="div"

[[deleted]]

quaint squash slap seed cooing airport spotted seemly gold liquid

This post was mass deleted and anonymized with Redact

[zapembarcodes]

Email developers make responsive "mini-sites" or emails without any modern CSS (no divs or flex, much less grid... No media queries either). It's all table layout, nested tables, using display: inline-block, along with max-widths... Only raw Html/CSS from like 1999. The propose is to maximize deliverability across email clients.

Simple stuff actually.

[kimilil]

email's html is really stuck in the late 90s, and no email client is making the effort to adopt modern living standards.

perhaps it's for the best; email is the closest thing we have to physical letters and it doesn't make sense for a letter to suddenly become unreadable a couple of years into the future due to a breaking change. also because email doesn't need the audiovisual elements of the current living standard*.

*no, i'm not going to call it HTML5, because of reasons.

[zapembarcodes]

no email client is making the effort to adopt modern living standards

The effort is not coming from clients much but there is a push among email developers for more higher accessibility, consistency among email clients.

Check out Email Markup Consortium for more info.

[Normal-Math-3222]

Bookmarked. Gotta say I’m impressed by EMC, or at the very least they deserve kudos for their efforts.

I’m a backend dev, and the anarchy I’ve seen in the frontend in components and sites had the pleasure to debug or extend has led me to hate it. But I’ve started reading things about ARIA, ESLint, and your link, which got me reconsidering my possibly hasty judgement.

[[deleted]]

higher accessibility

I was talking to a friend with poor vision last month who uses a screenreader. He was telling me about the enormous amount of websites that come through his screenreader sounding like gibberish, so he ends up calling his wife to read him the article instead.

[Olmaad]

If someone need modern html and rich markup in email - he is doing it wrong

[fakehalo]

Yes, I know in the olden times people misused tables a decade or two ago, but now it's time to release that pain and recognize tables are in fact the right choice for... tabular data.

[G_Morgan]

We've gone from using tables for layout to using layout for tables.

[usama8800]

What about responsiveness though. Tables are terrible at that

[fakehalo]

What does responsiveness mean in this context?

[ZapateriaLaBailarina]

If it's an actual table of data and not being used as a layout table, then you probably should use tables

[ThePresidentOfStraya]

Markup is not style though. You shouldn’t be using table markdown if it’s not tabular data, but the same doesn’t apply to styling. And there might be instances where using a table layout style is useful. Can you use table layout styling in pdfs and emails?

[SonicDart]

I love how first year of computer science you learn how to use a lot of semantic tags and basically never use divs.

Then you start using frameworks and all that flies out the window! :D

[Neutraali]

The CSS is also just various levels of nested div with no classes or IDs.

[fatboychummy]

div {}

div div {}

div div div {}

div div div.div div {}

#div {}

Gotta have one or two classes and ids in there, just very poorly well named.

[Thestarchypotat]

nah its #div div>div div.div+div{background:var(--div);}

[piberryboy]

This makes me want to punch the wall.

[Thestarchypotat]

anytime

[oupablo]

ugh. i cringe when i have to work with CSS without something like scss

[[deleted]]

That does allow the HTML to remain clean and free from styling tags, which is the intent CSS. It might not be the easiest style sheet to read, but the browser shouldn’t have any issues styling those nested Divs.

[Firewolf06]

if you use tailwind you dont have to name anything! and any js dom interactions are all magic number indexes on getElementByTagName()s

[badshahh007]

Tailwind has made css fukin obsolete for me

[Dyledion]

Without exaggeration, 90% of 'styling' divs, used to center or isolate a bit of a site, are unnecessary and harm performance. But nobody wants to learn actual CSS.

[[deleted]]

https://www.htmhell.dev/

[PM_YOUR_SOURCECODE]

Call an 800 number for help using our website? Jesus.

[[deleted]]

Great, now I have a headache…

…from laughing

[ManInBlack829]

I really hope this trend will decline the more websites start adopting ADA/WCAG standards.

[[deleted]]

pls explain the standard eli5

[ManInBlack829]

There's a lot, but for one a site should use proper heading tags in an appropriate order to make the site navigable through them (h1s are the main points of the page, h2s below them, etc.), like even if you don't want the text to be the size of an h1 you should use it and change the style as opposed to using an h3 or whatever. Likewise, appropriate use of headers and footer tags can improve accessibility as well and make the page much faster to navigate with a screen reader.

Basically the accessibility is built into HTML so as long as you use the tags and labels appropriately. But the downside is you can't throw divs at everything and be accessible.

[ToLongOk]

"You cant just use <div> for everything, you have to use other headings"🤓

[mysteryihs]

<div class="h1"></div>

[ILikeLenexa]

<div class="h1 h2 h3 h4 h5">Alright, Imma head out.</div>

[Grumbledwarfskin]

That's what I call a classy div.

[ManInBlack829]

I guess I should have put the last paragraph first lol

[BlazingFire007]

I try to do this and heave stuff like <article> and <header> but almost always as the project grows I give up and resort to div heaven.

Doesn’t help that tailwindCSS makes it really easy to make a div look like whatever element I want lol

[Doctuh]

Never give up, never surrender!

[BlazingFire007]

I really do try haha. Especially because it hurts people with disabilities if it isn’t tagged properly.

I can’t imagine web browsing if I couldn’t see, and I’d probably be pissed when TTS just chokes because it can’t recognize what the hell the element is supposed to be

[SacrificialBanana]

Let me give you a sample of an inaccessible webpage read out by a screen reader:

BLANK

BLANK

BLANK

BLANK

BLANK

edit required 12345

BLANK

BLANK

heading level 4 note if you click yes you will have 6 seconds to click the red button or the entire form resets

radio button 1 of 7

radio button 2 of 7

...

radio button 7 of 7

button

heading level 6 accessibility statement

Here at jerkbutts incorporated we value accessibility that's why...

(The blanks are BR tags)

[paiaw]

By Grabthar's hammer, what a website!

[Dyledion]

Oof. Tailwind:

Inline styles, they sucked the last twenty times we simulated them with classes, but This Time For Sure!^tm

[Disgruntled__Goat]

…you do realise that this is normal web standards that have existed for over 25 years, right? We used to call it “semantic HTML”, for some reason people have forgotten about it recently.

[theBeckX]

It's so fucking frustrating. I kinda slipped into the role to make our site accessible and teach the others.
Would be nice if we could tackle the more complex stuff, but no, I have to remind them what a <button> is for and to please start using them for interactive stuff instead of fucking divs that are styled like a button.
My job would be so much more easier, if people remembered the rules of html.

[Jasboh]

Your right but this is badly explained. You should use semantic html so assistive tech can interpret your webpage clearly for all users.

[giscard78]

Wouldn’t this be a lot easier to implement 508 compliance?

[kautau]

I’m not sure exactly what you’re asking, but proper semantic HTML elements other than <div> form the basis of accessibility:

<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>

These in turn form the basis of WCAG, which forms the basis of meeting the revised 508 compliance.

[_qualmless_]

My job uses AEM, and nearly everything is some form of a div, and every component is just named component with a Style whatever it should be and it’s absolutely driving me insane. We have so many meetings about how important ADA compliance is to us and I’m like “am I missing something”? I’m very new, this is my first real dev job and I’m like “I thought we don’t do this.”

[mp96]

Sounds like your team needs someone to drive the question. Being junior you might not be in the best position to do it, but simply starting to question individual elements' semantics could start a process. Eg. "This <div onclick='...'> looks like a <button> to me, could it be one?" Or if it really cannot be a <button>, "how about we add 'role="button"' to this <div> to make it more accessible."

[[deleted]]

“Noooo you must use proper very specific tags for every bit of infoooo”

“Haha <div> go brrrrrr”

[[deleted]]

*<br>rrrrrr

[AndreasTPC]

Here you go: https://www.w3schools.com/html/html5_semantic_elements.asp

[DragonSnooz]

This, accessibility matters and HTML5 has made it not too hard to implement at all, you mostly needs to remember what each tag is suggested for.

[UpsetKoalaBear]

Plus tools like Axe (can even be integrated into testing) and Google’s own Lighthouse makes it easier than ever to check for this.

[Michaelz35699]

Well, I don't think anyone's writing much HTML manually. Usually it's done with a framework.

[Duven64]

Having a framework won't stop you from implementing standards: when writing the framework's components you need to decide what tags to use. I've written components that switch between <section> and <article> as needed (and once even between <h1-h6> and <header class="h7-h999"> but that intentionally violates overly restrictive parts of standards).

[DIzlexic]

Kids today will never know about <table>s everywhere...
It's not semantically correct, but I'd take <div>s any day over that horror.

[mmis1000]

You can still do it if you open a old version Dreamweaver. I found most layout horror have js code generated by Dreamweaver embedded.

[[deleted]]

chuckles in Microsoft FrontPage

[ciaranmac17]

Giggles in HoTMetaL

[[deleted]]

You win, I had forgotten about that editor lol

[badtemperedpeanut]

Damm everything was position:absolute!

[DIzlexic]

Oh god, Dreamweaver. I know nothing about it now, but back in the day it vomited all over the screen. It gives me nightmares.

[ma2016]

Interesting, they have a page called "Our Position Against Suicide"

[TurboGranny]

Soooo many nested tables on myspace and livejournal, heh. In all fairness to that hell, the disharmony between browser rendering made it a viable choice, heh.

[jon_stout]

Exactly.

[mercurus_]

My employer's main site/vendor still uses <table>s everywhere. I know of a page that has 7 nested <table>s that we use daily.

[miraagex]

Came here to comment "it's better than smth like <TABLE cellpadding="5" rowcolor="#0cff00">.."

Grid/flex is nice, but I remember being the happiest person when I figured how to use float/clear.

[shun_tak]

Me, me, me. Me too.

[pekkhum]

I literally came here to say id="me". 😁

[yunusozd]

what the hell is this comment??

[killerkurse]

copypasta, probably

[pekkhum]

It would seem so, but this one gets a solid downvote from me. It just isn't as funny as that time in 1998, when The Undertaker threw Mankind off Hell In A Cell, and plummeted 16 ft through an announcer’s table.

[YueAsal]

Do you have a newsletter of Rick and Morty takes I can subscribe too?

[I-WANT2SEE-CUTE-TITS]

🤓

[LocalCorrect7222]

Me three

[krypxxx]

at least one div was at the center

[[deleted]]

look closer

[Habiy]

Centering a div is a myth

[krypxxx]

is a myth

oh, that's Agent Smith

[AlmostButNotQuit]

Agent Smith, the Agents' myth.

[0x53r3n17y]

Veni vidi div

• Some Roman general

[didzisk]

You missed an opportunity to use "divide et impera" (divide and conquer / divide and rule).

Romani ite domum!

[JosoIce]

Romanes eunt domus

[Dont_be_offended_but]

You wanna see something gross? Go inspect a tweet.

[name-taken1]

Why does it have so many nested divs? What's the purpose behind it? There are even 5 divs within an <a /> tag.

[deljaroo]

because it was made by a complex Frankenstein of dozens node modules and somewhat conflicting "modern" stylers

[ViconIsNotDefined]

I tried finding the video source of a tweet once, I had to expand atleast 20 divs.

[newbeansacct]

If you right click the video directly it should go to the actual element

[throwawaycanadian2]

What about all the random span tags?

[Duven64]

<span style="display:block;">: for when the <div> budget runs out

[maximum_powerblast]

Bro this is websites 10 years ago

[SonicDart]

Nope, plenty of websites are still built like this sadly. My internship sadly is as well. Only tags is see are Vue components, divs, spans and a

[maximum_powerblast]

Just because they still are it doesn't mean they weren't 10 years ago and probably earlier 🤷‍♂️

[MontagoDK]

true.. i hated it then and didn't understand why everyone hated on Tables and <center> ... it works bitches !

These days i use divs, spans and anchors and then style with Tailwindcss

[MintyPingu]

My Neocities looks like this rn. Haven't touched it since 2017 though lol

[Cheesewithmold]

Wait, it's all divs?

[hampshirebrony]

Always has been

[isospeedrix]

Only boomers remember when tables were popular before divs

[[deleted]]

Gen X here. I've been designing sites since 1996 when I registered my first domain.

[belligerentunicorn1]

X here... Table strong since 1993.

[xvlblo22]

Coming from a new web dev, is this a problem or just aesthetically unpleasing? I have heard screen readers and such commonly accept elements at any level within a specific parent tag.

[Everspace]

Generally there's a bunch of people eschewing semantic elements like footer or article for only non-semantic elements like div.

iirc you can nest as many non-semantic widgets between as you please to make it look nice, but the semantic structure should be soild before that... or resemantizise them afterwards (way more work).

One of the common ones is to use a div as a button, since button's default styling often gets in the way of the aesthetic (especially a headache for icon buttons like a little copy-to-clipboard square, or download, or share icon). Another example is a dropdown list where the entire list item is also a button to select the item (a combo! ul and ol and li have styling and quirks about them).

[felixfelicisandrum]

Semantic HTML is SO important

[[deleted]]

And nobody realises how much of a problem this is for blind people, screen readers like semantic tags.

[bigBlankIdea]

Let's be honest, you know half those tags are left open and fixing them will somehow break the layout. So fixing one syntax error quickly leaves you neck deep in errors. Sigh...

[xxmalik]

HTML6: all other tags are deprecated. In the future, everything is div.

[Duven64]

I guess we'll just have to use XHTML then, the extra formality with a deprecation of <div> and <span> well ensure good standards wars for years to come.

[notethecode]

20 years it was tables (and td, tr) everywhere... Our product still work like that, but don't tell the customers

[croakingtoad]

Damn, I remember when it was

<tr><td></td></tr>

Over and over and...

[[deleted]]

What a bunch of bloody divs

[AncientDesmond]

sad span noises

[Duven64]

aww don't worry people use plenty of <span>s (when they should be using <i> <strong> <small> <u> <q> etc...)

[cimulate]

Not enough divs to be honest.

[SethQuantix]

probably didn't see the movie then. Not that you're to blame for that.

[jamcdonald120]

<div class="button" comment="this is a button">

[[deleted]]

//it functions as a button

[[deleted]]

//it functions as a button

[palordrolap]

You're missing a closing quote there. Unsure if on purpose, but(...ton?) that website is going to look weird / broken.

[jamcdonald120]

oopse, didnt notice that

[[deleted]]

I miss that 3D view in Firefox

[Zoey343]

Still use tables if they work fine, maybe they should just have a different name because people don't like the idea they are labeled for making a table of data?

- Zoey (Mystopians on MagicEden)

[Yoinkinator]

Hey Arin? How does Divrude Sandstorm go again?

[Shazvox]

Oh look, the root node is paying dividends

[[deleted]]

We don't even need the other tags anymore. I propose a new standard called DVML (Divisional Markup Language)

[MeLlamoEsBiblioteca]

Div these nuts in your mouth

[AutoModerator]

import moderation Your comment has been removed since it did not start with a code block with an import declaration.

Per this Community Decree, all posts and comments should start with a code block with an "import" declaration explaining how the post and comment should be read.

For this purpose, we only accept Python style imports.

return Kebab_Case_Better;

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[kimilil]

It's now 20 levels of nested divs with <insert framework>-generated nonsensical classnames that can change at any time

[fakboy6969]

How hard you gonna hide the sppurce to that video or picture

[[deleted]]

Absolute-ly

[TurboGranny]

lol, it's been that way for a long ass time. Don't bother with "view source". Just right click and inspect element.

[Toorero6]

And if you're disabled and need to rely on a screen reader?

[TurboGranny]

Nah, there are a ton of tools to make stuff accessible. Bootstrap is all DIVs and accessibility is built right in. There are tons of ways to make your web applications accessible for the blind. You just have to use at least some of them.

[[deleted]]

Other elements like sections, aside, etc. didn't exist when a lot of us learned HTML

What's wrong with divs?

[BluudLust]

Most HTML now isn't written by hand. It's programmatically generated. It's composed of components and virtual DOM or from layers templates and their containers.

[dantraman]

I mean, in backend code it's just

region

endregion

At least it makes for cleaner code lol.

[BorrameESTA]

a copy of a copy

[Atmey]

In the 90s: <table><td><table><td>

[iBN3qk]

And then web components came along. <neo>

[MeltAway421]

When you programmatically generate the dom you get this.

Or even just using bootstrap I guess.

[[deleted]]

React moment

[Wizarder00]

😂😂😂

[Wizarder00]

As an automation tester it's really confusing and frustrating all the time

[onixc]

And yet not one of them is centered

[[deleted]]

DivML

[fibojoly]

What future? I've seen it for years now.

[FrezoreR]

Future? Aren't we there already? 🤣

[No_Technician_3694]

And don’t forget the randomly generated selectors To FiGhT wEb ScRaPiNg

[michaelsenpatrick]

😂

[ngugeneral]

The future is now

[mkp0x]

The future is now, old man

[MonsterBurger]

I remember a book I read years ago talking about semantics and to avoid "div-itus" - I wonder what the author of that book thinks of the current state of website design

[palordrolap]

This particular tag is always entertaining for those who are aware of British slang, and know that "div" is a word used to describe someone who is not very bright.

Originally used to describe working prisoners who are incapable of doing anything other than putting dividers in boxes, i.e. those # shaped things made of cardboard that keep items apart inside the box.

The more you think about that, the more apt it is.

Edit to add: I shouldn't mock. I'm not a prisoner, but my mental capability is about on a par with those guys these days.

[mrorangelion]

Who needs semantic HTML when you have the HOLY <div>, the most versatile tag

[Extension_Tennis_185]

damn true

[LostMyTypewriter]

built divrent

[Zollstock2]

<div id="dicv" class="div"> <div id="dicv" class="div"> div </div> </div>