Rullst AcademyRullst Academy/Lesson
Semantic HTML and accessibility · Lesson 02 / 10

A map for finding your way

A visitor needs to find the program without going through everything again.

Learning paths14 min

Let's discover together

  1. 1

    Use header for introductory content, nav for major navigation, main for primary content and footer for closing information. Keep one visible main and one descriptive h1 in this project. These elements help assistive technologies locate regions.

  2. 2

    Think of an outline: h1 Ideas workshop; h2 Program; h3 Paper activity; h2 Questions. Choose a level for its relationship to other topics, not its font size. CSS will handle appearance in another course.

  3. 3

    A section groups a topic and normally has a heading; article suits self-contained content such as a news item. Div remains useful when no specific semantic element fits. Do not make every paragraph a new region.

  4. 4

    Read only the heading list in the preview review. Does it explain the page? Change an h2 to h4 and observe the hint; restore it. Sequence checking helps, but does not understand the relationship between your ideas.

HTML workshop: write, observe, review

Edit HTML in “My files and GitHub” and update the preview. It uses study elements and reading styles: scripts, custom CSS and external navigation are disabled. Only the kit’s route.svg is shown as an image.

Go to my HTML

These simple checks are neither complete HTML validation nor a WCAG audit. Review content, keyboard, zoom and assistive technologies; record what you have not tested.

Official links and next step

✦
YOUR MISSION

Organize headings and page regions by function.

Now it's your turn

Discovery workshop

Read, predict, try

The program has two activities belonging to it. The page starts with h1, then h2 Program.
Build your answers and check when you are ready.
A moment to understand

Should a large h2 become h4 just to make it smaller?

I need a hint

Compare the intent with the meaning of the elements; appearance alone does not demonstrate accessibility.

Loading your journey…

Take it with you

Write an outline for a different workshop. Build header, main and footer, with clear headings for two sections.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.