I Ranked All 142 HTML Elements
HTML-код
- Опубликовано: 18 сен 2024
- This is probably the most obnoxious thing I've ever done for content and I'm so happy I did it.
LINK TO TIER LIST tiermaker.com/...
Thank you ProbablyEmbed for the work on that tier list, this was way too fun.
Keywords HTML ELEMENT TIER LIST CSS RANK COMPARE BUTTON DIV BODY
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
S/O Ph4se0n3 for the awesome edit 🙏
Setting low ranks for semantic and acessibility tags is a good way to understand why the majority of the web have bad accessibility
funny enough, I just watched a video of his where he insisted he's super into accessibility :D
Just sad how 21:09 is just normal for some people. When you have a click event, do yourself and others a favour and use !
to be fair, i'm pretty sure the ranking was a joke
why would a website aim for a good accessibility? not my problem that disabled people can't access a website, they are at most 0.001% of population so idgaf
@@kanauvistyou're a bad person man
142 elements just for people to write
Dummies gonna dummy. Sometimes you just can't help it.
I didn't understando the joke@@SkywalkerWroc , he was playing on button rank?
Theo's video on HTML Tags is a massive Dumpster Fire of stupidity that exploded onto the streets. I've been working with HTML since 1995 and Theo is out to lunch and thankfully more intelligent people are making youtube videos. Let's talk about the Button Element. This guy has all the major points covered. ruclips.net/user/shortslVk6EXvQDkM
@@passocadev it'sa joke about divitis , when bad developers don't use tags properly nor semantically only use div.
though now it's also from ignorance that tools/frameworks may render div soup outputs.
To be onest, it is more usual to use for fake buttons than div
is an S tier for me because it's interactable for the input it's labelling. For example, clicking a label invokes a change event on a checkbox without any JS.
Agreed, I love label tag.
I abused that property so hard. Every linter is screaming at you when you hide a button but it can look so insanely good so easily because of this property.
And you can style label like a button, while you make the checkbox invisible.
@@diablo.the.cheater one of my favorite fun things was to write a menu with sub menus which opens on hover on desktop and click/toggle on mobile with 0 JS. Labels, hidden checkboxes, "selector+selectors" it's a lot of fun
Marquee been S tier but been declared obsolete is top tier humor.
deal
that's because Marquee is S+ tier, remove 1 point, makes it S
was waiting to see if blink tag would be S tier as well , making the trolling clear
Quite literally
Marquee is only obsolete because it has animations inside of HTML, when HTML is supposed to be for markup only, and CSS for animations.
but then again, IT HAS ANIMATIONS IN HTML MAN WTF THAT'S AWESOME
html is my favorite programming language
Is better than Java ❤
Nah, XHTML all the way
Html is not real programming language
@@chullupa Ah shit, Here we go again.
Who'll put the r/ comment?
At least it isn't js or ts
is actually pretty important if you want to load critical css as fast as possible.
Style element is superior to inline styles in every conceivable way except for some ad-hoc toying.
When he's ranting about using inline styles instead of I get personally offended.
(BTW, fun fact here: can be used instead of in some scenarios for optimization)
@@SkywalkerWroc yeah that inline over style-tag is probably from over dosing on tailwind etc
And also for ::after and ::before elements, as well as states. (I'd argue onMouseOver="this.style.color='#fff'" onMouseOut="this.style.color='#000" isn't css)
Also, with , for self-contained documents that don't depend on the existence of any other file. This is sometimes useful.
I literally only watched to confirm was placed in it's rightful place as S tier.
You forgot the BEST tag in the world....
Pure deprecated joy
I like header, footer, section, article, main... because they allow you to style elements easily without creating a single class, or repeatedly using divs. Also, the markup is semantic, and that may be useful too.
how to doing the with tailwind tho, grug brain too slow.
@@seannewell397 Duuude, these elements got nothing to deal with styling. Get a grip.
It's all about *SEMANTICS* - it allows stuff like screen readers to do all sorts of magic. It makes sense of your BS maze of divs.
Useful for screen readers....
@@seannewell397 you can "apply" tailwind styles to elements in css, like this: header { @apply flex }
@@SkywalkerWroc Nonsense, I just make a maze of article section, main and aside without a single div but all of those misused.
What are you talking about?! Button is one of the greatest elements ever! It allows you to create, well, a button without much effort, and it automatically is accessible. I mean, how much work would you have to go into just to make a div act like a button, as well as being accessible. Plus, the default styling is fine, but not perfect, and you will be creating your styling anyway. Probably the biggest reason why it's amazing is because you can tell when an element is a button while reading your code. Why in the world would you want a div pretending to be a button? It just makes reading your code worse.
yep pretty shocked by this too, and this guy host courses 😅
He was obvously trolling
The "strong" tag is what it says it is, strong.. Not bold. The browser happens to denote a by making it bold, but as a designer maybe you choose strong is denoted by red, not bold. In that case doesn't make sense, it contains strong text, not bold text. Bold did already exist when they created strong, but they introduced it for the reason's given.
Or so I always thought anyway.
"Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning of the content contained within them. By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page." semantically, it's strong, not bold. Makes perfect sense :)
Yeah, always a problem with overly visual people assuming design concepts over purpose and semantics
There is also the point of accessiblity. The concept of "boldness" doesn"t make sense to the visually impaired. The concept of strong"ness", aka. importance on the other hand, is universal.
You should make a CSS properties tier list as well
And JS keywords
I second that.
Canvas is the ultimate tag, it lets me render my whole page using OOP like we did with Flash and actionscript back in 2005. I can have the pleasure of reimplementing the entirety of the browser's behaviors in my own program and not have to bother learning how the browser's behaviors work. Who cares if my minified gzipped javascript payload weighs more than the browser itself? I can do my animated wavy inputs if I wanted to, and that's what matters in the end.
Please stop you are making it look bad it shouldn't have to be associated with the likes of you unwillingly.
@@nicholasmaniccia1005 He is doing a good job, let him cook,
The difference between strong and bold is seen when you have a reader on. The reader emphasises on the word within the strong tag and ignores the bold tag. Similarly, when comparing and , should be preferred. Adds more accessibility to the website.
“Nav…doesn’t do anything, but it’s very accessible.”
Providing accessibility is doing something.
There were 3,225 website accessibility lawsuits filed in federal court in 2022.
that's usa for ya
You need a good Experienced Senior Dev or CTO to dump a stack of documents regarding HTML out on your desk, or call you out to the Water Cooler for a good one-on-one session. I am half tempted to fire up a massive rant video or do a massive blog posting somewhere to literally CALL YOU OUT! You just spread a lot of bad information, especially to new(er) developers who actually believe you know your stuff (when it's apparent with HTML Elements that you really don't). This stuff is well past being a mere opinion and goes into actual factual land.
12:15 The idea of element is to allow creative decisions. Some big publishers like to swap images in the content depending if you're using widescreen display or smartphone in portrait mode and the element can do this without any JS. It also supports defining separate images for HDPI-displays vs normal monitors without using JS.
If you're not interested in any of that, has very little value for you.
Except alternative image formats. Like supporting JPEG, WebP, AVIF, and JXL and PNG....
Theo doesn't care about accessibility and that makes me sad
Everyone knows the greatest HTML tag
Frontend dev not knowing the purpose of HTML... while being on YT... This is actually sad.
Seems like they just let anyone on here am I right 😂 - by the way, it’s just for fun. Thanks for watching.
Yep. At times it was super-frustrating to watch.
He's literally half a fried banana short of a whole sandwich when it comes to working hands-on knowledge of HTML Elements. I honestly didn't realize he had this much of a serve gap when it comes to HTML (I had assumed he actually knew more).
Putting the Tag in D is outrageous
There’s a good lesson in here, and it’s that EVERY dev needs to be thinking in terms of accessibility when building their websites and web projects. Optimize where you can for screen readers, easier tab navigation, etc., even if that includes using tags that you might think are low tier.
At my current job we do not have the resources to completely rewrite our site to potentially reach 10% more users
@@nnnik3595Accessibility doesn't exist to "reach 10% more users 😇", it exists to help people live their life and do stuff without being unnecessarily discriminated against or denied service. It's hard to understand just how important it is if you haven't been in the situation yourself.
@@nnnik3595 if people used the correct tags since the beginning, you wouldn't need to rewrite anything
@@nnnik3595 But I'm sure your company keeps accessibility in mind for any further development, right?
@@nnnik3595 Rewriting anything takes a lot of resources. But using proper HTML isn't like picking out the perfect data structure or system architecture that you don't know you need until you run into the problem that shows you that you need it. The answers for writing correct HTML from the beginning is literally in the specification of the language. At least have honesty to admit that your company and dev team underestimated the value of a basic technology and not present it as a cost / benefit issue.
Chrome: Let’s just make up stuff that’s not in the spec
Firefox/WebKit: What the fuck
Theo: Dude these other browsers suck
100%
At some point I got to question if he's paid by Google, lol
I changed the title of this video using inspect element to Lol inspect element. Massive improvement. I've seen it out of the corner of my eyes and giggled multiple times.
Dialog element is htmls way of doing modal. Its a life saver. No need to include any library to do a modal is just amazing.
"I have feelings on head, on one hand I love it..." - Theo, 2023
By far most underrated comment of the decade
15:44 "...I have feelings on head. On the one hand I love it, I love that there is like a place to put things..." 🤣
Why are we using W3 schools instead of MDN?
W3schools is depricated
There is only div
For anyone who has ever had to put together a math/science website without the use of any plugins, is definitely NOT D-tier. Alas, so many young people are in programming who have never had to actually do math or science papers. (writing this at the 17 minute mark)
Fun fact: is part of the reason DALL-E exists!
can you explain? im curious
@@Jupeofficial When creating the datasets for DALL-E (and Stable Diffusion, and Midjourney), researchers needed very large datasets of text that directly described images, because those tools rely on mapping image vectors to word vectors. The figure tag consists of images and a caption, so you could automatically scrape the whole internet for image-description pairs! They did the same with images and alt-text, so accessibility standards made generative images possible as well!
is a HTML 5 addition to replace ... is not an optional tag your page must have a tag that is in a
I used and for the first time earlier today, was curious to see how you rated them.
I like that you are reviewing and ranking tags, but dude, you have zero knowledge about what HTML was designed for when you rack down on elements like blockquote and refer to default stylings, html is not meant for styling but for describing content semantically which you seem to have zero knowledge about even though you state you like yourself son semantic html. /rant
Chill... in the next video he'll rand about how HTML elements shouldn't have any styling (as he did in the past), lmao.
But yea, impressive just how little he knows about the HTML given that it's his full-time job. It's supposed to be funny, but at the same time... the king is naked, lol
I love the dialog tag, very convinient to implement modal, drawer, etc. and its already provides a set of accesibility features by default. But, if I want to use the modal mode (.showModal()) instead of the non-modal one, for now its kind of annoying that existing high-priority "floating" elements such as Toast need to be rendered on the top-layer too. The new popover attribute seems promising.
Dialog is good but it's inconsistent in browser implementation of focus trapping is painful
I like dialog a lot because its a semantic way to denote modal-y things, but in practice I still ended up writing plenty of JS to get it right.
How is `form` S tier and `button` is D tier. `button` affords default click behaviors defined on the `form`.
I think he might've been memeing putting button so low, but god damn it triggered me. What about the default "tab" behaviour 😢
The guy doesn't know what sup or kbd elements are.
True but outside of form button element is just a worse div, you have to basically strip it of it's default styling and make it a pseudo-div before you can do anything with it. If it wasn't necessary for SEO I would never use it outside of form.
@@Maleficarum999why? If you don't need clickable elements outside forms, then obviously you don't need it but why would you complain then? And if you do, what person would use a damn div for something interactive? Then you have some random clickable div with a tabindex, whyyy
@@LuLeBe I have never said that I use div element instead of button, what I said is that you almost always need to strip button element with it's default styling to the point when it becomes a pseudo-div.
the rating here is very weird. HTML doesn't have "default styling", your browser does. "strong"/"em" text and "bold"/"italic" text are not the same, so it isn't weird that they're two different tags. and math is actually an extremely useful tag, although i think MathML has shown to be a bit dated... would be nice if we could just ``
I was hoping to see , it's a tag where HTML inside it doesn't need to be escaped for it to show up. Deprecated but it's funny to me
Style and script are GOAT because you can deliver a whole application on a single html file. Also just Base64 any image, audio, video and BLOb.
Prove me wrong.
Regarding 19:13, you can use the scope attribute of the element to specify that.
in C tier? Have you ever blogged? S tier, definitely
Learned so much from this, thanks 👍
"There's a lot of faith necessary with progress" - Theo 2023
Disagree about citiation.... what if you're citing a work that is not on the internet... i.e. a book citation.... you wouldn't put that in an tag
is a source for and , and an alternative to cite attribute. All three should be in the same tier.
I think that you've misinterpreted the header tag. The header is not simply replaceable by the nav tag. The header tag can exist multiple times in your document. It can represent the header of your page, the header of your article, and even the header of a section inside of your article. I think that you are looking at this from purely a dev perspective, while forgetting about the content consuming perspective. Semantic tags, such as footer, header, section, article, main, aside, etc., should at least be A tier in my opinion, since they distinguish semantically between parts of your document and define more structure, unlike the traditional "divs for everything" approach.
That was fun an didactic. Please do one with CSS elements and JavaScript functions too 🙂
forget that mean old man, I'm jailbreaking you out of his lower tiers and posthumously awarding these honorable S-ranks:
and A-tier for
There are elements other than div?
They should have given the div element a type attribute. That alone could have cut the number of HTML elements by half.
This list is completely invalidated by the lack of , and !!
Commentary-wise the vid is average, but gold as an HTML refresher. I mean, to promote over was just inane and heartless, but a comprehensive 30-min overview with no fillers, hard to beat that.
I'm appalled and disappointed by your decision to make an S. It's an element which by design can't be styled well and causes unimaginable amounts of pain to people who do any significant amount of UI work please reconsider your life choices 😠
Html elements tier list from the guy that doesn't even know how to close a div
You've never used fieldset? If you want accessible radio buttons, w3c says radio buttons should ALWAYS be grouped using fieldset
I somehow paused the vid at 69 elements and I'm proud of myself
If had a close tag, that would mean there would be a line after too
For anyone that is just here to see the placement of , here you go: 27:00
Damn that justification was deep
This video made me realize I can do a lot of things with html without needing css. I mean WTF is marquee and why didn't I know about this insane element before??
is solid A tier, sir.
I've always dreamed with , but it never happened =/
I don’t like how invested I am in this ranking 😂. I’m literally arguing out loud against you. Solid S tier video 👏🏾👏🏾👏🏾👏🏾👏🏾
blockquotes are useful in markdown, they allow to wrap text and style it different by just starting the line with >
As marquee enjoyer i loved how simple this command makes it to emulate dvd screen saver.
This is genuinely a great HTML tutorial for someone who has used it but does not on a regular and only uses the very well known tags
Have you ever tried styling a element
Main reason for web developers reinventing wheel syndrome 😂
@@sairajmote8010 what do you mean? I’m just trying to make the wheel a different color!
@@dopecello8670 it's clearly illegal modification
I hate that you cannot change the color, there is no alternative that is assesible too so you have no choise
Slots, template and style deserves better.
ul is one of the best elements. It's good for accessibility, and does not describe a specific order. Most lists don't have a specific order. Then again, ol is mostly used for ranking stuff, whereas these numbers could maybe mean other things. But they are rarely used for other things like this.
Imagine making tier S and semantic tags tier D
Html is not a programming language Html is a programming language
article is not just for an actual written article. it's also used for an article (item) inside a specific section. people usually use ul and li when a section and article are a better fit for a lot of things (for example, a store page with many items, each one should be article). mdn describes article as "self-contained composition of elements which is intended to be reusable". that kinda sounds like every component we ever make..
''We dont want those pesky JavaScript guys coming here ruin it all'
*
*proceeds to launch the thing into outer space tier
28:05 is really helpful for breaking down your page.
Omg how dare you. Math has come in clutch SO many times when I’m trying to export a pdf of my python analysis. I need to explain my math and Jupiter is rendering in HTML.
Wow, I really lost quite a bit of respect for Theo in this video. He showed a decent amount of ignorance here, and fair not everyone knows everything, but to then act like he knows enough to rank them? This is basic stuff too, has he never look at the list of tags before? As a frontend dev he should know many more of these.
towards the end, this tier list devolved into absolute degeneracy and as of writing this I exclaimed "NO WTF" in at least 5 seperate instances. Good job
21:10 button reasons:
1. looks like button
2. can tab on it
3. can click using mouse, spacebar, enter key
Goddamn I love your attitude and way of speaking :D new channel for me but so entertaining even its job related. Almost good shit as Fireship.
My favorite element is which wasn't even listed there
If you were attuned with the SEO field, the rating for most of the elements would have been better. Tho the elements mean little to developers but are very important for proper page ranking and on page seo. It helps Google bot understand your website structure even better. I m a developer but I took some courses on SEO with Coursera to better understand all these concepts and the necessity.
Theo dissing web component so much has me convinced that this is satire 💀
No D-tier list. Bring back
just feels like home.
How does replace , though? Isn't supposed to be nested in ?
Yep.
Honestly: This whole thing smells like a test for "how well do you know HTML" and with "WTF is " I already knew it will be going down hill, but... damn... he has no flippin clue about basic things like kbd or figure.
Theo u r my favorite front end dev
Couldn't make it to the end of this one... I was losing way too many braincells. I can only hope you're trolling...
That "progress" joke was SSS tier 😂
Absolutely disagree with the youtuber, but now I know I’m very familiar with almost all of these already.
And the nice thing, I discovered a few things, and this video was entertaining. So thanks! 😊
Why is marquee S tier when it's deprecated?
No, seriously, what am I missing?
the meta placement for sub compared to sub, lol. was fun though
Now we need a CSS property tier list
Details tag is amazing. Because browsers open them up when you search the document (compared to other forms of toggling content)
If your SVG is doing weird stuff in 2 of the 3 rendering engines, then you are using Blink specific feature and might not be an official standard.
Math tag is s tier
this is a cool video, thanks Theo
This was fun and super cool!
This is not 142 elements.
6*14+10=94
I worked on mostly web apps and React Native for a long time before needing to actually understand HTML. I remember the first time I saw all the different tags I was like "don't these guys know you can just use div lol"
Otherwise great video but I would say I hate with passion as a reader of any web page that uses it. As a result, it cannot be S tier.
I am glad I am not the only one who ironically loves the marquee tag :P
My boss was so disappointed in me when I mixed up header with head element.
" i have mixed felling on head, on one hand i love it" -theo 2024