Make pages easier for everyone
Use clear structure, useful labels, descriptive links and accessible tables.
- Write a clear heading hierarchy
- Label form fields and images
- Mark up simple data tables
Accessible HTML works for more people and often makes a page clearer for everyone. Use one descriptive page heading, meaningful section headings, keyboard-friendly native controls, useful link text and labels that stay visible.
1<main>
2 <h1>Library hours</h1>
3 <table>
4 <caption>Hours this week</caption>
5 <thead>
6 <tr><th scope="col">Day</th><th scope="col">Hours</th></tr>
7 </thead>
8 <tbody>
9 <tr><th scope="row">Monday</th><td>9 am to 6 pm</td></tr>
10 </tbody>
11 </table>
12</main>Library hours Hours this week Day Hours Monday 9 am to 6 pm
Use a table for data that belongs in rows and columns, not to position page content. A caption explains what the table is about. Header cells (<th>) identify rows or columns; scope makes that relationship clearer. Use a list for a list and a heading for a title.
Key takeaways
Use semantic HTML and a clear heading hierarchy.
Keep labels visible and links descriptive.
Use table headers to explain relationships in data.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write HTML
Write the markup, preview it in a sandboxed browser frame, and check the visible text against the requirements.
Publish library hours
Create a main region with the heading Library hours, a table caption Hours this week, column headers Day and Hours, and a row with Monday and 9 am to 6 pm.
- Library table text
Your markup is previewed in a sandboxed frame. Run tests to check the visible page text.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…