Hi everybody. Today we're gonna be talking about some of the newer HTML5 tags that I like to refer to as the semantic tags. This is going to continue our conversation about how we're trying to make our webpages the most accessible as possible to as many people. Before we begin talking about specific tags, though, I want to talk to you about the design of your webpage. Really, the most important step in your web design is the design. Once you're down pat with the different tags and typing in files, we're gonna change our focus to how you want to lay out your page. And you need a really clear picture of what you want to create before you can begin coding in earnest. So let's take a look at this sample page. Again, it's just a quick sketch, and it shows that I would like to have a header section, a footer section, and a few other sections embedded in between the two of them. Once I know that that's the kind of design I want, I can begin coding. So you may recall that one of the most common tags used to be the div tag, because in the beginning, kind of dum, dum, dum, you did everything with div. You would go through your page, group it together, and put each group into a div tag. These divs almost always had some sort of special class or ID associated with them. So for instance, one div might have the class of header, another the section, another the footer. This way, you could back to your design and really break it up in a way that worked best for you. The first tag that I'll be talking to you about today is the header tag. The header tag is typically used to group together introductory or navigational aids. So you'd put in your title, perhaps your navigation bar, anything that really lets the user know right off the bat what this page is about. The thing I want you to understand about the header tag is that it is a block tag, and nothing more than that. There's no special formatting or anything along that line. However, it does let the user know that this is the header section. Now, most people will never see the tags. Remember, the browser looks at the tag and doesn't display it, instead formats its content. But for people who are using screen readers or other assistive devices, this is a great way for them to find what they're looking for if they're not using visual clues. Another point I wanna make is that the header tag should not be confused with the head or different heading tags. This is going to happen to you a lot. Just remember that the head tag is for metadata, and the header tag is more of just an aid. The next tag I'm gonna talk to you about today is the nav tag. The nav is basically a section of your page that links to other pages or parts within your page. So, inside your nav you're not going to have links to Facebook, or Google, or your LinkedIn account or anything like that. Instead, it's really just links that go to other parts of your site. So for instance, here I've made unordered list with three links. Each of them go to a different part of your page. There's a lot of debate, for better, for worse, as to whether or not your nav tags should be using lists, but the important thing is to include the nav tag to help people navigate through your page. Oftentimes, you'll find the nav tag embedded inside the header tag. Another tag is the footer tag, and this is a section that contains information that is pretty typical for the bottom of the page, such as copyright data, related documents, your links to social media. And while I say that it's usually at the bottom of the page, this is not required, nor does using the footer tag actually make it that it'll show up at the bottom. So in this example here, I have my footer tag, my special entity to make the copyright symbol, and then my name with a line break. And then I've also included a link back to my main site. Some of our other semantic tags have a little more oomph to them. So for instance, one of the new tags is the figure tag, and it has a lot more semantics than the image tag we've gone over previously. Every figure can include additional information. So you can include an image, you can include multimedia, you can include a combination of all of them. But it also has some additional tags such as the figcaption. So what this is going to do is somebody who, it provides additional information for somebody who may not be able to see it. So the picture normally just floats by itself when its in an image tag, this lets you say, this text goes specifically with this image. Now again, we do have the alt tag, which helps describe the picture, but you have to remember, most of us will never see that. There are a number of other new tags in HTML 5, and it's not really possible for me to go over all of them. Instead, you'll find that as you develop your pages and after you've done your initial web design, you'll logically just head towards these different tags. Some of them are structural elements, such as article, summary, sections, etc. Others you won't be using until we create forms. Another would be input types. Have you ever noticed that sometimes on your phone, when you click on certain buttons, different keyboards will pop up, depending on whether you're typing in an email or a URL? These are all things to the new HTML 5. Email, data, color, etc., tags. We're also gonna be able to talk about graphics elements such as canvas, and also media elements which let you go ahead and put in your movies and music of your choice. The important thing to remember is that if you're developing your page, and you find yourself using a lot of divs, you're going astray. You really want to use the best tag available that will give the most meaning to the users. Semantic guide tags are gonna help guide your users to the information in your page. And that's really what you want to do, you want to make your page the most accessible to as many people as possible.