The Surprisingly Exciting World of HTML Elements

And those are great because you can directly do it, but not every website and how they work because just a div? I think the answer to that is they don't do anything special except for what the Semantically describing the content inside of them. Semantically. And

to

Google the tags with no means. Often, you use them for flex rid childs or you just need to wrap a whole bunch of stuff. Grid grid children, they are still very, very I would say they're probably the most common one rid Because in some cases, you just need to wrap it around for sup and sub is that you can nest them infinitely, special

or even, like, your there's a,

is

Crawlers.

not there's not a telephone tag, but there's a tell attribute.

has those. And it's nice To just tell

You're just scooping up some CSS in there instead of it doesn't it doesn't matter. It's just a it's just a vessel for CSS is what I'm trying to say,

but nothing had any meaning. And now we have tags that have a whole lot more meaning to them. So rid Do I still use divs? Yes. There's still lots of times when you need ecommerce in general and HTML if there's there's nothing specific there, And,

with no meaning, and it's usually just to, okay. HTML tags with no meaning, div, span. Div is the block level item for just saying, hey. That's some stuff. Okay? Just deal with it. And then span is the inline tag for the same thing. Hey. It's just some it's just something. I don't know what it is. I don't care. Span, div. For a long time, These were like the tags. It was like paragraph, span, dig, h ones, links, whatever, We we gotta do one last,

for free. So thank you so much for Century for sponsoring this structural semantic HTML episode. So You have some, like, I verse m and bold verse strong. I standing for which is describing the style that's being applied to this, where m is describing this as emphasized even though they both just give it italic.

or potentially serve as, like, you know, one of those, like, scoops. You know you know those, like, scoop chips? Yeah. I think they're called Scoops toward Yeah. Tostino scoops? Tostino scoops. I'm on board. Yeah. The div tag is the Tostino scoops for CSS.

strong and bold your errors and exceptions. Put them right out in front of you, rid. So that you can you can attack them. You can treat them as GitHub issues. You can attach them to specific releases. You can monitor their performance before and after that release. Re You can do so many cool things with Sentry. And like HTML, I'm always just scratching the surface of what you can do with Sentry because there's so much. Rid There's a wealth of different techniques and tools you can use to really capture your bugs, find them, solve them, and make your users happy. So if you wanna check out Century, head on over to century.io.

Use the coupon code tasty treat, all lowercase, all one word. Sign up, and you will get 2 months rid aspect of CSS. Some tags don't really have a semantic meaning, but just have rid Basically, a visual season eyes and ears and everything like that and hands, and if all your stuff's, you know, fully working, Tables, they need to behave a little bit better a human being with normal functioning

we've talked about this on the podcast before, right, where somebody has

you probably don't want the The h four to be the biggest thing on the page. That doesn't make sense visually, hierarchially

the ability to structure your content.

whatever that word should be. But like Like you said, it's a table of contents. And, typically, that visual aspect of it does follow the table of contents the same way, but not always, and it doesn't need to. Rid So as long as you're thinking about it like that, the visual, the size element, yeah, that should all be CSS. So let's rich. Talk about one of our sponsors today that's going to give you I'm a huge fan of this, API. I'm a huge fan of Cloudinary overall. Read. You can add text over top. It is truly a playground for serving images. So

it's important to say, you don't think about what it looks like. You think about, again, How you describe it, semantically

Yeah. I usually do and I don't know if this this necessarily matters. I do h one for the the

Because you want it to look like whatever an h three looks like to you, but you need it to semantically be a different size. I think that's totally fine. You think that's true too? Yeah. Totally. And I've rid. Arguments with people on Twitter about this. I will defend this. And it's it's not like you have to name that class h two, like, because that's people's big arguments as well. It's confusing

And then you go off from there. I think what's really important is you need to think about your website as a table of contents.

Wes, do you wanna talk about one of our sponsors today, which is rid Prismic. Yes. Prismic, you know, we they've sponsored a whole bunch. They're a headless CMS. One thing I wanna focus in on today is that they are a component based What are the other ones that you use pretty commonly?

rid. Somebody has given an h two with the class of h three, and then they're like, this is an outrage. Why would you do this? And I I've probably said that myself, but it's I think that's fine rid

belonging to. Rid. And if you want it to look a different way, then just use CSS. And CSS y thing. But there are some, like, limitations around a component

hierarchially man, overflow scroll is probably the best bet or just to not use HTML tables rid Overall.

And the incising of your headings is definitely not need I mean, visually,

From your website's heading tags, would it make sense? Right? And don't mix them up with the fact that you want them to be a specific size. This is Something I've ran into many times in my career, and I probably have done it many times, is that I'm like, yeah. It it should be an h three because it's nested under

The actual h two with the class of h two. Alright. Then give it a class name of heading level 2 or level 2 heading or size 2 heading or whatever you want. Big boy. Yeah. Big boy. Actually, we have a, heading, that rid Figures out its level all out by itself.

In h two, and it belongs to the h two's sort of subsection.

describing the content that comes under it and what that content subsection is

extra big ass heading in our site. So, like, you can name them whatever you want for whenever you use them,

I have now attempted 3 separate deliveries of my refrigerator and all of which have failed. I ordered a refrigerator from Lowe's.

is just like, one, it is so angry That if I were to stop talking and turn the gate off of my microphone, I'm I'm 3 rooms away from the the kitchen. You would be able to hear the refrigerator. It is loud. Compressor's going. Yeah. Compressor's going. The door with the water maker and ice maker completely broken. The fridge is on its Last legs. It is like if you could interpret the sounds my fridge is making, they're saying, help me,

very interesting I often want rid to group together Do they do anything versus using a DIV? Special in what way?

I said,

they do all kinds of stuff. We'll talk about them partway through the episode. Rid How are you doing today, Scott? Wes, I I don't know if we talked about this on the show. This is a little outside of HTML, but

a surprisingly

They could not get it into my house, and they, like, were like, well, we could leave it on the front lawn.

so you can't take the doors off. Rid Like, do you not think these are just, like, wiring wire clips? Yeah. You can just unclip the wire. Yeah. Yeah. You just unclip it. Come on. And and then they wouldn't even wait 5 minutes, rid So I had to deny the the the refrigerator once again. And our current refrigerator on

and I I need to get this thing out of my house. So that's kinda how I'm doing. I'm also highly caffeinated. I'm ready to talk about HTML. I'm a big, big fan of HTML as you could tell from Scott's HTML breakdowns.

