Fundamentals: HTML

Welcome to Syntax. Today, we have a fundamental show for you again. These are shows that we do every now and then about fundamentals about different types of programming. We have them on TypeScript and JavaScript and CSS, and we've got quite a few of them. And we realized we actually haven't done a full blown HTML fundamentals episode just yet, and that is one of the very first building blocks that you learn. And having a good base to build your house upon is crucial. So here we are today. We're gonna talk to you all about why good at HTML is important, a good structure, what does semantic elements mean, and just, basically, how do you, when you're authoring a website or a web app, how do you tackle that and make your HTML look like onions, which is a good thing, by the way.

That saying saying onions is only a reference that, like, people from the Toronto GTA area get. Maybe I should explain it because I often will say, like, oh, onions.

So Chuck Skvorski, who JS the commentator for the Raptors on TV, whenever a if you just Google onions, baby, onions, you'll find, like, all these highlight reels of, like like, crazy Vince Carter doing, like, wild stuff back in I don't know. When was Vince Carter? Through the legs, underneath the leg done. Yeah. And Chuck Swarski would just go, onions, baby onions.

And,

it's like he just saw it. It's so good it makes you cry? Is that

Oh, maybe. I I never considered it. I just I'm I'm very I love slang that is like, when somebody throws out a slang that I've never heard but you kinda understand Mhmm. I, like, I read urban dictionary, like, at least once a week just to sorta get new new one liners Wes saying it's so good. Do you do you read her dictionary?

I almost always pull it up when my wife says something that she does not understand this the meaning behind because she works ESLint a Scott. Right? So she hears things. Yeah. And she's not always up on the latest slang, so I have to say, well, maybe you want might wanna reconsider saying that.

Yeah. I also do it before I, like, say anything on this podcast because only once have I did I say something on this podcast where I didn't realize the meaning behind it? And it was just, like, something I had heard, so I started saying it. And then now I realize I should probably check that there's no, not hurting anybody.

Yeah. Yeah. Do you know what is hurting people? What? Your bad code because they you don't have visibility into the errors that you're serving people, and it's it's making them have a bad time. Maybe if it's even raising their stress levels and actually physically hurting them. I can you know, there's sometimes when I use a website and, there are issues in it, and I get really, like, gosh. If only they would have done this, I wouldn't be so angry. Why don't you put a time out on this? All kinds of things. Right? Yeah. And that's where we need visibility into our apps. So that way, we know when people are potentially hitting issues or slow pages. Right? Things that, are cause turmoil in everyday usage of applications, and that's where Sentry comes in.

So you'll wanna check out Sentry at century Scott I o. It's the perfect tool to get visibility and not only just that, but make your applications better in all kinds of ways. So check it out. And, this podcast is brought to you by Sentry. So HTML, hypertext markup language. Wes, why is it important to, understand HTML?

HTML. Do you know that I thought HTML meant Hotmail when I first saw it? Like, when I was a kid, you know, you'd see it in the URL Bos.

Yeah. Well, Hotmail was big. People who don't know, everybody had a Hotmail. What? You either had you had Yahoo or you had Hotmail, and I don't even know what the other ones were because most people had Hotmail that I the cool people had Hotmail. I just wanna say that. Yeah. All the all the, like, parents had, like, a A Comcast or Yeah. Yeah. Yeah. The ISP email. Yeah.

It's funny because you can still tell when somebody's from the country because their email address, like, written on the side of their truck will be some obscure telecom that, like, beams Internet over satellites from farm to farm. Yeah. And I often think, like, those poor people. Like, what are you gonna do about that email address when you switch your ISP? That is the worst example that you could do. Anyways, HTML. Why is HTML important? A couple of reasons. It makes things easier to style. It makes things easy to compose together. It makes things accessible.

It mean that if you use the correct HTML elements to mark up your website, a lot of your stuff will be accessible by default. There's there's going to be very little extra work on your end to make things accessible because simply just marking it up correctly is important. It's SEO friendly. Get having Google and other bots be able to crawl and understand your content is important.

And these things have built in default functionality, so we're starting now to see new elements hit the browser that have good default functionality. Right? The Scott has some really cool examples a couple episodes ago on the details element. Right? You pop a details what's what's the markup for details element? Oh, gosh. Details?

Yeah. Yeah. Details puts it into

Oh, summary and

Oh, you're talking about details.

Sorry. I was thinking about, dialogue. So I was, like, thinking is does it have inset baked in or not? But, yes, styles too. Yes. Dialogue as well. You know, they they do. They have things like baked in inset or over? Yes. Pop over. Even display, none display, you know, block, whatever. Those types of things can be be baked in as well. And, be yeah. Styling. Functionality and styling on all these things is, they're they're here for a reason. You know? You know?

Mhmm. And even more important now that we're getting all of these popover and details and and whatnot is that forms as well. These things are built on open standards.

And when if you build them with these standards, picking them up with JavaScript and and actually building full featured web apps is so much easier because you have started with a really standard base, and you're gonna be able to pull in a library that understands how forms work or how details elements work or how the popover

API works. Yeah. And I know you said this in accessibility, but interactivity as Wes, you know, whether whether or Scott, you know, you you're adding a click event to a DIV or something like that. I mean, there's all kinds of things, that go along with that that fall under the category of both accessibility, but also just general usability.

Exactly.

