I Ranked All 142 HTML Elements
Вставка
- Опубліковано 11 вер 2023
- 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/create/html-ele...
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. ua-cam.com/users/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.
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
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.
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
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)
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 "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
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
You should make a CSS properties tier list as well
And JS keywords
I second that.
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....
“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
Theo doesn't care about accessibility and that makes me sad
There is only div
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.
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 Do it in the future, you don't need to rewrite everything. Just try to be considerate!
@@nnnik3595 But I'm sure your company keeps accessibility in mind for any further development, right?
Why are we using W3 schools instead of MDN?
W3schools is depricated
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.
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
Learned so much from this, thanks 👍
I used and for the first time earlier today, was curious to see how you rated them.
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!
"I have feelings on head, on one hand I love it..." - Theo, 2023
By far most underrated comment of the decade
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.
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.
Everyone knows the greatest HTML tag
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 >
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.
After just learning about the dialog element, it's actually an interesting way to omit these manually coded modal implementations, because the important function comes right out of the box. It just reads like it's still just a consideration including all possible random ideas, but I want to try and use it sometime just to see if it's really a replacement for doing it the old fashioned way
If had a close tag, that would mean there would be a line after too
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 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
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
That was fun an didactic. Please do one with CSS elements and JavaScript functions too 🙂
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.
Slots, template and style deserves better.
I somehow paused the vid at 69 elements and I'm proud of myself
"There's a lot of faith necessary with progress" - Theo 2023
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)
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.
Details tag is amazing. Because browsers open them up when you search the document (compared to other forms of toggling content)
I learned so much from this video tbh!
this is a cool video, thanks Theo
Now we need a CSS property tier list
Regarding 19:13, you can use the scope attribute of the element to specify that.
This was fun and super cool!
But tell me, what with the styling with table tags? Why can’t I put border radius to thead and tbody?
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.
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..
Cool, but how do you center a ?
For anyone that is just here to see the placement of , here you go: 27:00
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.
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..." 🤣
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
I am glad I am not the only one who ironically loves the marquee tag :P
The picture element seems like something you write a PHP function to generate and then just never actually write by hand again.
is solid A tier, sir.
I've always dreamed with , but it never happened =/
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.
My boss was so disappointed in me when I mixed up header with head element.
is s-tier man!!
Imagine making tier S and semantic tags tier D
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
As marquee enjoyer i loved how simple this command makes it to emulate dvd screen saver.
This was great!
ALL the CSS next!!!! :)
Many of these elements were defined and specified by the person who went on to co-found the Flutter project.
just feels like home.
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.
21:10 button reasons:
1. looks like button
2. can tab on it
3. can click using mouse, spacebar, enter key
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
My favorite element is which wasn't even listed there
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.
Damn that justification was deep
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.
How about a top tier list for methods in the Window/GlobalThis object?
Valid html is …
29:05 But what's the difference between and then?
I don't know why your q copy didn't copy the quotes. It works for me. But you have to copy the entire thing. OR, copy a part of it that includes a quote boundary and it will wrap the other side for you. Maybe your browser doesn't do it right?
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
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??
css properties next?
28:05 is really helpful for breaking down your page.
Header, body, footer... What do you print from your website?
With css you can cut content to different pages for printing...
There's no element for it in html? Sad.
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.
For page title h1, for section title h2 and for item title h3 simple
8:47 i think it say typically, since terminal browsers still exists and in most cases they will render the text in a brighter color :O
I would like to know what do you think about the `time` element?
I've only found it useful once, and it wasn't strictly necessary since it could have just been a data attribute
Theo u r my favorite front end dev
Theo dissing web component so much has me convinced that this is satire 💀
is a HTML 5 addition to replace ... is not an optional tag your page must have a tag that is in a
No D-tier list. Bring back
Do we hold input accountable for what the user enters?
It's funny cause the semantic tags were those I've put the highest.... Since I still love writing small html code by hand it helps a lot cleaning up the code ;-)
Tailwind developers generally don't like a smaller DOM
23:54 is for naming browser tab
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.
the meta placement for sub compared to sub, lol. was fun though