The Surprisingly Exciting World of HTML Elements

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 surprisingly very interesting show for you. Scott says, hey. What about a show on HTML? I said, 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, Sentry, Air Exception, Performance Tracking, rid And Cloudinary on Demand image hosting transportation, 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

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

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

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, 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 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, 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.

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 And, 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 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 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.

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.

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 should rid the content that is on the page. So you're using different HTML tags. You're wrapping. You're including. You're sourcing content, And those tags describe the text, the images, the videos, the buttons, what they are, what Are they part of the header? Are they navigation? Are they footer? Is it an article? Is it a sidebar? All the information about what it is.

And maybe you can tell me this, Scott. Like, why is it important

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 HTML, like you said, it it is the content. Right? It is the content of your site, And you might take for granted of this, but a human being with normal functioning season eyes and ears and everything like that and hands, and if all your stuff's, you know, fully working, then most websites just visual brochures. Right? You can scroll and click around them. But 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, and those disabilities 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, the browser 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, number 1 number 1 with the bullet, accessibility is the reason why you write semantic HTML. Number 2, SEO. So you have 1. You have people with 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 SEO and accessibility are the 2 big ones as well as default styling.

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.

The default styling thing is is neat because if you've if the CSS 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, 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, 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 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.

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 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 related. It's definitely HTML related, sort of related to what we're talking about right this instant. If you needed some text that had no semantic meaning necessarily but needed to be a block level piece of text, What do you reach for? I often find myself reaching for a paragraph tag and then have to 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

a div directly. Feels a little bit

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 like you we've mentioned a little bit is that the HTML tags Have a meeting. Right? They exist 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, 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.

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.

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.

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

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.

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.

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.

It's what does this describe, and Mhmm. How the list shows up on the page is up to you 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 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 for these things, and it's fine. It's fine to use JavaScript to rid. Override the click of a link to maybe 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.

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

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 necessarily have the same 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

are links that look like buttons, and 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 buttons

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.

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.

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 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.

Read. You know, one one big one here is the heading elements. Right? Now people often think of a heading elements h one through h six. You have h 1, 2, 3, 4, 5, rid Right? People often think about those as being, specifically 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 this content is about. So making sure you have a correct hierarchy of 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, 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, The name of the site is an h two, and the name of the page, the page title is the h one for that

Yeah. I usually do and I don't know if this this necessarily matters. I do h one for the the website title, h two for the title of the page, 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.

And if you were to generate a table of contents 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 In h two, and it belongs to the h two's sort of subsection.

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 it's important to say, you don't think about what it looks like. You think about, again, How you describe it, semantically describing the content that comes under it and what that content subsection is belonging to. Rid. And if you want it to look a different way, then just use CSS. And we've talked about this on the podcast before, right, where somebody has 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

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 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, extra big ass heading in our site. So, like, you can name them whatever you want for whenever you use them, And the incising of your headings is definitely not need I mean, visually, you probably don't want the The h four to be the biggest thing on the page. That doesn't make sense visually, hierarchially hierarchially 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 the ability to structure your content.

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 rid CSS or sorry. It's not CSS, a component based CMS.

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 a page anymore. You think about it in terms of cards or sections or 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 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 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, like, as you wish, which is really sweet. So check it out. Prismic.ioforward/ syntax, and 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.

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 different structural, that we call them block level 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 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.

What are the other ones that you use pretty commonly?

Yeah. I I mean, I main tag for the main section of the site. I always use 1 1 header, but, 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 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 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.

I do, and that's because I often want rid to group together group together things. Like, if you go to my website right now, like, westboss.com, 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, it does break it down into a nice bulleted list rid. Instead of just jamming all the tags together, especially if you use inline tags, 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 rid I grew up styling nested lists

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, 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 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 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, then use the article. And you do, but article can be used for any repeating content.

If you have the level up 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 that's being iterated on on the site. So article basically distinguishes that thing as being its own related chunk

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.

Do they do anything special versus using a DIV? Special in what way? 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, 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

I I actually wonder about, like, what what they do differently assistability wise. But 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 I believe let me see. Inside HTML

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 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 A link to the whatever has the tab index of negative one. I don't know that specifically

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

semantically describe our code because, again, it's good for literally everybody involved, CSS, accessibility, robots,

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

The HTML tags are basically comments describing what the type of data that's going to be into the 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 Address tag.

The address tag is used for when you have an address, And you would just put basic text inside of there with break tags and everything, 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

to Crawlers.

Google, Facebook, Twitter, whatever.

And those are great because you can directly do it, but not every website has those. And it's nice To just tell Google or even, like, your there's a, not there's not a telephone tag, but there's a tell attribute.

It's nice to tell the device, the person, whoever's using the website, the type of content that is in it.

We also have the k b d k b d element, which is for keyboard, inputs, and I use this a lot when I was writing my book on Sublime Text Because it was full of keyboard shortcuts.

That was really nice because I could style all the keyboard 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

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, tags.

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.

Are the wait. Is it super? Yeah. Sub for super. Yep. Sub for sub. That makes sense. Super subscript.

And that's just a a a semantic texting. Right? If you have some information that is a superscript or a subscript, rid. You got the tag for it, and these actually give you 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 smaller, 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,

sup and sub is that you can nest them infinitely, 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

rid as well. That actually brings me back to shades of when somebody would have, like, almost like recursive m font rid where the text would just get bigger and bigger and bigger the more you went into a div because, like, maybe the the div had, like, a class of of, 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?

This is actually a good example of where to use m's and how they work because 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

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

tag

WBR.

Sounds like a promotional consideration is provided by WBR. WBR.

Yeah. I was going into the Warner Brothers, the, you know, the the tap dancing frog thing, but, no, I do not know what the w will Break.

