Introduction to Semantic HTML Elements. Semantic HTML is the use of HTML markup that describes the purpose of the webpage's elements. And I'm gonna begin with the header element. And in this video, I'm gonna use paragraphs to loosely mark the location of each element in the browser window to the right. But the content that is shown in the IDE is not the main point of the video. The point of the video is to understand the structure and purpose of the semantic elements.

Now the header represents the introductory content of a page or section of a site. This content could be a logo, a heading, a search form, or many other elements, such as navigational aids. Speaking of which, I will add the nav element, which is short for navigation, and this element will contain the anchor elements that will link to different pages of your web application. Now after the header is where I want the main content of the page to be displayed and I will use the main element for this. And this is what main represents, the central topic of this page, whatever that may be.

Now if I want to divide my main content into sections for organization purposes, there is a section element and I will create it after the paragraph. Now here's where semantic HTML gets a little tricky. Because of recommended best practices when using section, the section is a generic semantic element, it should only be used when no other semantic elements will fit with their implied meaning. The recommendation is that a section should be defined by including a heading within the element, but there are other scenarios, such as a grouping of buttons where a heading doesn't make sense.

So what are some elements that should be used in place of a section element? One such element is the article element. The article element is meant to represent a self-contained piece of content, for example, an event announcement on your website. Now off to the right of the article content is an informational sidebar. When using semantic markup, the recommended element for this layout is the aside element. Now the aside element doesn't have any defaults that automatically shifts the element to one side or to another of its companion element. You would need to use CSS to achieve this.

Now this completes the main section and a common practice is to have informational content such as a copyright, social media links or a navigational menu at the bottom of the page. And after the main element, I will create the footer element where this content will be located. And structurally, this is the end of the content on your website. Now does the footer have to contain the items I mentioned earlier? Absolutely not, but there are common and opinionated practices that will lead you in the right direction. And that's it. Thanks for watching at Cloud Academy.