what is the worst html element? right answers only
Also posted to Bluesky.
185 replies
<html>
at first I was 100% disagree but I’m seeing your point the more I think about it
I have a joke explanation (the web is bad and we should feel bad) and a real one (<html> doesn't need to exist unless we're going full <xhtml> and pretending that it's a fully-qualified well-structured document in which case we should just have <xhtml> instead of doctypes)
And the web writ large has NEVER cared about it being a fully-qualified and well-structured document, so...
Where do a I send the bill for the therapy I’ll require from this flashback? Related, I miss Mark Pilgrim.
Honestly, I'd send it to Marc Andreessen. He's not entirely responsible, but it's close enough.
<span>
this is the best answer so far (imo)
<pre>
<pre><code> continues to be wild
Especially when we have pre and pre-wrap for white-space in CSS.
I have to second this. More like <pre>emptive strike on this element amirite
It should be de<pre>cated.
output
hard disagree!
trying to be a little spicy 🌶️
@zachleat At this precise moment, <input type="time"> which I was trying to use but only with 30-minute increments. Rubbish across the board!
@dracos woof, related: <input type="number">
-
@lutoma marquee is still alive and well 😅 may it never die
-
even with this bsky.app/profile/zach...
This may be the single greatest thing I've seen all week...
the week is young… wait
If there's something better coming, this is going to shape up to be a pretty amazing week.
how dare you target multiple of my specific interests simultaneously
@zachleat gotta be <blink>
I do admit having fun using some of these more "questionable" elements on my home page, back when the web was new....
@JonathanAldrich alright this is a very solid contender — curious if it respects reduced motion 😅
@zachleat contender or not, there's nothing solid about <blink>!
;-)
-
*looks around*
<style>
haha this is unhinged in the best way
-
@NicMakesStuff usability nightmare!!
-
@rem tell that to dorothy in oz
<select> 😅
all radios should be selects or vice versa
Once upon a time Internet Explorer on Windows treated <SELECT> elements as a separate window context from the main page so it didn't share z-index with the rest of the page unless you added an iframe with position:absolute right under it, and that wasn't even the strangest IE issue.
I see we share history ❤️
Shared trauma from developing for IE where your only tool for debugging was the `alert` dialog.
A great question for the Family Feud @kevinpowell.co .
Also <i> or <b> b/c visual bits rather than the better <em> and <strong>.
time to auction all of the single letter elements to corporate donors
@zachleat <html>
@zachleat <script>
@sstephenson @zachleat +1 to this one
@sstephenson the same messaging for <script> is also used in beer commercials: please enjoy responsibly
in terms of hardest to remember, <video>
hmm!
@zachleat datalist. The idea is brilliant. The implementations in the different browsers are a shitshow.
(seems like a good place to plug the HTML elements memory quiz: https://moritzglantz.de/html-quiz/ )
<table> and all its descendents
slander!
1997 called, they want their only means of page layout back
With select out of the way, mostly, its gotta be legend and summary for their weird automatic layouts.
how we doin’ on <fieldset> lately
Ha! That's the one I stopped by for. But I also kinda appreciate it in a weird way.
I mean, fieldset is mostly fine if you don’t stick a legend in it.
Get rid of the border and padding and boom, just fancy div.
Add a legend and suddenly its part of the border? That’s bs.
Apply float:left; to the legend and you're good to go 😅
Feels like a ‘now you have two problems’ type solution 😅
Sure do! But oddly enough I've had great success with it and Grid on the fieldset. But yes, feels very wrong. 😄
┌─ Zach ──────────┐
└──────────────┘
not the worst, but the most evil: plaintext
-
@simoncox now I’m trying to decide if div or span is more useful
Can't top the <html> comment, but to add some more spice: <script>.
The escape hatch of escape hatches. We traded a declarative language for an imperative one that, while great in its own right, has become the crutch for everything.
<bgsound>
...though now I say it I'm a bit nostalgic for random website midis that played on visit
<audio> can autoplay but only if it’s muted? 😅
Sounds... useful? 😄
<center>
we were promised <left>
@zachleat abbr
Noone wrote <iframe> or <frameset>yet.
You are all young and missed the cruel times.😆
we love <iframe> and <frameset> history management
Do you remember the days when we designed websites using 7 to 10 nested tables?
That was fun 🥹
<br>
<br>
<br>
<br>this sounds cold
-
this cements our friendship
-
@zachleat <br \>
@CowboyWho @zachleat this makes me itch
<dl> <dt> <dd>
like, guys, you never even put up a fight
keep <dl> on the <dl>
nonironically love these and use them wherever possible
@zachleat `<link rel="canonical" href="https://wil.to/">`
@zachleat <wbr>. I’ve never had a case for it that wouldn’t be better served by a soft hyphen or possibly zero-width space, and now the CSS hyphens has good support it’s completely obsolete.
@robinwhittleton phonetically delightful though
@zachleat @robinwhittleton wubber
@zachleat honestly, all the HN (h1, h2, h3) tags are bad. They should all be replaced in the same way we have UL and LI tags.
@khalidabuhakmeh might I propose we dig in even deeper with <h7> <h8> <h9> and <h10>
@zachleat @khalidabuhakmeh well... using those quite often I confess
@khalidabuhakmeh @zachleat headingoffset is coming! (maybe) https://mastodon.social/@firefoxwebdevs/116680726980295049
Has to be <blink>blink</blink>.
In terms of causing issues: frameset
<div>
<div>
<div>
<div>
<div>
<div>
This one.
</div>
</div>
</div>
</div>
</div>
</div><script>
<cite>
<ruby>
</html>
There's a strange mix of pride and regret regarding the blink tag, all according to this highly-scientific poll: https://mastodon.social/@rperezrosario/116995506783569011
@rperezrosario may polls and surveys continue to verify our biases
@zachleat doctype
@davidrisney if a preamble counts, I might still disagree 😅 we might have never made it to HTML5 without it
@zachleat I guess you're judging logically. I was going off which tag gives me the most residual anxiety
`<link rel="canonical" href="https://wil.to/">`
@zachleat `<plaintext>`
-
-
@zachleat the case for <ol>: https://siderea.dreamwidth.org/1819759.html
@cbirdsong "I start with a single HTML tag and end with the downfall of civilization."
…my god
Dont know which the worst one is but the one that makes me swear the most is dialog.
@zachleat `<data>` is the semantic element that most strikes me as a nothingburger.
Not the worst, but also not enough hate for <html>
<button>.. why must I specify type="button" 😒
<input> 👹
the foundation of all applications
-
-
*backs away slowly*
-
<s>
Yes
excuse me
<div>
<div class="btn-primary" onclick="alert('divs are not buttons')">Submit</div>
<address>
Does <font> count? 😅
emphatic yes (and also no)
<meter min="0" max="90" low="30" high="60" optimum="65" value="30" >
It needs more attribute, there aren't enough...
<marquee> <mark> and the funky bunch...
Every <div class="some-container">
that could have been done with a
UNdefined (no JS) Custom Element <some-container>... since Edge was the last browser to support them
... in 2020A lot of the answers till now are obviously bad, which mitigates the harm they do, but after reading Heydon's article I really dislike <blockquote> because it doesn't do what most people think it does and it's all very confusing!
No but wait, <section> is the worst, because wth is "a generic section of a document or application" and then why is it not "a generic container element"?!
Every time I thought I had a good reason to implement <section>s I ended up using <article> and <aside> instead
I'd go for <map> + <area> or <template>. Template is great, but annoying that you can't use MutationObserver or some event (like <slot> and slotchange) to know when template is changed.
Haven't found a solid solution yet, other than a webcomponent extending template with is-attribute... (no Safari)
You can actually bind to the template content and that seems to work in a quick test.
mutationObserver.observe(document.querySelector("template").content), {
characterData: true,
childList: true,
subtree: true,
attributes: true
})Ahaaa, that was a tricky one! Thanks for charging 🤩
BLINK tag
The <math> family are an absolute nightmare to write.
-
think of all the XSS this could solve 😅
-
how deep must we go 😅
-
don’t you curse my timeline with this, not today
<big>
pairs nicely with <small>
At least small has a semantic meaning :)
<xmp>
Is the <worst-html-element> web component technically considered an html element?
even unknown elements are elements
Yes, its a Custom Element
Almost everything you write between < > extends from HTMLElement
Some are UNdefined Custom Element and *can/but don't have to* be upgraded with the Custom Elements JavaScript API to a Defined Custom Element (Autonomous Element)
The term Web Component applies to more
what is this Mix Elements business 👀🫣
that bottom row is dragons!
Had to dig up a 5 year old blog:
yikes! I’d take userspace conflict risk over platform conflict risk *any* day
I like the idea of using Undefined Custom Elements as generic containers and progressive enhancement for server rendered markup, but don't like to use Unknown Elements without hyphen due to compatibility risks.
Depending on your needs using HTMLUnknownElements that might be overwritten by new WHATWG tags could actually be safer, as explained with the <progress> tag in my 5 year old blog:
<menu>, which is literally a fancy <ul>
input:
- type="button"
- type="submit"
- type="reset"
- type="image"<sup> ✌️
<basefont>
<details> very useful but I absolutely hate it throws the content into a pseudo-element like some sort of vendor prefix mutant