So this word semantic gets thrown around a Scott, and people always say, like, build your website with semantic elements. So what that means is that HTML elements that define the content that is inside of them will note to the browser to, default styling, to screen readers, to browsers, to search engines What type of content is inside of them? Meaning, like, oh, you you're heading 1 through 6. That denotes sort of the table of contents of your website. You know? Mhmm. Paragraph text goes or goes inside of a paragraph element. And then we also have, like, Node semantic elements, which are more used as building blocks for your layout, the most common being span element, which is inline, and div, which is block.

Yeah. I think that's an important thing to have an understanding of because, as we'll see, I think the document structure in general is something that it it makes a ton of sense when you have a wide view of it. And when you don't have a wide view of it or have a deep understanding about what a document structure should be like, it it might just feel like you're throwing elements at the wall. So let's talk about the basic structure of an HTML page. If you fire up most modern HTML pages or at least HTML that is designed well, you know, you're gonna see some of the same things every single time.

The first one is going to be the doc type. Back in the day, we had a whole bunch of different doc types, and that had to do with what what are the different doc types? It was different versions of HTML. I almost forgot the part of it. HTML 4.1

strict. Right.

There Wes so many of them, and they essentially noted to the browser which version of HTML to use, and that would help the browser understand how it should render out the elements on the page. Thankfully, we are mostly done that. It's been, what, like, probably 12 years since we just got DOCTYPE HTML.

And what that will do is it will force the browser into the most modern rendering engine. And if you do not put it in a doc type in, you will will get a little message that says you're putting the browser into quirks mode, which I don't even know if I understand what a quirks mode feature is.

Do you?

Oh, gosh. Yeah. I don't know. That'd be a good one for some.

Let's figure it out.

In quirks mode, the browser will attempt to render a page that will emulate the behavior of older browsers, such as Netscape 4 and IE five.

This can lead to inconsistent, unpredictable layout and rendering on the web page.

But, like, does do modern browsers still like, I've got the quirks mode a couple months ago, so there's some poor soul still maintaining quirks mode.

That's funny.

Anyways, that's, that's something you don't want. But, yeah, your doc type goes in there, and then you have I I need you should say, is just HTML these days. That's it. Yes. Doc type HTML. That's that's the doc type that we use. And then inside of that, we have our HTML tag, which is composed of your head and your body. Right? Yeah. The head of your document is not visible. By default, you can do some pretty funky stuff where you can display block on the head Uh-huh. And make it content editable. I've done that TikTok twice now, and it always does super well because it's it's such a funny thing. But by default, the head of your document is there to provide metadata about the document. So what types of things go into the head? Right? You've Scott, often, you'll have links to external resources like favicons, CSS, script tags.

You'll have meta information for things like I Wes, the favicon is meta, but also, like, the open crop, previews, theme color, What else goes in there? Redirect tags.

That would this would be a good stump.

Name 10 things that go in the head. Oh, yes. Yeah. Let's let's not do it yet, but we'll we'll wait for the next stump. It's definitely something that, you know, you kind of experience.

You pick up what goes in there at some point. But the way I like to think about it, when you're when you're thinking about HTML in general, it's oftentimes if you're not super experienced with HTML, it's important to think about, like, an HTML file JS, like, a document or a file. And like you said, the h t the doc type first declares what type of file we're working with. The HTML tag says everything inside of here is going to be the HTML we're working with. The head is saying, like, this is the metadata.

This is the information about the document. And then the body is the contents, the stuff you see, the the visual things.

So after we have our head, we have our body. Our body contains any number of elements inside of the body and the typical structure for the body inside of there. And granted, you can throw a div immediately following the body or divs left and right. You Node, div is just kind of like a blank element. But inside of the body, a very common way to lay out your application is to have a header tag and then have a main tag and then a footer tag. Now the the difference between the 3 of those is kind of interesting. The header, by default, if it's the JS if it's in the child if it's in the context of the body, as in it's not inside of a section, nav, main, article aside, if it's just inside of the body and not inside any of those, it's considered to have a a landmark of banner, as in this thing is the main header that contains typically a logo and navigation and such. And the browser will understand that if you put a header at that level, it will most likely have those things. Now so you can use header inside of a section. You can use it inside of an article, in the side, a main, and app. You can have multiple headers per page. Right? Correct. You can have multiple headers and footers per page, but the context in which they're understood by the browser happens to do with where they exist in the context of the document flow. And so a header inside of an article would be like if you had a blog post that had a header with heading information for the blog post, that would be perfectly fine to put that inside of a header tag as well. It's just not going to be registered as the landmark of banner because it's nested within a an article.

Now main is actually unlike header and footer. You can only have 1 main tag, and you should only have 1 main tag. The main tag specifies the main content of the website, as in this is not the header banner. This is not the footer. All that stuff in the middle goes inside of the main tag. And so you throw one of those, everything else in there is that is the contents of the website.

Interesting. I I don't think I do that that having a single top level main tag and I assume you can still throw a div around it if you want. Oh, yeah. Like, around the whole website for for stylist. There. Yeah. Okay. But I'm on the w three c aria documentation. It says Wes only 1 main landmark is on a page, a label is optional, meaning that you can tab to it, and the browser will understand that this is the main content for the page.

However, it does say you can use multiple, but you must then label them with ARIA label by. Main task?

Yeah.

When there is more than said you only use 1.

