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

Links navigate; buttons act

“Click here” does not tell us where we are going. Give useful names to paths.

Learning paths12 min

Let's discover together

  1. 1

    An <a href="..."> navigates; a button performs an action. A div that looks like a button does not automatically gain focus, keyboard behavior or button semantics. Prefer the appropriate native element.

  2. 2

    href="#programa" points to id="programa" on the same page. Each id must be unique. agenda.html is relative; https://example.org/agenda is absolute. The preview enables internal destinations only; test other paths in the local file.

  3. 3

    Write “View workshop program”, not just “here”. Link text should help predict the destination, including when someone navigates a list of links. Do not promise a download when the destination is a page.

  4. 4

    Use Tab to reach a link and Enter to open it. A native button accepts keyboard input, but type="button" does not invent an action: custom behavior requires JavaScript. This lesson’s practice button deliberately has no action.

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

Choose native links and buttons and describe destinations clearly.

Now it's your turn

Discovery workshop

Read, predict, try

We want to visit Program and later create a custom save action.
Build your answers and check when you are ready.
A moment to understand

Does writing a Save button alone store data?

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

Create two internal links with distinct names and test both by keyboard. Change an id to observe a broken destination, then repair it.

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.