CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Semantic blog skeleton

HTML course · Beginner · Lesson 63/68

Build a blog page skeleton using all semantic elements.

What we learned in this group

In this group you met the core semantic tags:

  • <header> and <footer>: top and bottom
  • <nav> and <main>: menu and main content
  • <article> and <section>: self-contained post and themed part
  • <aside> and <address>: side content and contact

Now we will combine them into a blog page skeleton.

Exercise Write a blog skeleton

Build this shape inside body: a <header> holding an <h1> (text: My Diary); a <nav> holding a <ul> with one <li> (text: Home); a <main> holding an <article> with an <h2> (text: First post) and a <p>; an <aside> holding an <h2> (text: Related); a <footer> holding a <p> (text: © 2024).

Show example solution 
<body>
  <header>
    <h1>My Diary</h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
    </ul>
  </nav>
  <main>
    <article>
      <h2>First post</h2>
      <p>Post text...</p>
    </article>
  </main>
  <aside>
    <h2>Related</h2>
  </aside>
  <footer>
    <p>© 2024</p>
  </footer>
</body>

Test yourself

  1. Match each tag to its role

    <header>
    Top of a section
    <nav>
    Main menu
    <main>
    Main content
    <article>
    Self-contained post
    <aside>
    Side content

  2. Contact inside the footer

    <footer>
  <____>
    <a href="mailto:info@blog.org">Contact</a>
  </address>
</footer>
    Show answer 
    <footer>
  <address>
    <a href="mailto:info@blog.org">Contact</a>
  </address>
</footer>

  3. Which tag marks the main content of a blog page?

    • <aside>
    • <main>
    • <address>
    • <nav>
    Show answer

    <main> — Correct. main marks the page's main content.

All lessons in Beginner

1 Document basics

  1. What is HTML?
  2. The document skeleton
  3. Head and meta tags
  4. Title and language
  5. Comments and readability
  6. Summary - My first HTML page

2 Text content

  1. Headings: h1–h6
  2. Paragraphs
  3. Line break and horizontal rule
  4. Emphasis and important text
  5. Quotations and sources
  6. Summary - Article page

3 Project: About me page

  1. Project: About me page
  2. Skeleton and title
  3. Introductory text
  4. Emphasis and separation
  5. Project final - About me

4 Links and navigation

  1. Anchor links
  2. Absolute and relative URLs
  3. In-page links
  4. Link targets
  5. Email and phone links
  6. Summary - Navigation menu

5 Lists

  1. Unordered lists
  2. Ordered lists
  3. Description lists
  4. Nested lists
  5. Links in list items
  6. Summary - Table of contents

6 Project: Business card page

  1. Project: Business card page
  2. Name and title
  3. Contact list
  4. Skills and links
  5. Project final - Business card

7 Images and media

  1. Adding images
  2. Image dimensions
  3. Figure and figcaption
  4. Audio and video
  5. Alternative sources
  6. Summary - Media gallery

8 Intro to tables

  1. Table skeleton
  2. Header cells
  3. Table sections
  4. Caption and title
  5. Cell spanning
  6. Summary - Class schedule table

9 Project: Recipe page

  1. Project: Recipe page
  2. Recipe title and summary
  3. Ingredient list
  4. Steps and baking table
  5. Project final - Recipe page

10 Intro to forms

  1. Form skeleton
  2. Labelled input
  3. Input types
  4. Textarea and button
  5. Selection fields
  6. Summary - Feedback form

11 Intro to semantic tags

  1. Why semantic tags matter
  2. Header and footer
  3. Nav and main
  4. Article and section
  5. Aside and address
  6. Summary - Semantic blog skeleton

12 Beginner final

  1. Challenge - Document skeleton
  2. Challenge - Text and links
  3. Challenge - Lists and tables
  4. Challenge - Form and semantic structure
  5. Challenge - Beginner capstone