what would we talk about? And then we started talking about it, and it was like hokey re Hokey Doodle. There is a lot to go over here. Some really interesting stuff about HTML elements as well as, near the end, we're gonna talk about what rid. Elements we would like, and I also asked on Twitter some really interesting

if you're just dreaming up new elements. And and there's also some new ones coming to the browser too. So We are sponsored by 3 awesome company, Prismic, Headless CMS,

like, month input. You have to actually format it to be specific type of string first. Rid. Like, that is bananas to me that they didn't think about, like, they didn't think about how that would just play with an HTML date.

then you just go,

Yes. I agree. I want that as well as A text area that grows with it. A lot of you are probably saying, you can do that with x, y, and z, and and I'm saying, I want this to not have to take rid Fifteen lines of JavaScript to work. I want it to just be in the browser by default. It's always a slippery slope because often when you do get these things in the browser, rid Like a date input,

flexing, whatever. I always just opt rid. For, like, a scrollable table, just set, like, the overflow width to scroll, but, like, that's not that great.

something that works better with modern grid CSS, cards that we have when you go to our forward slash tutorials page. There's a bunch of cards for each of the tutorial series. Each one of those is an article rid Because it's its own individual piece of content groups rid Several fields together.

Our wild, wild world. I've been using the month element, and did you know the month element input is, like, not compatible with the JavaScript date? To get a month input result to be a JavaScript date, you have to do so much work and vice versa. If you have a JavaScript date, you can't just Hop it into the HTML, I would've been just wearing it for dance lately. And I put it in the little hat cage, and then I put it in the dishwasher, and this thing is perfect now. Squeak clean. It looks better than it's ever looked. And it was only, like, $12 for a 2 kit. I have a lot of hats, so washing multiple at a time was important to me. And, It really beats, you know, washing it by hand and ruining it or putting it in the

for all of your inputs Yeah. For shipping and billing and credit card. So I think that's the closest thing we have to ecommerce in HTML

not that I don't know what a in a shopping cart tag would do or what significance it would hold, but, like, Let me go thinking about, attached to the main text to indicate Pronunciation or meaning of the corresponding characters, and the the examples they they, showed were all, like, Japanese language examples. They would show some rid Congee, and then they would have the the hiragana katakana over there, whatever, describing it, what it was, or what the meaning of that big character was. You know, that that's cool. I've never heard of that. You know what? I'm gonna maybe we can move this into a little bit of a stump and try to stump each other as 1 or 2. What is the WBR

a pretag that shows rid. Email elements without needing to encode.

I was saying you you can kinda do that with display block and on script and style tags rid Because script is that style tags can be display blocked, and then you could see the contents in the HTML. It's kinda cool. If also, if you pair that with content editable, If you use a b tag even now, people bark at you and be like, those are deprecated.

kinda interesting to see a card tag. Typically, I use article for all of our our our cards.

At least a Scott attribute at the very least. That's the end result of that slippery slope. Let me just let me hammer off a few more here. Date range, a hero tag,

own related main tag for the main section of the site. I always use 1 1 header, but, Okay. How much? I don't know what we could do. I don't know how much you're down, but I'm willing to donate $100 to a charity of your choice or a $100 to charity of my choice Just as a little for fun thing here. Okay. I'm going to say $100 to the Human Foundation programming interfaces or where you you program something for it to be used in visual Or even like video games. Right? The computer is only drawing the stuff you're looking at many times, or that was, like, a common

chunk

I I actually wonder about, like, what what they do differently but it's just to decide, hey, or to denote that this is an address. Re Hey. It doesn't really have any other specific anything other than that, and that's neat. And it's not one I use too often. I really like that Because we have also, we have, like, Open Graph meta tags that are used to specifically give specific pieces of information That's me to grump on another day. Another one might be a better table, Yeah. I I mean, I for a full archive of all of our shows, and don't forget

If you were to have, like, a main section of the page or do you have an aside, I bet that would change the, like, the tab layout. I bet the aside has, like, a lower tab order. Rid I I don't know if I'm speaking

just wildly here, but rid Feels a little bit weird. Right? Definitely. That feels weird. Yeah. And if there's margin or padding on that, you can you can simply pop it off or or give yourself a utility class that has all of rid The that text stripped from it. So that's basically why you would use it. Right? It's gonna make your life easier overall. It's gonna give you better SEO, and it's gonna make sure more people can use your website. The last thing you wanna do is build something that is inaccessible to people. Right? And All of the images on level up rid Trails .com are hosted on Cloudinary. I've been using the service for a very, very long time. Use the link in the show notes here To sign up for Cloudera, let them know where you came from, but you can edit, transform. You can do all sorts of stuff. You can, turn your photos into a West rid. Boss, old timey cowboy sepia photo if you want.

that's being iterated on on the site. So article basically distinguishes that thing as being its

of content. So the question I have is we've had all these structural tags for, I don't know. Probably 5 or 6 years now in HTML.

let me see. Inside HTML double on that rid Sick pick of yours. I'm gonna pick a product. This is something I I wear a lot of hats. Wes, I don't know how many times you've seen me not wear a hat, But I pretty much mostly wear hats, acknowledging it. It'd be interesting if there was, like, a product tag. Right? This is a product. That's true. There's a open graph tag for that, but not a Mhmm. HTML tag. Yeah. Yeah. It's a slippery slope with with all of these things. Just thinking out loud. Why don't we have a Scott tag for for, photos of people named Scott? A Scott tag.

I know you know the answer to this, obviously. I've just started answering asking for the audience or someone who's new to this. It's like rid. Why do we use these all instead of, I have my main link, which is podcast, But then above it, it says the syntax. And then Oh, so it's, like, multiple items in there. Yeah. You need to, like, group together things. And then also on the I I don't know if this really makes sense, but if there's no CSS on the page,

assistability wise. But

that this is a card or a piece Sup uses m's and is relative to the Sup it's inside of. So that's why every single time you nest 1, it gets Smaller and smaller and smaller. And then, also, it will base its initial size off of the font size of whatever parent it's been set on. Yeah. That's probably one case where you don't wanna mess with m's and just keep it like that because you you want it to just work without having to Style 11 levels deep of of m's just in case. Here's a fun one that I never heard about before was Ruby rid RT and RB, which is a Ruby annotation for small extra text tag to describe