It it would make sense that you would only use 1 because you only have 1 main piece of content for the page. However, sometimes, especially with components, if you like, let's say you have a page that is the main content, but you wanna display both of them on the page for whatever reason. You're writing a you wanna have 2 documents side by side. If that's the case, then you have to label them with ARIA label by, and that corresponds with the ID of a heading or or something else that describes what is that content. So I I guess that that would be a good example JS if you had 2 documents side by side.

Here are 2 restaurant menus that you wanna view. You could say, here's the restaurant menu for McDonald's, and here's a restaurant for Burger King. It's interesting because MDN says

you mustn't have more than 1 main element that does not have a hidden attribute.

Oh.

So Interesting.

Interesting. Yeah. You know, main is kind of a newer I mean, it's definitely newer in the context of the history of HTML. But, definitely, it's typically just pretty much used as here's the section where all your stuff JS, and that that's where you wanna use it. Yes. Next step, which we have the nav element. And the nav element, as you can imagine, specifies that this is going to be a navigation, a grouping of links. Now one thing I always, like, wonder about this, me personally, Wes, JS, like, when you have a nav, do you need an ordered list with list items inside of it? And, typically, you do see that anyways. Right? People still define the navigation items as a list inside of the nav tag. But the nav tag is really just there to denote that this is going to be navigation for your website.

Now does that mean this is going to be the main navigation? No. Not necessarily. In fact, you know, in an example on MDN, they have a Nav tagger on their breadcrumbs, which is just a you know, breadcrumbs are are series of links to show you how deep you are in the nesting tree. So, nav tags, you know, doesn't have to be used once.

This is interesting. It says, typically, the footer element often has a list of links that don't need to be in a nav element. I find that to be curious as why that might be. But, hey, that's what MDN says.

Interesting. Okay. So the question of, do you need a ordered or unordered list inside of a nav tag? The answer to that is is no. You can put whatever you want. However, I don't feel good about simply just throwing anchor links inside of a nav tag because it is hard to style.

And if there is a situation where there is no CSS being applied, either breaks or doesn't load or whatever, it just jams all the links together. And sometimes you even run into into the thing where there's no space between, each of the links, and it's hard to read. So I much prefer a unordered list of links if it is unordered. I guess you use an o l if it was like a table of contents.

And then I put an l I, and then you throw whatever you want inside of there, divs and links so that you can style it however it is that you're looking.

There can be more than 1 nav on a page. It says that if if you, you know, you do have more than 1, then an aria labeled by can be used to promote accessibility.

But, yeah, you can have more than Node nav per page. That doesn't you know, typically, what you're gonna see in typical websites is a header with a nav inside of it. Potentially, that that nav is a mobile nav, you know, hamburger menu type of thing deal as well. But yeah. So nav is not a use once only kind of thing.

Here here's a question. I I'm just looking at my own website, and I have a header element, and then I have a nav element. And and because of styling reasons, I put my h one tag inside the nav element.

Mhmm.

That doesn't make sense. Is that wrong? What do you think? It I

I don't think that necessarily matters, so to say. Because heading tags kind of exist in their own hierarchy Wes the heading tag is being read JS, like, a outline, which we'll talk about in in just a little bit. So Yeah. I I think maybe we could use maybe a a tighter, expert's opinion on that in that regard, but I don't I don't see why that would be a problem. In fact, there's even example here on MDN with an h two inside of the Node. So, I I don't I don't see that as being a problem myself. Then.

Yeah. Using my my brain powers of deduction here. Next one is section. Now section is an interesting tag. Again, it was added in the HTML 5 days. So we used to just use divs for everything. Right? You needed a nav, you used a div. A section, you needed a div. A side, div. Article, div. Right? So all of these things are block level items, right, for wrapping content. But a section is specifically to denote a section of the document, which seems like it's self explanatory.

But, typically, the way you use sections is that a section even visually, if you're looking at a website, sometimes there's, like, big hard lines between color blocked areas of a website. Those would all be sections of the website.

And other times, you're just on a a a page, and it's just 1 big giant bit of information. That's 1 big section. So a section is to denote group of related content together in 1 group.

Yeah. I often we should Node that, like, section doesn't give you any special functionality or features aside from, I Wes, like like, what I don't is I don't think there's any accessibility benefit to that maybe for for SEO.

However, it does make things easier to architect your your layouts. Like Scott says, if you have big color blocks or, like on my websites, for all my courses, I'll often use sections because I have a section of what videos are in the course, what will I learn, FAQ.

And I'll use those sections at just I can grab them, with CSS and and apply all of my styles to them.

Yes. And in addition, each section should have and this is a should, not a must, should have a heading element to denote what that section is.

So that's that's kind of where, you know, some of the special sauce comes in. It's like if you have a section and then you have an h one through 6 there to denote what that section heading is, then we're saying, alright. This bit of content all falls within this heading.

Likewise, we have an aside, which an aside is typically used for sidebar content. You Node? Back in the day and even still today, the the the whether it was the golden layout or we typically have a left hand column with, you know, potentially navigations or filters or all kinds of things or right either sidebar navigation. Right? Often called a sidebar.

And aside is for exactly that. It's for content that is not the main content.

It is a side. It is it is a you would call it a sidebar, but, visually, it does not always have to be a sidebar, which is why it is called an aside.

