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

A page starts with meaning

Let us build a page for an ideas workshop. Before choosing colors, it needs to say what each part means.

Learning paths12 min

Let's discover together

  1. 1

    HTML marks content and relationships: <p> is a paragraph and <h1> is a level-one heading. An element usually has opening and closing tags around content; attributes go in the opening tag. Write <p>Hello</p>, rather than drawing a page with spaces.

  2. 2

    <!doctype html> requests modern rendering mode. <html lang="en"> identifies the main language; use pt-BR or es when translating. <head> holds metadata: UTF-8 charset, viewport and <title>, which names the tab. <body> contains page content.

  3. 3

    The tab title and visible heading have different jobs. This course preview shows body content with reading styles and a limited set of elements; it neither executes JavaScript nor reproduces every feature of a real page.

  4. 4

    Open “My files and GitHub”, change the example heading and paragraph, then update the preview. Download the .html and open it in a browser. On a computer, edit as plain UTF-8 text: index.html, not index.html.txt; save and reload to see changes.

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

Recognize HTML document structure and save a first page.

Now it's your turn

Discovery workshop

Read, predict, try

<title>Workshop</title> is in head; <h1>Welcome</h1> is in body.
Build your answers and check when you are ready.
A moment to understand

Does the preview automatically approve all accessibility?

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 a fictional two-sentence introduction. Change the tab title and h1 separately and record where each change appears.

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.