I think granted if you're using SVGs, it's just an image tag, but maybe Maybe it could just denote that, hey. This thing is visually represent representing an icon that goes along with something. Yeah. I think we definitely need the icon tag. Some other ones we have are the and include tag. So being able to include HTML from another file Oh, yeah. Is not something that's possible. And we have a iframe, but That is not the same thing. A card tag, I thought, was kinda interesting because there is no semantic Alright. That's it. Thank you so much for tuning in. We will catch you on Monday. Peace. Peace.

of a website. Maybe a section tag would be the closest thing we have. Article. An article tag. Yeah. Yeah. Those those would work, but it'd be kinda

remember, what was the icon tag that Font Awesome used initially? Was it the eye tag that they just, like, hijacked the eye tag and then put glasses on it? Oh, yeah. Yeah. Yeah. It was the italic tag. They took it. Yeah. That is not a great and we all just kinda went with it. We're all just like, sure. I I icon it. And then we're like, well, I don't know about this. Rid Yeah. The eye eye icon tag would be nice. We have our own icon tag on level of tutorials that I made in React components, a giant switch statement, and, rid I love that thing, just being able to pass in an icon tag and whatever.

Is that the brand? I'm I'm talking about a brand here. Yeah. Tostitos. Oh, there's a d in there. No. Tostitos.

in HTML

that have functionality out of the box.

together.

reasons.

Is that what you call them down there? Tostinos? rid You wanna you wanna highlight the currently

So I got pizza rolls, and, they're all wrapped up in 1. Oh, that's hilarious. We should have rid My mom on someday and ask her to pronounce things she cannot say half of the like a quesadilla or jalapeno, that the contents

and same with spans, really. Tostinos?

I love those things where you've been saying I I have so many words like that in my life where I've been saying them wrong My entire life, I've been combining the word Totinos and Tostitos

all of the

rid. Fire off an action that does not necessarily have a URL, and do not mix those up. That's a very inaccessible thing to do because rid. Sometimes, myself included, if you right click on a link and try to open that in a new tab and there's no URL to that like, rid. I see this all the time with, like, shopping carts where you're like, okay. I wanna open up these 3 products in their own tab and so I can view them. And then rid They are links, but they they have, like, some JavaScript bound to them because they open up, like, a quick view or something like that. And I'm like, no. No. No. No. Stop. I want to be able to click a URL searched word in the results.

that link off to each of the iTunes, Overcast, Podcasts, all that, but they are links. You think that's the issue? Is it? I don't know. I do too, so I'm I'm not, like, I'm not, like, obviously, that crazy about it. We have buttons that are are just links as well.

buttons

Milk, eggs, bread. The order of those are as unimportant. It's just a list of things. Mhmm. Whereas the ordered list is important.

maybe open up a quick view. Like, you don't wanna like, if someone clicks on a product and you wanna open up a little model and show them that of that stuff quickly.

necessarily have the same Yes.

The idea here is you want it to be kind of rid Right? If you have a form, let's say, and the submit button looks exactly like your navigation links or something like that, that's gonna be rid because that doesn't look like a button. That looks like it's gonna take you somewhere.

Crack the egg. Stir it. Oh, wow. Throw it in the pan. Those the order of that is is really important. What a phenomenal metaphor. Yeah.

on links that do, like, a void or or eevent dot prevent default, and don't do buttons that do window dot on them. Yeah. You also wanna make sure that even goes for CSS as well. I know this isn't a CSS episode, but, like, your buttons and your your your links that had no

I don't really have buttons that look like links. But I I often do have, like, a A list of like, let's look at syntax. F m. We've got

It's what does this describe, and Mhmm. How the list shows up on the page is up to you

That's totally fine, but still maintain the fact that that product has its own distinct URL. And if somebody Yeah. Rid. Right click's open and not to even mention the fact that that's good for your SEO is that you've got proper links. So don't do on click

CSS. Like, we have very distinct CSS for well, I I think that's definitely an accessibility concern. I don't know if I agree with that. I think regardless of how you're agreeing with it, I think it's still an accessibility concern. Is it? Because, like, they can look like whatever they want. Like, I have I often have Buttons SEO and accessibility

People don't often think about, like, virtualized lists. There's a a React project, React virtual I think React virtualize NPM install error log, then they can open it up and don't have to scroll forever past that whole thing. Number 1 wish, I wish it was just animated by default. Why? Because I like that little bit of flare. But it does. It pushes the content down when you open it too, so that's something to keep in mind. It's not like when you're opening this This accordion, I mean, you you didn't think we could fill a show? I think we could fill 2 shows with this stuff. Yeah. We should even do, like, a stump where we're doing exactly that, trying to guess the the CSS or the HTML tags. There's also sort of the, like, the visual

Maybe is the name of it. Either way, in in many other visual a container

But

I'm pretty sure rid That it it does that, virtualized listing, at least a little bit of I've I've looked into native development.

an Ios app that you're writing

Other ones that we have here is rid 1 I I'm gonna pick this one out because it was a lot of drama. Is somebody wanted a native carousel.

on overflow scroll, and you don't have to, like, worry about like, do I need a virtual list or not? Like, I don't know. Just Browser, make it fast. Right? Yeah. I'm pretty sure that's how, if you have, like, what they are, what Are they part of the header? Are they navigation? Are they footer? Is it an article? Is it a sidebar?

A bunch of people said I want a native carousel. And and rid A while ago, people went down this absolute rule where carousel should never be used for absolutely anything. And, If you have a details tag and then inside of that, you have a summary tag, re It will automatically

optimization technique is to draw the stuff rid you're looking at and not worry about the stuff you're not looking at. You do think of this the same way as lazy loading. You have a giant list of a 100 items. You're only looking at 3 or 4 of those items at the time. Rid. Why is the computer even processing or painting those other elements? It shouldn't even need to worry about them until they become in view. So, virtual list, would love to see that. It's like a easy optimization.

just be an improvement That's it. You nailed it. Seriously? What else we got here? Some elements that have rid Special functionality And I'm not sure what the Safari plan is, but I bet we'll we'll see that in the next 6 months in all the browsers. I'm gonna bet on it. You really? You you would bet that Safari is gonna get that in 6 months? Yeah. I'm gonna put it in my calendar right now that not gonna get it, but there will be a plan. Uh-huh. We're getting dialogue Uh-huh. In what's 6 months rid Now, and let me ask you. 6 months.

that

