1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Introduction to Semantic HTML Elements

Introduction to Semantic HTML Elements

Contents

keyboard_tab
Semantic HTML Elements
Introduction to Semantic HTML Elements
Overview
Difficulty
Beginner
Duration
4m
Students
9
Ratings
5/5
starstarstarstarstar
Description

This practical course explores HTML semantic elements, covering the meaning and purpose of some commonly used semantic elements. It also focuses on the use case of specific semantic elements.

Learning Objectives


  • Learn about different HTML semantic elements
  • Learn the difference in use cases of popular semantic elements
  • Explore the implied meaning of some semantic elements

Intended Audience


This course is intended for anyone who wants to learn about HTML.

Prerequisites


Anyone with an interest in learning HTML or who wants to improve their knowledge of HTML in general.

Transcript

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.

About the Author
Avatar
Farish Kashefinejad
Full-Stack Development Content Creator
Students
570
Labs
9
Courses
13
Learning Paths
2

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics