Key Concepts

Review core concepts you need to learn to master this subject

Semantic HTML

Element Placement

Embedding media

<figure> and <figcaption>

<section> and <article>

<aside> Aside Element

Semantic HTML

<!--Non Semantic HTML-->
<div id="footer">
 <p>this is a footer</p>
</div>

<!--Semantic HTML-->
<footer>
 <p>this is a footer</p>
</footer>

Semantic HTML introduces meaning to the code we write. Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general-purpose element to create things from headers to footers to articles. With Semantic HTML we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.

Semantic HTML
Lesson 1 of 1
  1. 1
    Introduction to Semantic HTML
    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…
    Start
  2. 2
    Header and Nav
    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. …
    Start
  3. 3
    Main and Footer
    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…
    Start
  4. 4
    Article and Section
    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…
    Start
  5. 5
    The Aside Element
    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…
    Start
  6. 6
    Figure and Figcaption
    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…
    Start
  7. 7
    Audio and Attributes
    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 into a doc…
    Start
  8. 8
    Video and Embed
    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 …
    Start
  9. 9
    Review
    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…
    Start

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