header of the site. I use nav tags. Re Anytime there's a navigation section of the site, I actually have a question for you. Inside of your nav tag, do you still put things in an unordered list? Because I've Stop doing that, actually. I started just doing a nav tag and then links.

group together things. Like, if you go to my website right now, like, westboss.com,

I do, and that's because semantically describe our code because, again, it's good for literally everybody involved, CSS,

tags, without indicating that it is more important.

doing research on this, You know what? You can actually use some of these a little bit more than what you might be thinking. Like, for instance, a header component

it does break it down into a nice bulleted list rid. Instead of just jamming all the tags together, especially if you use inline But, again, that's a that's a CSS issue because rid. You need to think about not what does this look like because that's CSS.

Article based content in time people, like, often misconstrued the article tag as thinking it's the blog listing tag. You know, anytime you have a blog post list, then,

in WordPress land, so I sort of like doing that. Yeah. I hear you. Yeah. No. I definitely use the section, the main, the footer aside. I use all of them, at least all of the main structural ones, the ones that were introduced into HTML 5. Like, when before HTML 5 hit, When you said cart, I initially thought you said cart, and I was thinking, oh, yeah. There's no, like, ecommerce specific HTML tags really considering how much, rid. Shopping is done online. That kinda rid h ones through h sixes on your page rather than just throwing everything in an h one. Everything is not an h one. You should probably,

If you have the level up to what we uploaded.

of semantic HTML tags like nav header, section footer aside, all that stuff. And, rid Man, I I I hit right from the jump. Now another one of these actually that we didn't have in here was article Oh, yeah. Which is used for What's funny is that I was very I we watched it. We watched it right when it came out, and I was very familiar already with the heist. You know me. I'm into heists. I'm in the all all types of,

is not just the website's Header. The header component could be the header of any individual content, and likewise, same with the footer. The footer could also be the footer of a blog post, not just the footer of your site itself. So you can have more than 1 header tag on your page, but a header should not be nested inside of a footer or another header, for instance. It it that wouldn't make any sense. Not gonna have a header of the header. I primarily use a header for the main Man, I've just kind of, like, grown to accept that that cookie banner is everywhere. It's so annoying. I wish I also wish that we had a

rid I grew up styling nested lists

your CSS a little bit easier to read because you know, okay. I'm I'm using this specific tag inside of it, especially if you're using scope CSS. And I know that we said, like, a while ago, like, don't use rid And Cloudinary on Demand image hosting transportation,

Then we also have a ul and an o l. Now many times people just use the UL for, what, unordered list for navigation. That's, like, the primary way that I or a dotted list. Maybe you have a dotted list. Rid But a UL and an OL are not interchangeable.

semantic meaning necessarily but needed to be a block level piece of text,

remove the styling from the paragraph tag. What do you what do you typically reach if it's like you need a block level element that has some text, or do you just grab a div? I always go for a paragraph tag because that's that's the text rid. Element by default for me. Yeah. And I no. I I always feel a little bit uneasy throwing text into crazy in our own code base. So, you're gonna wanna watch this one, level up tutorials at .comforward/pro. Also, I don't know. That whole cookie thing is a mess because these websites don't work without it anyway. Yeah. You know, half the time, these these sites are screwing up the CSS for it anyways. The the close exit button is obfuscated or something you can't get to it, and you're just like, I just wanna get rid of this cookie dialogue. You know, you try to click the buttons or whatever. I've had so many darn annoyances with those stupid buttons. But, yeah, that seems to me like it should just be in the darn Browser, especially when we're recording this podcast, Throw Them On. Just turn on a hat. Right? My hats get nasty because I dance in them. I get to sweat a whole bunch. Re Chances are you have baseball hats that, you know, are probably need a a good washing,

It it just reads really, really nicely. Then not only that, I I do, pretty heavy, like, a like, I've talked about a class rid Less CSS as my reset. So I have my CSS reset that gets everything back to normal, and then I style each element So next is the part of the show where we talk about shameless plugs. Wes and I, we both make a lot of tutorial courses.

it makes styling everything easier. Oh, okay. My paragraphs read. Like this. My block quotes look like this. My images look like this. It makes that styling sort of the defaults of everything a little bit rid easier, which is great, as well as it makes your, of a product before you click through to it or, like, I don't know. There's lots of use cases I like to have carousel. You wanna You wanna

not individually, but I style elements re 1st with no classes attached to them to give them the default styles for my theme, and then then I'll use scope CSS to override that as well. So totally totally hear all of that. I have a question for you that is sort of

The default styling thing is is neat because if you've if the CSS what you're going to allow.

many of which you might not use or even need to use, but there are a ton of them, and they all have a very Specific meaning. So along lines of what we were just talking about, specifically, a p tag is a paragraph tag. It is for paragraph based text, But like you said, it's basically the block level for text.

like you we've mentioned a little bit is that the HTML tags Have a meeting. Right? They exist

HTML tags rid to select your elements. But if you're using scope CSS, I I use that all the time. I I grab the header and the footer inside of a component or a block quote inside of a component, Paragraph inside of a component.

because there's a meaning. If if the tag didn't have a meaning to it, then There would just be 1 tag, and you would just say, hey. Use this tag. Here's the tag. Right? But every single tag exists for a specific reason, and there's a purpose for them. And if you were to look at a listing of, you know, give me all the HTML tags in the world here, you're gonna see that there is a ton of them, Many of which you may have not have heard of and, I am a big fan of semantic HTML, so I thought we would kick this off with a little bit of what is semantic HTML

inside of deeply nested value, maybe then you have to pass in what level of h tag it should render out. But then you put it in maybe the footer, and then it's a an h two. So it's kinda hard to make them flexible, and you have to pass that data in. Rid on my run into, but it seems like a lot of people are like, yes. This is the issue I have. Maybe I'm wrong about that one then. I don't know. Yeah. Someone also suggested an icon tag. Yeah. Give me that because whatever has

and, like, based on where it's nested. And I think that'd be kinda cool because if you've got a

I don't think that's doable. That doesn't really make any sense to me. A bunch of people in the comments were saying that there was a proposal for that initially because

to generate it. It I've I even seen in React world where people auto generate the Heading level based And it's all real, and it it does a really good job. It's not just like that. Some documentaries are just talking heads, but this is a really good job of reenacting some of the stuff and finding news clips, and there's the mob is involved at some point. And it has a This is actually a good example on context

