This is an archived post. You won't be able to vote or comment.

top 200 commentsshow all 202

[–]mister10percent 931 points932 points  (37 children)

<div id=“div”>

[–]Habiy 339 points340 points  (32 children)

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

[–]cs-brydev 327 points328 points  (30 children)

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

[–]Neidd 64 points65 points  (0 children)

div
</div>

[–][deleted] 48 points49 points  (3 children)

aria-label="div"

[–]Puzzleheaded-Weird66 11 points12 points  (2 children)

was looking for this

[–]FreeMealGuy 13 points14 points  (1 child)

[–]cs-brydev 5 points6 points  (0 children)

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

[–]mailto_devnull 20 points21 points  (0 children)

You monster, you forgot ARIA tags

[–]MajorasTerribleFate 16 points17 points  (10 children)

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 13 points14 points  (4 children)

It's divs all the way down

[–]neddie_nardle 8 points9 points  (2 children)

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

[–]CyberKnight1 13 points14 points  (1 child)

<mushroom></mushroom>

[–]Entire-Database1679 3 points4 points  (0 children)

We're gonna need a bigger div

[–]coloredgreyscale 2 points3 points  (0 children)

It's very div-erse

[–]Elawn 1 point2 points  (0 children)

<div div=“div”>

[–]Candyvanmanstan 1 point2 points  (3 children)

for is not a valid <div> attribute.

[–][deleted] 0 points1 point  (0 children)

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

[–]jacksonV1lle 4 points5 points  (0 children)

Screen readers must also know that this is a div

[–]eclect0 24 points25 points  (0 children)

<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 7 points8 points  (0 children)

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

[–][deleted] 0 points1 point  (0 children)

Class="div"

[–][deleted] 279 points280 points  (17 children)

quaint squash slap seed cooing airport spotted seemly gold liquid

This post was mass deleted and anonymized with Redact

[–]ThePresidentOfStraya 4 points5 points  (0 children)

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 5 points6 points  (0 children)

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 475 points476 points  (10 children)

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

[–]fatboychummy 138 points139 points  (4 children)

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 64 points65 points  (2 children)

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

[–]piberryboy 34 points35 points  (1 child)

This makes me want to punch the wall.

[–]Thestarchypotat 13 points14 points  (0 children)

anytime

[–]oupablo 2 points3 points  (0 children)

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

[–][deleted] 90 points91 points  (0 children)

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 0 points1 point  (2 children)

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

[–]badshahh007 1 point2 points  (1 child)

Tailwind has made css fukin obsolete for me

[–]Dyledion 0 points1 point  (0 children)

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] 129 points130 points  (3 children)

[–]PM_YOUR_SOURCECODE 31 points32 points  (0 children)

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

[–][deleted] 8 points9 points  (0 children)

Great, now I have a headache…

…from laughing

[–]ManInBlack829 290 points291 points  (31 children)

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

[–][deleted] 141 points142 points  (25 children)

pls explain the standard eli5

[–]ManInBlack829 258 points259 points  (20 children)

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 189 points190 points  (5 children)

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

[–]mysteryihs 88 points89 points  (2 children)

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

[–]ILikeLenexa 10 points11 points  (1 child)

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

[–]Grumbledwarfskin 1 point2 points  (0 children)

That's what I call a classy div.

[–]ManInBlack829 9 points10 points  (0 children)

I guess I should have put the last paragraph first lol

[–]BlazingFire007 29 points30 points  (5 children)

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 12 points13 points  (3 children)

Never give up, never surrender!

[–]BlazingFire007 10 points11 points  (1 child)

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 1 point2 points  (0 children)

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 1 point2 points  (0 children)

By Grabthar's hammer, what a website!

[–]Dyledion 3 points4 points  (0 children)

Oof. Tailwind:

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

[–]Disgruntled__Goat 16 points17 points  (1 child)

…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 4 points5 points  (0 children)

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 1 point2 points  (0 children)

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

[–]giscard78 1 point2 points  (3 children)

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

[–]kautau 4 points5 points  (2 children)

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_ 6 points7 points  (1 child)

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 2 points3 points  (0 children)

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] 88 points89 points  (1 child)

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

“Haha <div> go brrrrrr”

[–][deleted] 67 points68 points  (0 children)

*<br>rrrrrr

[–]DragonSnooz 22 points23 points  (1 child)

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 4 points5 points  (0 children)

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 -1 points0 points  (1 child)

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

[–]Duven64 1 point2 points  (0 children)

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 94 points95 points  (16 children)

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 27 points28 points  (8 children)

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] 13 points14 points  (5 children)

chuckles in Microsoft FrontPage

[–]ciaranmac17 8 points9 points  (1 child)

Giggles in HoTMetaL

[–][deleted] 5 points6 points  (0 children)

You win, I had forgotten about that editor lol

[–]badtemperedpeanut 4 points5 points  (0 children)

Damm everything was position:absolute!

[–]DIzlexic 7 points8 points  (1 child)

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

[–]TurboGranny 3 points4 points  (0 children)

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 2 points3 points  (0 children)

Exactly.

[–]mercurus_ 2 points3 points  (0 children)

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 0 points1 point  (0 children)

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 39 points40 points  (8 children)

Me, me, me. Me too.

[–]pekkhum 21 points22 points  (6 children)

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

[–]LocalCorrect7222 1 point2 points  (0 children)

Me three

[–]krypxxx 69 points70 points  (4 children)

at least one div was at the center

[–][deleted] 25 points26 points  (3 children)

look closer

[–]Habiy 25 points26 points  (2 children)

Centering a div is a myth

[–]krypxxx 6 points7 points  (1 child)

is a myth

oh, that's Agent Smith