That's it. You nailed it. Seriously?

Yeah.

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

So meaning that you can stick those into a a very long sentence. Like, let's say you had a really long URL, And you know how those URLs will either overflow, 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, and you're telling the browser, hey. If you got a break, 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.

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

Man, they're a figure, fig caption.

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 aspect of CSS. Some tags don't really have a semantic meaning, but just have rid Basically, a visual meaning.

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.

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

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 that the contents are rid Strong and emphasized and not necessarily bold and italic.

If you use a b tag even now, people bark at you and be like, those are deprecated.

They're not deprecated. B stands for bark. Yeah. B. So, basically, like Scott says, the strong tag is For when you wanna mark something of greater importance, while the the b tag, the bold tag is just used to draw attention to text without indicating that it is more important.

So, again, like, a a screen reader will handle those differently whether it brings more importance to, 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 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 as sort of, like, being, like, highlighted let me see. What what does What does MDN say the mark tag represents text, which is marked or highlighted for reference of notation purposes due to the mark's passage relevance 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, rid You wanna you wanna highlight the currently searched word in the results.

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

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

Sentry.

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, 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 for free. So thank you so much for Century for sponsoring this structural semantic HTML episode. So 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, 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 a container with no meaning, and it's usually just to, group things together 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.

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, and same with spans, really. Tostinos?

Is that what you call them down there? Tostinos?

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

There's no there's no n in it. Yeah. There's no n. My bad. I've been saying Tostitos my entire life.

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

together.

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, all of the the Spanish words. Just get to it. Anyways, what we're talking about, divs and spans are 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 CSS reasons.

What else we got here? Some elements that have rid Special functionality or styling.

So there are some elements in HTML that have functionality out of the box.

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

If you have a details tag and then inside of that, you have a summary tag, re It will automatically 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.

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 line stack trace rid That you're trying to post in there, pop it in a details tag because details tags work on GitHub. And if by default, it will be closed. And then If somebody needs to see your 40,000

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, 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, unfortunately.

Along with the rest of modern web dev. Rid. The next one would be fieldset and legend. Now legend basically creates a caption for a fieldset, and a fieldset groups rid Several fields together.

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

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

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 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 checkout form, And I put each of the steps in its own field set, and then I used the the legend because it does this little CSS y thing. But there are some, like, limitations around field sets and CSS Grid that you need to be aware of. I don't think that 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 rid Just, heads up on that if you are displaying grid form.

There's so much here. We'll we'll split this out. We're we're 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 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, 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

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.

It's great. It looks like Firefox is behind a flag. We should get it soon.

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.

Yeah. You know what, Wes? I would love to bet you something that This will not be in Safari in 6 months or even Safari developer preview.

We can make that bet. Rid October

2020, 2021.

Okay. October 2021.

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. 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

if I am wrong. Okay.

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

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

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.

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, then you just go,

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 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, 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.

That's me to grump on another day. Another one might be a better table, something that works better with modern grid CSS, 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.

Tables, they need to behave a little bit better because anybody who's ever tried to make a responsive table knows that at the end of the day, man, overflow scroll is probably the best bet or just to not use HTML tables rid Overall.

Yeah. It's I just wish that table was a little bit more flexible 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 rid Sarah Sweden on Twitter the other day. It was probably this is, like, 6 months ago. She was like, how do I add a border radius rid That has 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.

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.

People don't often think about, like, virtualized lists. There's a a React project, React virtual I think React virtualize Maybe is the name of it. Either way, in in many other visual 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 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.

I agree. I and I wonder if that will eventually come to the browser, But just be an improvement 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,

an Ios app that you're writing that 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.

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.

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, 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, but there still are very many valid use cases. You wanna rid Swipe through a couple images 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 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 I want this thing that has style and functionality 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 some npm install.

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 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? I don't really have that beef with carousels either. There are there's definitely some, you know, 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.

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, 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

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, something, and then you can choose on a browser setting, what you're going to allow.

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 if it's required.

Somebody says an h tag that rid Figures out its level all out by itself.

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.

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 based on its nested level inside of maybe main tags Or section tags, you'd be able to generate it. It I've I even seen in React world where people auto generate the Heading level based on context and, like, based on where it's nested. And I think that'd be kinda cool because if you've got a a component And you put that component 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

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.

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 tag to describe that this is a card or a piece 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

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

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 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, ecommerce in general and HTML if there's there's nothing specific there,

which is a little surprising. There's a huge spec for autocomplete, 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

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.

There you go.

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, 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, You can edit the CSS 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.

You know? I think people just want web components, and I don't necessarily know that they want these things built in, But they want generic reusable things that work anywhere.

Yes.

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.

We we gotta do one last, 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 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.

There's also, like, q auto for quality auto, and it's going to actually degrade your image a little bit, but not like, 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 to what we uploaded.

So Cloudinary 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.

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.

It's very, very, very cool. So 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 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

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, a huge art heist that happened at the Isabella Stewart Gardner Museum in Boston, 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 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.

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, 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 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, very, very good. I, will definitely, 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, 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, and I have destroyed many hats washing them. I finally got one of these, like, hat, Baseball hat washer 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, which sounds kinda crazy, but I put my hat in the dishwasher. My hat was gross.

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 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.

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.

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.

You check out advanced React and GraphQL. You can Check out beginner JavaScript, which is, 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 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.

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 crazy in our own code base. So, you're gonna wanna watch this one, level up tutorials at .comforward/pro. Also, if you're interested in becoming an author for level up tutorials, we do pay royalty based on Dreams. So if you get a bunch of people to watch your stuff, then you get paid direct revenue from leveluptutorialsdot 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.

Alright. That's it. Thank you so much for tuning in. We will catch you on Monday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget rid.

Rid.