based on its nested level inside of maybe main tags Or section tags,

you'd be able Google, Facebook, Twitter, whatever.

what this content is about. So making sure you have a correct hierarchy of

People often think about those as being, it's not as good as the one that I was using, so I'm not gonna actually use the real built in one. Speaking of, we need to have a whole episode on form elements specifically because we didn't even talk about form elements, and form elements

specifically

The name of the site is an h two, and the name of the page, the page title is the h one for that Eyes on knowing, like, how what the current status of the case is, you know, all of the players involved in it and maybe some of the situations or whatever, and it was just Absolutely fascinating. We breezed through it. There's I think there's only 4 episodes of it, but, yeah,

Now people often think of a heading elements h one through h six. You have h 1, 2, 3, 4, 5, rid Right?

So I I would say it's it's not like a hard and fast rule to say, like, You can't use button CSS for links and CSS links for buttons and vice versa, but I think there should be a pretty, at least, distinct Styling, that's not something I knew about. Oh, yeah. That's just nice nice default styling. Nice default styling. There's also the sub And sub,

Read. You know, one

SEO based. Right? Oh, you need 1 h one that describes the page and then maybe 1 or rid. 1 h two and then, you know, maybe a couple h threes or whatever, and you have this hierarchy of headings that describe the content of the page for SEO. And while that is definitely very accurate, these things are also serve as landmarks for screen readers. The ability to rid. Jump from section to section and understand What do you reach for? I often find myself reaching for a paragraph tag and then have to especially if it's required.

you should definitely only have 1 h one per page. H twos, I don't know if that's a hard and fast rule, but, you know, h two should be the 2nd most important content. The way I typically do it Is like you have a homepage, and on that homepage, the name of the site is the h one. But on every other page,

Understanding of this thing is going to this click this, it's gonna do something, verse click this, and I'm going to go somewhere. An action on the page. Rid Yeah. Yeah. I don't know. Like I said, I it's not a rule that I follow hard and fast either, but I think it is at least kind of a concern.

It's either that field sets can't be display grid or a field set can't be a grid grid item. I'm not sure what it is out of the box, but

field sets and CSS Grid that you need to be aware of. I don't think that for these things, and it's fine. It's fine to use JavaScript to rid. Override the click of a link to maybe

you can wrap everything inside of that form inside of a field set. I don't specifically use legend all that often. I used it once where I did this, like,

4 step

fields, like Scott rid Says, but one nice thing about it is if you wanna disable groups of fields at once, you can pop a disable attribute on a field set, And that will allow you to disable them all at once. Even if you just have a form and you wanna disable the entire form,

You could think of it as like like, this is a a set.

it's not going on top of. It's gonna push down. Yeah. So it's a really nice tag to know about. Not that many people use it, to be honest, And I I think it could be used a whole lot more. No Internet Explorer support,

legend basically creates a caption for a fieldset, and a fieldset

the big one that we have right now is called the details tag.

details tags work on GitHub. And if by default, it will be closed. And then If somebody needs to see your 40,000 inputs, and I use this a lot when I was writing my book on Sublime Text Because it was full of keyboard shortcuts.

Rid. Specifically, rid Just, heads up on that if you are displaying grid form.

And that's really handy. You should know this. If you're posting something to a GitHub issue and you've got, like, a 40,000 And if you were to generate a table of contents

unfortunately.

Along with the rest of modern web dev. Rid. The next one would be fieldset and legend. Now

Really nice. Really nice idea. So I'm surprised there's some good idea some bad super bad ideas in there, but some really good ideas as well. Yeah. Yeah. Of course. Yeah. Yeah.

should rid the content that is on the page. So you're using Rid So along with our sort of semantic elements, we have, like, layout based tags. You don't necessarily always want to use a div element for everything, and sometimes you need to group together elements together. So for that, we've got give you this little arrow that you can click, and it will open and close the details that are in there. And the summary tag is what will show rid when the thing is closed.

Some structural tags, some interesting

some fun tags, some tags that are more JavaScript required. Rid. CSS, there's a lot here, and we'll even get into a wish list of some elements that we'd like to see, including many from Twitter, which some of which I found to be actually

really dive into the what and whys of why you might wanna get into semantic HTML that we could talk about. Tags that have meanings, rid

I'm glad you said that because I was, like, looking at something. I'm like, I don't know. That's fine. But, yeah, totally.

And those tags describe And they say, where we really stand out is encouraging you to break your pages into rich. Use components for your code and matching slices for your design. So what does that mean? Well, you don't necessarily always think of your app or your website as where they pop a modal up, and that thing is totally inaccessible. So having a browser standard for that type of Pop up. It's called the dialogue.

So let's get into it. What is semantic HTML? That's a word you get, you hear it get thrown around a lot. Semantic HTML. Yeah. Basically, what that means that the HTML

the text, the images, different HTML tags. You're wrapping. You're including. You're sourcing content, So there are some elements or styling.

All the information about what it is.

So Cloudinary

rid This is a Robbery. It's a 4 part documentary. It's about they're all about an hour long each. My wife and I were very happy to find something that was super good. Rid. It's about,

There's also, like, q auto for quality auto, and it's going to actually degrade your image a little bit, but not like, Yeah. You know what, Wes? I would love to bet you something washer and dryer, maybe ruining it that way. It it worked really well, so I'm impressed. I'm happy to sick pick this. It's a piece of plastic that you put in the dishwasher, but it's shaped like a hat and, has the side benefit of because it looks like a hat, ready. Your kids can wear the hat washers around as if they're plastic hats and pretend that they're actually hats, so that's a lot of fun too. I had one of these when I was a kid because it's true. If you. I've put my hats in the dishwasher a couple times, and if if they get hot and then dry when they're flat, they don't never pop the same. It's a good good purchase.

that is it for sponsors. Do you want to get into sick rid Hicks, or do you have any closing thoughts on HTML tags? I think the the closing thoughts for me will just be that, hey, we need to do more. I got a sick pick for you today. It is a Netflix documentary

transforms these images on the fly and then keeps them around and caches them. That way, The next person that hits it, it's not going to need to generate that image. It's gonna load up extremely quickly.

robots, on a browser setting, Sounds like a some npm install.

and everybody else. Rid. Other developers trying to understand or read your code? Yeah. Absolutely.