Yeah. And aside can also be really handy for just little did you Node or Just call outs. Little asides Yes. When you're writing an article because you say, okay. I'm I'm writing this article, and aside, why didn't you do it this way? And then it's it's great. You pop a little aside in there. You can style it a little bit differently. You can even, dare I say, float it because you can

Oh.

You people say, oh, floats are dead.

The one use case for a float right now is if you want text to wrap around an element. So if you you have an aside, we're just like, did you know the average website uses 4 kilowatts of energy per year? And you could just, like, put a little boop right in there, like those pop up music videos back in the day, and then have the text wrap around it.

Aside is the perfect element for that.

Yeah. Totally. Likewise, article. Article is an element to denote an article. What is an article? Well, you have a blog. What does your blog have? It has posts, also known as articles. Those are articles. So an individual post could be seen as an article.

Also, like, if you have a list of things. Right? Let's say you have a listing of podcast episodes on the Syntax website. There's a big old listing of podcast episodes.

Those could be considered an article themselves.

So a document will have a bunch of different articles typically to denote, like, content that is grouped together, but as something like I think the best way to describe it JS, like, a newspaper article, a forum post, a blog entry, those types of things. That's an article. Next up, we have the span, the mighty span. So The mighty span. I get let let's explain it real quick. Block and inline are the 2 sort of displays

in CSS. There's there's obviously a lot more than that. There's, like, there's probably can we do a little trivia right now? Oh, Node. Many displays? Can we together come up with all the displays? There's display none, block, inline inline block, flex, grid Grid. Inline flex.

Sorry. What did you say? Inline flex.

Inline flex.

That's the thing. Right? Inline grid. Yep. Yep.

I said contents.

Display.

Display contents.

So that's 9.

Display table.

Yes.

Display there's some weird ones. Like, display there's a like, unordered lists are something weird.

Unordered lists? I'm pretty sure.

Let me see if I can get all the properties. Okay. They're they're block. By default, unordered lists are display block. For some reason, I table row.

Oh, table table row. So that's There's ESLint item, which we we yeah. Okay. Did you I didn't know that you could do multi words. So there's display block space flex, block space flow, block flow hyphen root.

I do not know what those are. What is display flow root? Now that is not one that I know.

Flow root.

Oh, interesting. Okay. So, Wes, it seems like the multiword syntax is to be sure your layouts work in older browsers, you may use the single value syntax. For example, display ESLint space flex would have the following fallback of inline hyphen flex. So the inline hyphen flex is the older way to do it, and the newer way to do it is with multiple values of inline space flex.

Oh, really?

Really? Yes. Did not know that. Hey. We have just learned something. Main grid. Block space grid is

the same as display grid, but display inline space grid is the same thing as display inline grid? Correct. Yes. Oh, I didn't know that. I Did not either. Welcome. Very rarely. But every now and then, I need an inline flex, and I'll just use inline dash flex. So now you can use multi keyword.

Yes. Wow. And by the way, Flow Root, which is interesting. I've never heard of Flow Root. The element generates a block box that establishes a new block formatting context defining where the formatting root lies.

I don't I don't know. I don't know what that mean. I don't know. The element display flow, the element lays out its corresponding or its contents using flow layout.

If its outer display type is inline and it's participating in a block ESLint formatting context, then it generates an inline box other than it generates a block container box.

K. Those are words. Right? Those are words. Right? Yeah. Words.

Wes. Flex and grid containers are defined by an element's display.

These are similar to block formatting context, but there are no floating children available inside the flex. Yeah. It's there. It's there. Who's using that? Right? Wow.

If you're using display flow, let me know. I wanna hear all about why you DisplayFlow or FlowRoot, which, actually, it looks like they're Scott, like, they're not I would have figured those were, like, old properties that we're not using anymore, but it was added to Chrome in 2017, so it's not super old. Added to Safari in 2019.

Oh, here. Can I use comes in with the, the reason why you might use this? It provides a better solution to the most use cases of the clearfix hacks. So it's when you're using floats and things are taken out of the Oh. It's like a it's a fix for clearfix, that we used to have to do.

Interesting.

Yes. Cool. Well, we I think we got them pretty close. I think the only one we didn't hit was the The Flow Node. Flow root one. And then there's a couple other, like, internal ones, like display table caption and display Ruby text, but that's internal. That's not something you use in CSS.

Word. Cool. What what were we talking about before we started playing games? Span. Use the span Vercel div versus a paragraph tag. Why do you use a span when you have a div and a paragraph tag?

Yes. Because span, by default, their styling is ESLint, meaning that it does not break onto a new line when it creates itself. So if you want to wrap a couple words or you want to wrap something without disrupting the flow of the document, then you use a span. And, also, of course, you can change those types of things in CSS, but it's really nice just to know Wes I see a span, I know that that is only there because it will, a, is going to not break the layout, and b, is probably being picked up in CSS to add a highlight or something like that. And even in that case, I used to always throw a span around to highlight stuff until I found out about the mark tag Mhmm. Which is intentionally meant for highlighting elements.

Yeah. And and speaking of that, if you find yourself wrapping things in a span and then immediately throwing a display block on it, chances are it should just be a DIV or maybe even a paragraph tag if it's paragraph or text.

If you're finding yourself wrapping something in a DIV and immediately putting a display inline on there, you should probably using a span. Span is the generic wrapper for inline content JS you said, Wes. So You wanna know a little trick I came up with the other day? CSS,

