so it turns out nobody has needed to use div tags for like six years now

i can’t put the tags in my descriptions without 11ty getting mad so this is clickbait nowa website post about websites4 min read

Go to what­ever you per­son­ally use to write HTML, and type in the fol­low­ing:


No, re­ally, go do that. Do that, and then put it in an HTML file, and then write styling for it, se­lect­ing it like you would a nor­mal span tag like-this {}, and then re­al­ize that yes, that ac­tu­ally works. Genuinely.

An example of like-this, as a tag, being styled green with white text reading "huh. what do you mean this just works like that. excuse me"

What do you mean that just works.



Permalink to “how”

Okay, here are, as far as I can tell, the rules.

  1. It has to have a hy­phen; <this-tag> works, <thistag> does­n’t.

  2. You can­not self-close them; <this-tag /> won’t work.

  3. They have to start with a low­er­case let­ter.

  4. They have to not have up­per­case let­ters.

  5. There are no other lim­its.

another example, with a tag using an eggplant emoji; the joke is penis
my sex­u­al­ity is this ex­act tag but with a les­bian flag for a back­ground

It, hon­est to god, just works. CanIUse im­plies that this has lim­ited avail­abil­ity for the re­ally spe­cific rea­son I imag­ine you’d orig­i­nally want to use it, but as far as I can tell, if you’re lit­er­ally just us­ing it as a <div> drop-in re­place­ment, that’s it. It goes in, you style it like you’d style a nor­mal tag, it just works like that, on every browser not still in use at your lo­cal tax agency.

They’re tech­ni­cally all <span> tags, thus me hav­ing to put display:block onto each of them. I imag­ine if you were do­ing this to, like, make your HTML smaller, you’d have one big su­per-duper CSS se­lec­tor like

cooltag-a, cooltag-b, cooltag-c, cooltag-🇩 {
    display: block;

or what­ever, and you’d throw it wher­ever else the funny re­set CSS sheet goes? Link to foot­note 1

I can­not stress enough how much more read­able this makes your HTML look. I have a spiffy lit­tle dec­o­ra­tive side­bar on this blog, and while get­ting that there would’ve in­volved wrap­ping enough <div> tags to make my eyes gloss over, I in­stead was able to do this:

a small screencap showing my tags, "section-wrapper", "section-right" and "section-left"
-right and -left are in re­verse or­der be­cause it feels il­le­gal for the non-con­tent thing to be above the con­tent. any­ways look look

This, just very ob­vi­ously seems bet­ter? I know this will be the point where I would find out that it has some crit­i­cal flaw that breaks every­thing, but, out­side of it de­fault­ing to in­line, Link to foot­note 2 it just seems un­am­bigu­ously eas­ier for me to work with. This is so nice!

  1. I highly rec­om­mend a re­set CSS, not just for its in­tended rea­sons of mak­ing sure every­one sees the same shit, but be­cause there’s a lot of CSS rules that can’t be turned on by de­fault with­out break­ing back­wards com­pat­i­bil­ity, but are just ob­jec­tively bet­ter.

    Even if you don’t use the rest, se­ri­ously, put *,*::before,*::after {box-sizing: border-box} at the top of your CSS. Trust me. Return to ar­ti­cle via foot­note 1

  2. …Or try­ing to use it over a se­man­tic tag, but like, why even do that? I only men­tion this be­cause, some­how, it’s come up more than once that this is a thing peo­ple do. Why would I use a cus­tom tag in­stead of <article> when that’s al­ready the ex­act way I’d want to de­scribe that tag?

    I’m go­ing to as­sume that some­one re­ally wanted to do some­thing haunted, and not think too much about it. <div> re­place­ments only! Return to ar­ti­cle via foot­note 2 by nomiti ityool 2024
CC BY-SA 4.0 unless marked otherwise
made with Eleventy v2.0.1

rss feed lives here
if you use this for AI i hope my dogshit sentence structure poisons it