Tab order. Let's see. Yeah. I don't I don't know if it does. I I know that you have like, on a website where you have those skip domain with the styling that we have, being able to put content in it, and rid. There's all these rules around, like, what you can do with CSS and not and just a better, more flexible table. Even which is a little surprising. There's a huge spec for autocomplete, means, hey. This content needs some extra oomph behind it. For the longest I thought, okay. Don't use I and b tags. Use strong and m tags because Yep. Those describe

Address the structure is. That's a good way to put it. Now when we were doing some research into this episode, we found a bunch of Fun tags. Some ones that are maybe, semantic tags that you may have not have heard of before, maybe you've heard of these. One that I actually found was kind of interesting was the Like, I don't what am I gonna do with that? I don't have a Dolly. It's just me and Courtney here. You know, I gotta take the doors off this thing, and they're like, rid I even asked them. I'm like, can you just wait, like, 5 minutes for me to take the doors off? And they're like, well, there's wiring, It's a set of fields, And you have a legend. These are all these all kinda describe themselves as they're being used. Yeah. Fields, it's it's in the name. I know. I'm like I'm like trying to use other words to describe the thing that it rid Actually is, but it it it just is what it is. Right? I use field sets quite often because a field set you can use to group together

The address tag

A link to the CSS

The HTML tags are basically comments describing what the type of data that's going to be into the visually going to degrade it. You can re You can change the amount that you'll degrade it based on the quality. But if you set to quality auto, I've never visually noticed a difference, and the images are all rid tiny comparatively Like, yeah, tabs. Man, everybody's got tabs. Why don't we get some tabs going? Or Somebody suggested a cookie banner, which is funny to think about that we have this, like, annoying cookie banner that you hit on every website nowadays because everybody's tracking you for some reason. Like, if you just simply use cookies to do auth or whatever, you don't have to use that cookie banner. But if they're having cookies to analytics track you, you do need it, like, tags.

tag.

accessibility, anywhere.

Content. Like, if you go to a website and just hit tab, sometimes you'll see this big thing pop up at the top that says skip to main. Yeah. And that will be a link

marking it with a main does help The top order, though. I don't think it does. Yeah. It might just be for SEO, but at the end of the day, if you were to have a div and a section and you were to put the same thing inside of there And you were to just look at that the output of that without looking at the code, you would not be able to tell the difference. That definitely. Yeah. They're basically rid The same thing in those regards. Not to say that it couldn't, though. And that that's why we always do our best to One of those is Giving it meaning, saying, hey. This is emphasized, and the other one is just saying, hey. Visually, just make this italicized. The same thing with bold versus strong where bold is a rid Bold visual tag, and strong

that we call them block level

a page anymore. You think about it in terms of re Once you start writing your CSS. Totally. We also have whole bunch of I'll rattle off a few more here. We have A link tag and buttons. So link is for when you wanna link to a page which has a specific URL, and a button is for when you want to But I want it to be bigger or smaller, so I'm gonna u ah, that that h way too big. I mean, I'll use an h four. And

like, as you wish, which is really sweet. So check it out. Prismic.ioforward/ And I put each of the steps in its own field set, and then I used the the legend because it does this little cards or sections or

re component, and you create a employee component, and you create a map component, and and then you can pull all these different slices together This is a good spot to do it. Let me tell you. This is a good spot. Yeah. If you got a break, do it here. If you got a break, might as well do it here. Yeah. Hey.

And output them. It works perfectly with something like React because React is also component based, and you can design these different components, click them together,

and Rid. And this might be we won't spend too long on this very basic thing. We'll get in some more advanced ones. But one thing I always I often see is people throwing rid. Just random stuff inside of it, o l and a u l, and it will work. That's the thing about HTML. Most stuff will work, but it's not that's not the proper way to do it. Rid you should only ever have a l I inside of a a list. And then inside of that l I, you could put whatever you want. So that's important to have, and you Style them. Sometimes people won't use the l I because they don't want the bullet point.

different structural,

syntax, the Spanish words. Just get to it. Anyways, what we're talking about, divs and spans line stack trace rid That you're trying to post in there, pop it in a details tag because And you know how those URLs will either overflow, are links that look like buttons, a div directly. Feels a little bit are

slices or different parts of your website that you sorta click together. Read. And Prismic from the get go is a component based CMS, meaning that you don't create an about page. You create a

store due to the mark's passage relevance rid. Tags, meaning that they are display blocked by default. You can change it via CSS if you need to. You might have a header tag at the top of your page. You can also use header tags within cards. So header is not just for the page header. It could be for a header of a a card or a different component. You have a nav tag, section tags. Section tags are really nice for where you say, like, okay. I just need to group together a whole bunch of stuff here. That is this, Literally a section of the website. Yeah. What footer aside aside is for rid Swipe through a couple images checkout form,

rid They have a really hilarious landing page as well along with some really good example code. Thanks so much to Prismic for sponsoring. Alright.

sidebars, which is nice. It's a nice name for it because it's not necessarily always going to be a sidebar. It might go above or below your content.

Yeah. It's I just wish that table was a little bit more flexible

because anybody who's ever tried to make a responsive table knows that at the end of the day, WBR.

was like, how do I add

rid Sarah Sweden on Twitter the other day. It was probably this is, like, 6 months ago. She

I forget. It was, like, overflow allowed or not, and everyone's, like, just out of order radius. And then she went down this rabbit hole of it being like Yep. It's not. You can't do it. There's, like, there's so many, and there's, like you try all these different little workarounds, and there's always something that you give up. Oh my god. It's a giant pain.

a border radius

We asked on Twitter, what kind of elements you wanna see in HTML, and we have, some interesting elements come in here. Now one of the which I'm gonna I'm gonna pick we're gonna pick 5 each. Is that what you have here? The one that I found to me the most interesting would be a a virtual list.

rid That has

Yeah.

Man, they're a figure, fig caption.

meaning.

So meaning that you can stick those into a

Break.

will

be hidden, or it will just, like, break it in a random spot? Rid. What you could do is you could put a WBR tag right before the .com,

It's like a break tag, but it's a break rid A word break opportunity.

promotional consideration is provided by WBR. WBR.

I love it. There's also a site for, citations.

no, I do not know what the w My name is Scott.

and you're telling the browser, hey. If you got a break,

rid.

com. So I'll have a link to the creator, form for that as well. If you're a content creator yourself and you'd love to do a course for level up tutorials, we want to talk to you. So Check out that form in the show notes.