if you have a block element and you wanna keep all of the blocky attributes, meaning that it breaks before and breaks after, it can take a width and a height. It can do all of that stuff, but you don't want it to span the entire width because block elements by default will go all the way across width wise, you can put a width min content on it, and it will suck to the content but not give up all of that, like, clear before and clear after.

So grab a display block element, give it a width of min content, and then pop a background on it, and you'll see what I mean in that it will simply just apply the styles to how wide the content makes it, but still not break before and after.

Word. Hot tip right there. And also hot tip, figure and caption. People don't use figure and caption all that often for for I don't know why, but they don't. Figure and caption are a way to do it like a self contained image illustration diagram Node snippet and caption.

And so, again, this is not necessarily that important, but it gives semantic meaning to these elements. And if you have something that is, let's say, a picture with a caption on it, right, that seems like a perfect opportunity to use, figure.

It's Figcaption, which I always found to be weird. It's Figur and Figcaption instead of Figcaption, which or just caption.

Why they abbreviate Fig? That's that's a that's a great point. I wonder wonder why that is the case. And couldn't it also be just caption? Anyway, is that it was too long ago that it was added. So

Oh, there is a caption tag. Wait. Why is there a caption tag as well? A caption tag is for a video element, is it not? Caption element specifies tag. It's for a title or for a table.

A caption specifies the title of a table.

So caption must have already existed because it was in Chrome version 1. Yes.

Yeah. That's the only one I have to use. Caption. But they should've still done figure caption.

I think so. Yeah. Maybe too long.

I'm okay with it. But Yeah. I love the figure tag because it allows you just to make a nice tidy bundle.

Sometimes you throw it, an image, and then underneath it, you put a paragraph tag that describes it. And then Warp chart. Oh, I gotta I gotta put those things together because I wanna put a border around it. Oh, okay. Throw a div around it. Oh, what do you call that thing? You know? Image container. It's called a figure. I love it. Yes. Use it a little bit more often. Same with, fieldset ESLint in Formlabs. I know I'm getting a hell of myself. Fieldset is so good because, a, you can give it a fieldset.

What's the description of it? It feels a legend so that you can give a little description.

Almost always, I don't use that, and I just strip off all the field set styles. And I use it because it allows you to group together a whole bunch of inputs and labels that are not necessarily grouped together, and then you can disable all of them at once with the disabled attribute.

Yes. I Node. Field set, super underutilized, and it's an ancient it's been around forever.

It's a a, you know, classic HTML element right there. Let's talk about tier element.

Yes. S tier element. Order list versus unordered list that it the kind of the the definition for these 2 is in the name of them. If you need a list of things, you wrap it in a u l or an o l. O l is for things that have an order to them. 1, 2, 3, 4, 5, 6, 7, a, b, c, d, whatever. It has an order. They go in that order.

Unordered list is typically things that are just here's some like related content, like perhaps the navigation, and it is in a list of things that goes in an unordered list. So you'll often see unordered list for navigations, and you'll often see ordered lists inside of content whenever something has to be sequential in any sort of way.

I love just going through the list of elements on MDN because I could find all these ones that I didn't know Node, or maybe I learned about it. Do you know what the DFN element is for?

I feel like this is one of those ones we hit and stumped. At some point, DFN like it is.

I I my my brain is not working this morning. No. Tell me what DNFN is. So if you have it's a definition element.

So if if you have a paragraph where you're explaining what something is, the thing that you are defining should be wrapped in a TFN tag, and then you can I think by default, it will make it italic? So if I were to say, display contents is a way for you to display the element based on its content size, that's a paragraph tag. I would wrap display contents in a Deno tag because that is the definition that I am then defining.

Yes. And, likewise, there's a lot of funny weird things. Like, there's a time element for, when you have date time, and then it has a attribute on it, date time, that passes a a date string. So that way, you know, the browser knows that it's a date. There's so many little HTML elements, and I I strongly encourage you to specifically and we'll have a link to this in the in the show Node, to go to the MDN page where it's HTML and then element.

In fact, I'll even put it at the, the top of the show notes here because this is a great place to just look. If you are looking to do something in HTML, this is a great list of of, you know, really descriptive tags and what exists out there. Maybe you didn't know there was a time tag and you you saw it on here. And now all of a sudden, oh, shoot. I have a time here. I could throw this in a time tag.

Next up on our list of things to talk about is form. Form is how you add interactive controls to your website. Forms are a standard part the, you know, the web in general. Forms are how we communicate to our server or how we do all kinds of things. So like you mentioned with the form set, a form is a big old beast. You could probably have a whole episode on the form tag itself, so we're not gonna get too crazy into here. But forms typically, you know, they have an action.

They they do something.

They have a button or an input type submit. Typically, a button now these days. Do you ever use input type submit, Wes?

Input type submit? Yes. I no. I don't. Because input type of submit is very limited, and I much rather use a button with the type of submit because anything can go inside of a button, and you can style a button so much more. Yeah. Whereas input type of submit is a self closing element, and your options for styling it are a lot less.

Yeah. But both buttons the same way. Yeah.

Buttons are if you're wondering why they both exist, then buttons are

newer. Right? They're they're newer to I I guess, I don't know if they're running around forever. Wes I I don't remember a world without a button.

I'm I'm curious. Why is there a input type of submit

and a button type of submit? Are newer, but I don't have that actual understanding of when a button was added to CSS or HTML.

