Use HTML elements that match the content
Want more background?
The idea in everyday life
Read the supplied HTML as a structured document before treating it as a visual design. README section 2 walks through metadata, landmarks, headings, labels and native controls, then asks you to edit and test an unstyled copy. Preserve the IDs that connect navigation and JavaScript to their targets.
HTML defines a page’s content and structure. Semantic HTML uses elements that match the content, such as nav for navigation. CSS controls how the page looks.
One step at a time.
Use the sample or information you have permission to use. Keep your work as you go. You can pause between steps.
- 1
In the pack, open index.html in your editor. Read the head: language, title, description, viewport, stylesheet and deferred script. Save changes as plain text with the .html extension.
- 2
Make exercise.html by copying index.html, then remove only its stylesheet link. Open that file in your browser: the header, navigation, main content, sections and footer must still make sense.
- 3
Trace the skip link to main; each navigation link to its section ID; the minutes label to its matching input ID; and the submit button to the local form. Edit one heading and paragraph, save, reload, and confirm your changes.
- 4
Restore the stylesheet link and bring your edits into index.html. Keep one h1 and logical h2/h3 levels. The SVG is decorative next to the visible club name, so its alt text is empty.
See how it works.
Copy the supplied index.html to exercise.html, remove the stylesheet link, and open it. You should still read the same sections and use anchor links, the native details disclosure and labeled input. The HTML, CSS and JavaScript are supplied as runnable sibling files; their exact filenames and IDs are explained in README.md.
Did you cover these?
- Your unstyled edited HTML remains readable, with working section links and disclosure.
- The label/input IDs match, headings follow the content hierarchy, and status has accessible live text.
- File extensions, sibling links and script IDs remain intact after your edit.
What to finish
A complete, navigable HTML page with the stylesheet disabled.
Watch for this
Using clickable divs, heading tags for font size, or placeholder links that break keyboard and assistive use.
How can I tell I understand it?
The source reads like a clear document and every interactive element has the correct native behavior.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkOptional course overview video · same video as Lesson 1
Full Stack Web Development for Beginners
From freeCodeCamp.org. Watch here or open it on YouTube .
In the optional HTML chapters, identify what each native element contributes, then verify the same behavior in your edited unstyled page.Tools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.