if you're interested in becoming an author for level up tutorials, we do pay royalty based

for a list of all of them. Use coupon code syntax for $10 off. Super cool. I am going to shamelessly plug level up tutorials.comforward/pro.

man. That that course was a big one. It's a very modern approach to learning rid JavaScript, lots and lots of exercises, lots of playground. Pretty happy about that one. Check it out. Westboss.comforward/courses And the text will just go up and up and up and up and up or down and down and down. And you often see people on Reddit abusing that rid Because the text gets smaller and higher every single time because your superscript can have a superscript, and that can have a superscript inputs to look like actual keys. You like, you put a little bit of a drop shadow on it and round the corners and and make it look like an actual key on a keyboard. And by default, those actually get a a monospace the videos, the buttons,

Rid.

We do a new tutorial course every re Single month. And the latest course at the time of listen the the time we're recording, this is going to be our 1st guest creator of the year, and it's gonna be Brian Douglas is doing a rid GitHub actions. Now Brian works at GitHub, so who better to teach you GitHub actions? And let me tell you, this one's gonna be a doozy. I use GitHub actions like rid

This will not be in Safari in 6 months or even Safari developer preview.

There's so much here. We'll we'll split this out. We're we're

and Samsung Browser and stuff like that, and this is exactly that. It's a modal as an element. They're calling it a dialogue element, and I I think that's really neat. It's something that just about every site you use nowadays has a model in some sort of capacity, one big one here is the heading elements. Right? permanent or temporary disabilities. Right? They need to be able to use your site. We also have robots. Robots need to use your site too. We have the Google bot. A Google bot looks at your site. It sees a bunch of text. Right? If everything's a div, Just sees a bunch of text. But if you have a hierarchy of headings, you have paragraphs, you have captions and figures and asides and mains and navs and all those things, Google's going to see that as more than just a bunch of text, and it's gonna see it as here's the main topic of this page. Here is re Here's all of the information. So for the most part, it's

that the div had, like, a class of of, I believe Sentry. Sentry at century dot I o is the tastiest treat for error and exception handling service That allows you to see quickly and easily highlight them, It's very, very, very cool. So

And it really feels like there needs to be an HTML element specifically for it. And maybe here, dialogue is the one for that. Yeah. I think it is the one, and I'm really excited about this because that's an area that we often see people make inaccessible

running late here on some of our rid Sections that we want to get to. So we'll have to put out some more tasty and hasty treats about HTML because there's just so much here to talk about. It feels like we we hardly even got to scratch the surface. So I think we wanted to, end up with some, like, what kind of elements would we like to see? And one of the ones that you had put in here was a modal element To which I found the HTML element dialogue, which is not it it's it's not ready in most browsers. It doesn't work in Firefox. It doesn't work in Safari, rid It does work in Chrome and Edge and Opera

rid as well. That actually brings me back to shades of when somebody would have, like, almost like recursive

Yeah. And these are I actually use these myself to do, like, Maybe like a a note on, like, a price or maybe you want, like, some little, like, side information up top there. This is for anytime you have a superscript or a Subscript.

You know, let's say a div had a class of 2 m's, and then it was inside of another div that had a CSS property of 2 m's. Oh, yes. And you you get that rid. Application effect, and people would be like, why is this happening to my fonts?

And that's just a a a semantic texting. Right? If you have some information that is a superscript or a subscript,

m font

rid. You got the tag for it, and these actually give you

I usually tweak that myself. So I don't usually leave the font size Smaller, but if you were just going for it, then, hey. That might work. The fun thing about,

some really nice default styling as well where it gives you a vertical line of super, which may have not heard of before, and a font size of Yeah. I was going into the Warner Brothers, the, you know, the the tap dancing frog thing, but,

rid where the text would just get bigger and bigger and bigger the more you went into a div because, like, maybe the used for when you have an address, And you would just put basic text inside of there with break tags and everything, Dreams. So if you get a bunch of people to watch your stuff, then you get paid direct revenue from leveluptutorialsdot related. It's definitely HTML related, sort of related to what we're talking about right this instant. If you needed some text

I want this

There's definitely some usability, whatever, concerns there, but I I don't necessarily share the same hatred of carousels that most people do. Some people also said maybe, like, a tabs component.

re Baked into 1 in the browser by default, I want full control over. And, usually, what happens in the browser is when we get these things, even with, like, a select list, re People don't use them because there's you don't have full control over absolutely everything, and then they end up just using and

Yeah. And and and that is really it. Hey. This thing is hard to do. I gotta reach for a CSS or JavaScript or jQuery, whatever, to do this. Be nice if there was just an HTML because How many sites have used carousels? You know, regardless if people There's no there's no n in it. Yeah. There's no n. My bad. I've been saying Tostitos my entire life.

see a grid of items and then switch to the next item. Carousel might be a good one for that. So I think a native carousel. Rid A lot of these suggestions where There you go.

you know, Scott and I, anytime somebody is re Absolutist about something like that, we roll our eyes a little bit because you're probably being a little bit over the tops. Obviously, carousels have probably been been overused a little bit,

I don't really have that beef with carousels either. There are there's definitely some, you know,

but there still are very many valid use cases. You wanna which is for keyboard, the tab index of negative one. I don't know that specifically tag website title, h two for the title of the page,

and then you can choose

Cookie banner as well because then you could Could it not just be baked into the browser? Like Yeah. Like, some sort of API or yeah. Like, that's what I'm saying. Like, a JavaScript API or a or something in the browser or a header tag, thing that has style and functionality if I am wrong. Okay.

I don't know how that would work or what that would even mean. I mean, I get what they're saying. They're saying, I want an h rid. That just says this is a heading, and then the site is just somehow magically going to know its significance.

something, rid CSS or sorry. It's not CSS, a component based CMS.

Somebody says an h tag

You can edit the CSS 2020, 2021.

on your page live, which is kinda fun.

There's a lot of stuff here. What I'm kinda hearing from people is that re I want web components.

And maybe you can tell me this, Scott. Like, why is it important I agree. I and I wonder if that will eventually come to the browser, And you put that component

to use semantic HTML instead of just wrapping everything in a div? Yeah. Well, okay. So the biggest reasons to use semantic HTML, 1st and foremost, is that

as we've talked about many times, there are a 1,000 different types of rid More than, you know, millions of different types of disabilities from temporary to permanent disabilities, We can make that bet. Rid October