Let's find out. Maybe even button type submit hasn't always been inside. I don't know. I could be spreading,

incorrect things. Let's see. Oh, interesting. Hold on. An input type of submit takes additional attributes, including a form action, indicating a URL for which to submit the data. This takes precedence over the action on the form element.

Oh.

So input oh, this this input is also available on input type of image and button elements.

Okay.

And then you can do method.

I knew that. I remember because when Rack Server Components came out, people were sort of up in arms because a input type of submit can be outside of a form. Mhmm. And you can submit a form from outside of the form by giving it a form target attribute.

However, you can put a form target on a button and an input. So that's not the difference. That's just a little fact.

Interesting. Well, interesting, nonetheless.

And then, you know, in regards to that, I mean, there's a hundred 100 HTML input types. So just head on over to NDN and look at all those. They're changing all the time. We're getting new date types. We're getting all kinds of stuff, color pickers, whatever. One of the big things that people talk about in HTML is button tags and anchor tags.

Typically, you're always going to use an anchor tag if it's navigating to a new page and a button if it's performing some type of action interactivity on the page.

So don't use a a button tag to to navigate.

Don't use an anchor tag and then prevent default and have it just change something on the page. Do what's appropriate. Yeah. Or or the worst is they use an anchor tag,

and I wanna open it up in a new tab, but it doesn't go anywhere because they're just listening with JavaScript to to Scott listen for the click on that element and then submit the form.

That drives me nuts. Guster does that. Yeah. You hold you hold command. You click it, and then it it opens the page. It's, oh, and I'm

Gusto, come on. And nothing. Yeah. Or, like, I think FreshBooks has that where I wanna duplicate an invoice.

It's a link. Right click, open a new tab, but it's a link with a listener on it. So use a button in that case. And almost all the time, it's just because people don't want it to look like a button, so they don't use a button. You know? They just want a text link. So you have to go into your CSS and make a button with a class of naked that strips everything off of it or the opposite, make a class of button that goes on your links to make it look like a button.

Yes. I do both of those typically.

Last little bit well, not last little, but we also have headings, which we talked a little bit about, and and these are the h one through h six tags. And it seems like you can't talk about these enough because even just the other day, I saw on Twitter a conversation. It was like, how many h ones do you typically use? That's not the conversation you should be having. So if you want it more, like, detailed information on this, head on over to Sanity. It's episode number 674.

We did a heading design, which is not like aesthetic design, but how you structure your headings. Here's how you think in a in a brief explanation.

If you think about your website as like an article or maybe like a paper, you've been assigned to write a paper for class. Right? Your teacher says I need 5 pages on this. Typically, what you do is you give your paper a title and then potentially even write an outline. Right? And then those outline becomes headings and, you know, you have paragraphs. Or maybe you just use that as an outline.

You don't ever typically have more than 1 title of your paper, do you? Right? I mean, that never happens where you have a here's my paper on, you know, Radiohead's Kidday album, which is a paper I wrote in high school. My paper would not have multiple titles. You just have 1 title. That's your h one. That's what it should be no matter what. And then if you're thinking about your website as if it were like an outline structure of a paper, then that same regard, your heading structure needs to follow that. So you only ever go sequentially down JS in an h one or an h two needs to be below an h one. An h three needs to be below an h two. You don't skip. You don't say, alright. Inside of this h two, here's an h four just because it's smaller. Node you have an h three, and then you style it to look the way you want it to. So oftentimes, people get a little bit confused like that because they say, alright. I'm just gonna toss this one in because it's smaller, it's bigger, it's more important, this or that. Now it needs to follow a very strict structure as if it were an outline of a page or a document.

I got another one for you. Do you mind if I do a little more trivia? Because I find this really hand really fun.

Yes. Okay. I'm I'm gonna I'm gonna phrase it so we can get a clip out of it. Do you know what the output tag is in HTML? I've never used this. Yes. And this is so neat. Node what the output tag is. Okay. Yes. I I could tell you. Tell me. Yes.

Hands free. Here's this proof. I'm not looking at anything here. The output element is often used for, like, if stuff is streaming in from a server response, you could think about this as let let's say, you have a a Wes server. Right? And you're doing a deploy, and that deploy is showing you logs. Those are logs being output from the server process, that's when you would use the output tag.

I think that's right. MDN says the HTML element is a container element for a site or app that can inject the results of a calculation or the outcome of a user action. You're right. So, you perform a user action, deploy this website, and you wanna stream the results back in. Or if you simply just want to like, we built a compounding interest calculator in one of my courses. I should have used an output element in there to display

the actual values at the end of the day. Yep. It's an instant tag. Has a four attribute,

and it takes multiple IDs of which inputs they are associated with.

Wild.

I didn't know about that one.

I knew about it, but I never use it. Because I don't have I don't do that stuff that much, but it's seeing how it's used here to do calculations or, like, as the answer for a calculation.

That's someplace I would actually use it that I haven't thought about before. So that's really Other interesting elements, dialogue. Dialogue is a new element that gives you a modal. It has a lot of great default stylings, but more importantly, it also has its accessibility things baked in, like the escape key working. So dialogue is a fantastic new element that is fully supported that you should use if you need a modal, for anything.

We can say tables. Really quick, Wes, do you ever not use tables for tabular data or table data? That's a great question because sometimes you need to display tabular data,