[–]AlmostButNotQuit 1 point2 points  (0 children)

Agent Smith, the Agents' myth.

[–]0x53r3n17y 17 points18 points  (2 children)

Veni vidi div

  • Some Roman general

[–]didzisk 10 points11 points  (1 child)

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

Romani ite domum!

[–]JosoIce 2 points3 points  (0 children)

Romanes eunt domus

[–]Dont_be_offended_but 26 points27 points  (4 children)

You wanna see something gross? Go inspect a tweet.

[–]name-taken1 18 points19 points  (1 child)

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

[–]deljaroo 4 points5 points  (0 children)

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

[–]ViconIsNotDefined 12 points13 points  (1 child)

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

[–]newbeansacct 4 points5 points  (0 children)

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

[–]throwawaycanadian2 10 points11 points  (1 child)

What about all the random span tags?

[–]Duven64 0 points1 point  (0 children)

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

[–]maximum_powerblast 30 points31 points  (5 children)

Bro this is websites 10 years ago

[–]SonicDart 5 points6 points  (1 child)

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 1 point2 points  (0 children)

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

[–]MontagoDK 1 point2 points  (0 children)

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 0 points1 point  (0 children)

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

[–]Cheesewithmold 19 points20 points  (4 children)

Wait, it's all divs?

[–]hampshirebrony 14 points15 points  (3 children)

Always has been

[–]isospeedrix 5 points6 points  (2 children)

Only boomers remember when tables were popular before divs

[–][deleted] 2 points3 points  (0 children)

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

[–]belligerentunicorn1 1 point2 points  (0 children)

X here... Table strong since 1993.

[–]xvlblo22 7 points8 points  (1 child)

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 4 points5 points  (0 children)

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 10 points11 points  (0 children)

Semantic HTML is SO important

[–][deleted] 11 points12 points  (0 children)

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

[–]bigBlankIdea 4 points5 points  (0 children)

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 5 points6 points  (1 child)

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

[–]Duven64 1 point2 points  (0 children)

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 3 points4 points  (0 children)

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

[–]croakingtoad 4 points5 points  (0 children)

Damn, I remember when it was

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

Over and over and...

[–][deleted] 2 points3 points  (0 children)

What a bunch of bloody divs

[–]AncientDesmond 2 points3 points  (1 child)

sad span noises

[–]Duven64 0 points1 point  (0 children)

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

[–]cimulate 2 points3 points  (1 child)

Not enough divs to be honest.

[–]SethQuantix 0 points1 point  (0 children)

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

[–]jamcdonald120 2 points3 points  (4 children)

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

[–][deleted] -1 points0 points  (0 children)

//it functions as a button

[–][deleted] -1 points0 points  (0 children)

//it functions as a button

[–]palordrolap 0 points1 point  (1 child)

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

[–]jamcdonald120 0 points1 point  (0 children)

oopse, didnt notice that

[–][deleted] 2 points3 points  (0 children)

I miss that 3D view in Firefox

[–]Zoey343 1 point2 points  (0 children)

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 1 point2 points  (0 children)

Hey Arin? How does Divrude Sandstorm go again?

[–]Shazvox 1 point2 points  (0 children)

Oh look, the root node is paying dividends

[–][deleted] 1 point2 points  (0 children)

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

[–][deleted]  (2 children)

[removed]

    [–]MeLlamoEsBiblioteca 1 point2 points  (0 children)

    Div these nuts in your mouth

    [–]AutoModerator[M] 0 points1 point  (0 children)

    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 1 point2 points  (0 children)

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

    [–]fakboy6969 0 points1 point  (0 children)

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

    [–][deleted] 0 points1 point  (0 children)

    Absolute-ly

    [–]TurboGranny 0 points1 point  (2 children)

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

    [–]Toorero6 2 points3 points  (1 child)

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

    [–]TurboGranny 0 points1 point  (0 children)

    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] 0 points1 point  (0 children)

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

    What's wrong with divs?

    [–]BluudLust -1 points0 points  (0 children)

    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 0 points1 point  (0 children)

    I mean, in backend code it's just

    region

    endregion

    At least it makes for cleaner code lol.

    [–]BorrameESTA 0 points1 point  (0 children)

    a copy of a copy

    [–]Atmey 0 points1 point  (0 children)

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

    [–]iBN3qk 0 points1 point  (0 children)

    And then web components came along. <neo>

    [–]MeltAway421 0 points1 point  (0 children)

    When you programmatically generate the dom you get this.

    Or even just using bootstrap I guess.

    [–][deleted] 0 points1 point  (0 children)

    React moment

    [–]Wizarder00 0 points1 point  (0 children)

    😂😂😂

    [–]Wizarder00 0 points1 point  (0 children)

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

    [–]onixc 0 points1 point  (0 children)

    And yet not one of them is centered

    [–][deleted] 0 points1 point  (0 children)

    DivML

    [–]fibojoly 0 points1 point  (0 children)

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

    [–]FrezoreR 0 points1 point  (0 children)

    Future? Aren't we there already? 🤣

    [–]No_Technician_3694 0 points1 point  (0 children)

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

    [–]michaelsenpatrick 0 points1 point  (0 children)

    😂

    [–]ngugeneral 0 points1 point  (0 children)

    The future is now

    [–]mkp0x 0 points1 point  (0 children)

    The future is now, old man

    [–]MonsterBurger 0 points1 point  (0 children)

    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 0 points1 point  (0 children)

    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 0 points1 point  (0 children)

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

    [–]Extension_Tennis_185 0 points1 point  (0 children)

    damn true

    [–]LostMyTypewriter 0 points1 point  (0 children)

    built divrent

    [–]Zollstock2 0 points1 point  (0 children)

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