number 1 number 1 with the bullet, accessibility is the reason why you write semantic HTML. Number 2, smaller,

are the 2 big ones as well as default styling.

HTML, like you said, it it is the content. Right? It is the content of your site,

can really prevent how you use the the website. And many of the things that semantic HTML does for you is it improves the accessibility of your website For people that are approaching your website from not only things like screen readers or using just the keyboard. Right? We talked to,

Josh about his repetitive stress injury and the types of things that really get into your how you use a website. Read. If you're using semantic HTML, rid we were all just using divs and paragraph tags and spans for everything. Div, paragraph, span, under the list, that was the name of the game. Then all of a sudden, we got this explosion And you might take for granted of this, but

the browser

SEO. So you have 1. You have people with

then most websites group things together

So do you wanna talk about the styling aspect of it, Wes? Yeah. I think just in general, if you are using the correct tags, both.

and those disabilities rid The image to your users in the best way possible. There's, like, some crazy, crazy features in culinary. One of which is the ability to use f underscore auto to say, hey. Give me whatever format the browser can handle that's going to be the smallest. And that that way, you're you're giving these tiny little images to Chrome or Safari based on their their own ability to accept certain types of image formats.

just visual and the device that you're using is going to know how to handle rid. The accessibility aspects of it by default for you much, much, much better than if you were to wrap everything in a dev and maybe try to shoehorn it in with JavaScript or something. But for the most part, Are the wait. Is it super? Yeah. Sub for super. Yep. Sub for sub. That makes sense. Super subscript.

as sort of, like, being, like, highlighted let me see. What what does

rid or importance of enclosing text. That's that's kinda interesting. So, yeah, I've used this in the past where I wanna display search results, You know? Sentry, Air Exception, Performance Tracking,

So, again, like, a a screen reader will handle those differently whether it brings more importance to,

necessarily

For for whatever reason, and you don't need to bring more you don't need to draw more attention to that text, then that's a use case For that specific one, another one that I use is a mark tag quite a bit. If you ever need to mark some text

one of them or not, which is kinda interesting. So I think in most case, you probably do want a strong day. But if you just want something to be bold

tag is For when you wanna mark something of greater importance, of where to use m's show for you. Scott says, hey. What about a show on HTML? It's nice to tell the device, the person, whoever's using the website, the type of content that is in it.

You should be using a class or a mark tag in it Not a spin with the class of highlight or something like that. If you want to bring emphasis

while the the b tag, the bold tag is just used to draw attention to text

bold and italic.

What does MDN say the mark tag represents text, which is marked or highlighted for reference of notation purposes

Sentry.

or highlight to your errors and exceptions, though, What service might you use?

and I have destroyed many hats washing them. I finally got one of these, like, hat, Baseball hat washer

art heist. So there there I had already listened to this podcast. I'm gonna try to find it, that tells that same story and maybe even Gets into more details. I was very familiar with the story, but Cordia never heard of it. So, like, it was really fun to watch it with those Head on over to syntax.fm

things, and it's like a little plastic cage that keeps the form of your hat, and then you put your hat in the dishwasher,

very, very good. I, will definitely, want a carousel or they're hot drama about it, You know, you get people pulling you aside. It's like, hey hey, bud. I I noticed you used a carousel. Is everything alright? then use the article. And you do, but article can be used for any repeating content.

which sounds kinda crazy, but I put my hat in the dishwasher. My hat was gross.

You check out advanced React and GraphQL. You can Check out beginner JavaScript, which is, are rid Strong and emphasized and not

We work on a lot of stuff. We don't often say this, But we both make quite a bit of educational material, so this is the part of the show where we get to hit you on some things that we are working on right now or have worked on. I'm just gonna shamelessly plug all my courses. Westboss.comforward/courses.

we'll do it. I didn't even pick up on that.

We gotta come up with something that we're betting here, but I will bet you that it will not be in Safari developer preview by then. What do you wanna bet? Let's do a charity donation.

Okay. So, next one would be you had a text area that grows with content. I'll let you talk about that, but one of the ones I had was an animated accordion. Yes. We We just talked about the accordion type of element. I want that same thing, but animate it. Give it to me, please.

Okay. October 2021.

We will choose whatever. The obviously, that's a Seinfeld joke, but,

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos. Welcome to Syntax, the podcast with the tastiest web development treats out There. Today, we've got

a huge art heist that happened at the Isabella Stewart Gardner Museum in Boston,

A bit of a disappointing ending, but I'll let you just I I'm still glad I I watched it because it was super interesting to watch. So check it out. This is a robbery on Netflix.

Yes.

reusable things that work

Yes. Yes. Yes. Yep. Totally hear you. I think that's it. Anything else you wanna add, or should we get into some sick pics? I think that's it.

generic I think people just want web components, and I don't necessarily know that they want these things built in, But they want there's no there's no spaces between them. Rid But I don't know. Like, does that does that really happen, people viewing the website without CSS? Maybe sometimes. Mhmm. So it is nice to to sort of have that. And I also on your website doesn't load, you can still read rid A website that is content based, sometimes it gets a little bit hairy when it there's, like, divs for pop ups and and whatnot, but a pretty, like, content heavy website is still readable. But, also, I think, like, if you're using the proper tags,

One last sponsor read, though. We have a whole bunch of image tags in HTML, like picture set and, things to to give us a whole bunch of ready. Making sure you're serving up with the right image. But if you're asking me, how do I serve up the right image? I use Cloudinary, and, Cloudinary is one of those services that When I first heard about it, they were definitely one of those services that I used for a bit before they sponsored Syntax here because I could not believe how cool this thing is. Rid. Basically, Cloudinary allows you to suck up all of your images even if you're just appending your normal image URL and or prepending your normal image URL, Or I guess you're appending the image URL to the Cloudinary URL, and then Cloudinary just sucks this thing up, and then it's going to serve brochures. Right? You can scroll and click around them. But

That was really nice because I could style all the keyboard It's great. It looks like Firefox is behind a flag. We should get it soon.

We also have the k b d

k b d element,

A UL is an unordered list, and an OL is an ordered list. And so You could see just by reading the name there, you can get a little bit of information about what those things are, but that does more than just define this thing as, does it have dots or does it have numbers? It says, oh, this thing is in order or this thing is not in order. The order doesn't matter. Yeah. When I when I taught, intro HTML, we're always saying, like, the the unordered list Describes that the this is a list of things where the order is unimportant.