but styling tables is such a pain in the butt. So I find myself being like, I bet I can do it with grid, and then I always regret it because, I guess, now that we have subgrid, it's probably a little bit easier, but still not all that useful. I do find myself using tables. However, I find myself putting a div directly inside of my table cell so that I can style a little bit differently. Because the actual table cell, the t d t h,

are really hard. There's a lot of limitations. They have a funky display property on them that you can't turn off because then you break how the table works. So I find myself just throwing a div inside of the table cell and then styling that thing how I need it. Yeah. There there's a lot there. I mean, tables, for those folks who haven't existed, since the dinosaurs were alive, like Wes and I have, you know, tables used to be exist to do, like, the layout for your entire website because we didn't have great layout tools. Everybody used tables to give yourself a structure for your website.

But tables nowadays are still handy for tabular data. They are hard to style. Typically, when I want to figure out a more complex table styling, one of the places I go for inspiration is Stripe. Their dashboards have the best tables. They're styled so well. It's great inspiration for understanding how to style a table and still make it look nice. So you can certainly use tables for this. I have seen people use divs. In fact, the the Drizzle, database explorer uses divs and display grid. So if you're out there and you're like, I wanna see how somebody pro does it that way, the Yeah. Drizzle Studio Drizzle Kits Studio, It does it, and it works really Wes. And it looks super nice. So, you can do either. But, typically, you're gonna reach for a table, and then you're gonna be googling different table properties and CSS stuff until you get it to look nice.

We also have audio video elements. Those are for, you guessed it, displaying audio and video. There are a bunch of tags that go along with the audio and video elements for giving multiple sources as well as for supplying caption tracks to your audio and video.

They are not amazing. By default, they work, but there's very little control over them. And almost always, if you're doing anything custom, you're gonna wanna reach for something that is fully customizable. Like, what is it? The media element would be on MediaChrome.

Yeah. MediaChrome, by the Mux folks. If you need video streaming or you need better support or, functionality out of the box, MediaChrome is the best way to do it. And it's a, it's a web component. Works really great. It has a ton of options. And let me tell you, the wide world of video and audio components and elements, man, there are just there's so many footguns and complex process and bad libraries that don't work the way you want them to. So MediaChrome is is the best in my mind. There's also the Canvas element, which is a drawing canvas that you can use JavaScript to draw things on. And, well, it's actually Canvas can be really super cool for all kinds of things, but it is kind of I don't know if it's underutilized.

But there's some websites. And anytime they're doing something that you're looking at it and, aesthetically, there's some crazy

animations or stuff going on Yeah. It's almost always Canvas. Canvas is is doing a lot of cool stuff in Wes. I've been doing a lot of shader work lately. Yeah. So I've been getting more into Canvas already. Canvas. Yeah. So there's 2 d Canvas, which is simply you wanna draw squares and circles and text to something. But then there's 3 d Canvas, which is you can do like, twist around and throw a model on there, do shaders.

So you've been what have you been working on with that? Oh, you know what? Really? I ultimately,

yeah, ultimately, I just want to build really cool looking shit.

That's really what it comes down to JS that, shader JS allowed to do some crazy stuff, and graphics programming in general is a wild world. So even just a a quick statement on graphics programming, when you when you're programming for, you know, graphics stuff in general, you're writing code that affects an individual pixel.

So the code you're writing is, hey. On this specific pixel, what's happening? But that code also needs to apply to every pixel on the canvas. So when you're thinking about it, you're not thinking about alright. You start here and then you adjust all these pixels. You're thinking about all these pixels at once. The current pixel position, what should this be doing? It's crazy stuff. So I'll I'll talk a little bit more when we do we'll do an episode on shaders, and I'll have a lot of cool examples. You could see what I mean. But, Canvas Wes pretty neat. You should check out the GitHub universe.com

website. And this is, like, a perfect example of, like, well, I'm not building a game. Why do I need to know 3 d? But the the tiny little subtlety that you can add with a little bit of 3 d canvas is amazing. And I I dove into it to download the models of all their 3 d, and it's pretty wild. They have a whole bunch of masks, and I'm assuming it's all exported from some 3 d Tolinski. Like, Spline is a a really sort of easy, accessible one for those regular folks like us to use, but this is such a fun site.

This is an incredible site done with Shaders specifically. This, Maxime Vercel site is is something that's maybe my favorite website that I've been on in the past 5 years. I mean, it's incredible. So if you wanna see this, that's kind of stuff you can do with Canvas.

This is a a great site to check out as well. There's also a search tag, which you can use to wrap a form or or for searching. So if you have a search bar, wrap that whole thing in a search tag, the input and everything. So that's one that a lot of people don't use that exists. Most websites have search or at least a lot of big websites have search. And I don't know how many search tags we're seeing out there. So Beautiful.

So that is the fundamentals of HTML. Obviously, there's a lot more to it, but you kinda get the the point of it. Right? There's a whole bunch of semantic elements. There's a whole bunch of elements that have baked in functionality in the browser, and then there are several elements like the Canvas audio video that will allow you to display the rich media on the page. Let us know if we missed anything you think should be added to the fundamentals. Tweet us at Syntax FM. We'd love to hear

it. Yes. Absolutely.

