Key Concepts

Review core concepts you need to learn to master this subject

Element Placement

Semantic HTML introduces elements that can tell developers exactly what the element does or where it’s placed based on the name of that element. Some of these elements are <header>, <nav>, <main>, and <footer>. <header> describes the content at the top of the page <body>. It may include a logo, navigational links or a search bar. <nav> encapsulates the page’s navigational links. It is often placed inside the <header> or <footer>. <main> encapsulates the main content of a page between the header/navigation and the footer areas. <footer> includes the page’s footer content at the bottom of the <body>.

Embedding media

Semantic HTML introduces us to <video>, <audio> and <embed>. <video> allows us to add videos to our website. <audio> allows us to implement audio into our website. <embed> can be used to implement any type of media. These elements are universal in that they all use the src attribute to link the source of the content. <video> and <audio> requires a closing tag while <embed> is a self-closing tag.

<figure> and <figcaption>

The <figure> element is used to encapsulate media such as an image, diagram. or code snippet. The <figcaption> element is used to describe the media encapsulated within the <figure> element. Developers will normally use <figcaption> within the <figure> element to group the media and description. This way, if a developer decides to change the position of the media, the description will follow along with it.

Aside Element

<aside> is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. Usually this information would be in a sidebar or a location where it doesn’t obstruct the main piece of content. An example of this would be an article that discusses how to take care of a dog and next to the article an ad would appear advertising a dog grooming product.

Semantic HTML
Lesson 1 of 1
  1. 1
    When building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word semantic means “relating to meaning,” so semantic elements provide information about the content bet…
  2. 2
    Let’s take a look at some semantic elements that assist in the structure of a web page. A is a container usually for either navigational links or introductory content containing to headings. …
  3. 3
    Two more structural elements are and . These elements along with and help describe where an element is located based on conventional web development standards. The element is used to enca…
  4. 4
    Now that we covered the body of Semantic HTML, let’s focus on what can go in the body. The two elements we’re going to focus on now are and . defines elements in a document, such as chapters…
  5. 5
    The element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. This element can be used alongside other elements s…
  6. 6
    With , we learned that we can put additional information next to a main piece of content, but what if we wanted to add an image or illustration? That is where and come in. is an element use…
  7. 7
    Now that we learned about text-based content, let us dig into ! Surely everyone needs — how else would you listen to your Korean hip hop? The element is used to embed audio content int…
  8. 8
    As demonstrated in the previous exercise, media content can be a useful addition to a website. By using a element, we can add videos to our website. The element makes it clear that a developer …
  9. 9
    Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of Semantic HTML and how to use it, you can incorporate semantic elements into your website to make it more acces…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo