Practice: Forms, Tables & Semantic Layout

Take a moment to think about this

This lesson is harder than the first one — instead of focusing on individual tags, you'll need to combine several concepts at once: semantic structure, form validation, and table accessibility. When you build a real project, you often have to juggle this many layers simultaneously. By combining forms, tables, and semantic tags together on a single page, you'll get a feel for building a real-world component. Once you've completed all the tasks, you'll be ready to start the final project chapter (profile card, landing page).

Practice Tasks

Task 1: Build a basic page layout using the header, main, and footer semantic tags, and add an article inside main. Task 2: Write a contact form with name, email (required, using pattern or type="email"), and message (textarea), each paired with a label. Task 3: Build an accessible table with a caption and scope="col" attributes, containing three data rows. Task 4 (bonus): Add a details/summary FAQ section below the article.

Can build semantic layout (header, main, article, footer) with correct nesting
Can pair form fields with labels, required attributes, and appropriate input types
Can write an accessible table with a caption and scope attributes

Code Example

html

<!-- Starter skeleton — task 1-4 ကို ဖြည့်ပါ -->
<!DOCTYPE html>
<html lang="my">
<head>
  <meta charset="UTF-8">
  <title>Practice Layout</title>
</head>
<body>
  <header><!-- site title / nav --></header>

  <main>
    <article>
      <!-- Task 2: contact form (name, email, message) -->

      <!-- Task 3: accessible table with caption + scope -->

      <!-- Task 4 (bonus): details/summary FAQ -->
    </article>
  </main>

  <footer><!-- copyright text --></footer>
</body>
</html>

You should see

You'll get a page with a header/footer layout that contains a working contact form, an accessible table, and an FAQ dropdown.

Try it in 5 minutes

Take 15 minutes to finish tasks 1-3 first. Then click the submit button on your form and check whether required field validation actually works.

A quick word of caution

Don't use tables for layout — tables are for displaying data. For page layout, stick to semantic tags or CSS layout instead.