Cool. Well, let's get into the part of the show where we talk about sick picks and shameless plugs. I have a sick pick today that is a interesting cleaning brush. And this was suggested to me by a chef that I follow. There's a chef from Detroit who uses these these bamboo warp kitchen cleaning brushes, and they're these bamboo brushes. And the point of them is he was saying these are the single best things for cleaning your cast iron because they're not too abrasive where they're gonna scratch off your seasoning or anything like that. Yeah. But they're also

Yarn. So it's not like you're using, like, a Scott Daddy sponge or something like that. And you take this bamboo brush and you kinda shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit shit

shit shit Sanity shit shit shit

ESLint shit shit Sanity buy because they didn't work very well. But then the very 1st time I used it on the cast iron, I saw the light. These things, work very well. They're super cheap. $10 for 2. And, you know, it's bamboo, so it's gonna like, they're they're kinda brittle. They're gonna break over time. It's not like a, buy once thing forever. They're they're slightly disposable, but since they're bamboo, you can feel better about that. Right? They're there's no plastic involved here. Yes. Exactly. Yeah. Straight up bamboo. So It almost looks like a great green tea whisk for anyone trying to picture it. Yeah. I know. I I saw these on Instagram after this the chef did it, and, yeah, I I've been a fan. So, yeah, check it out. Cool. I've never seen these before. Abrasives.

I that's I'd love I've been using carbon steel for almost 2 years now. I've been using cast iron for probably 15 Yarn, and it's so nice to be able to use abrasive cleaning things and abrasive, spatulas on this type of stuff.

That's so good. I just, reseasoned

my carbon steel pan the other day, and it was it's quite the quite the experience, but well worth it. How do you get your seasoning off? Because I recently got a bunch of steel wool to reseason my cast iron because it it been starting to chip up.

I have never had Node so bad that I had to, like I know, like, the pros will dip it in electrolysis. So they'll throw it in, like, a bath. They'll throw a little anode in there, and they'll hook up 12 volts to it and leave it for a while. I've never had one that bad where I've really cared about it. I use soap on my cast iron pretty much every time I clean it, which a lot of people are scared of, and it's totally fine. My cast iron is in really good shape. I don't find I really need to strip it off. I just need to reseason as, I'm starting to see the color change. You know? It's that nice Deno black. And as soon as I start seeing some, like, lighter ones or if you go too far, a a couple drops left on it start to rust, you know you need to Scott of reseason it, and then I go through all the the steps to do that.

I was getting, like, flaking

of the Oh, yeah. After a period of time. Yeah. Yeah. That's that's usually, like, just, like, burnt on on, like, carbon from from the food that's being left over. And, I find that as well where I have to, like, super aggressively scrub it off. You could even use, like, like a chain meal. Like, I do one of those things. Yeah. I I I just use Yarn or a a steel wool to get it. Steel wool. Yeah. That that'll work, but that's good. I am going to sick pick the Logitech MX Master Wes mouse. So I have had the two s for 6 years now, and you'll see that it is no longer a mouse because it took it apart.

I thought you took it in. So I I was gone for about 3, three and a half weeks, and I came back, and it wasn't working. I was like, oh, it's it's probably died. You know? Like, I was gone for so long, and the battery died. So I plugged it in, and immediately, it threw up a low battery light on my screen.

And but it wasn't moving, but I could click on it.

And, like, I could click my volume buttons on it, and I was like, oh, it's weird. And then it just stopped working completely.

So I I took it apart. I got my I got my whole, like like, voltmeter here. I checked the batteries. I put 3 volts directly to it.

I can't I can't get it back. I think something Node of the capacitors on the charging circuit or there's a little thermometer in the battery that's a resistor.

Either that is broken or something. But I have had this thing for so long. It's like falling apart, all the plastics on it. So I was like, you know what? I don't got time for this. I'm not gonna fix it. I just drove 3 minutes to the store and bought a new one, and I got the three s because I've had the two s forever.

And this is the new one with aluminum wheels on it, and it's s, which means it's silent. And, probably, Randy is gonna be very happy about this because when I'm sitting here just, like, thinking about what I'm gonna say on the podcast, I'm always clicking my mouse. You know? I just click the 2 composites.

Yeah. Yeah. And this one is silent, and I absolutely love it. It's got so many buttons on it. You can program them to do volume. You can program gestures.

I'm not big on the gestures because I'd rather use a keyboard shortcut, but I do love it for all the extra controls opening up Scott or not spotlight, whatever the macOS Disney. Yeah. Yeah. Thing JS, such a good mouse. I posted on Twitter, and, like, everybody's like, this is the only mouse that is good for web developers. So check it out if you need a new mouse, the MX Master three Wes from Logitech.

Word.

Yeah. I just can't get on the mouse usage, but they look Node, and I That's the you're everyone's doing it. A whole another level. You know what I would love to do is to just use the trackpad like you? Yeah. But, like, I tried it so many times. Same with the, like,

mechanical keyboards. I think I have, like, 7 mechanical keyboards right now. And I have I have too many of them. Yeah. I don't I end up just using the 1 on the laptop a 100% of the time. So yeah.

Alright.

Shales plugs. Check out our YouTube on Sanity. So go to youtube.com. Search for Syntax, and you can find us on there. CJ just posted a really good video on infinite scroll, how to do infinite scroll with React, explaining how it all works, both the code as well as, like, the thought process for doing that type of thing.

Awesome awesome video. Check it on Out Syntax on YouTube.

Sick. Cool. Well, we will see you on the next one. Thanks so much for watching, folks.