First steps on the web / 03
HTML: the skeleton
Write meaningful markup for structure, links, images, lists, and forms.
Before you begin
By the end, you can…
- Write semantic structure with header, nav, main, and footer
- Add links, images, lists, and headings that mean something
- Know when an element is the right tool
01 / Understand
HTML is meaning, not appearance
HTML describes what content is: a heading, a list, a link, an image, a region of navigation. Browsers, screen readers, and search engines read this meaning. Choose elements for what they mean, and styling can follow later.
A link uses an href; an image needs src and, for people who cannot see it, alt describing its purpose. Lists structure items; headings create an outline. These small habits make pages usable for everyone.
02 / Apply
Build the skeleton of a profile page
Structure a page with header, nav, main, and footer; give it a single h1 and a clear section for each topic; link to your real or future projects; add one image with a useful alt description.
Then look at the page without CSS. If the meaning is still clear, the skeleton is good. Every later lesson will build on this shape.
<header><h1>Your name</h1></header>
<nav aria-label="Primary">
<a href="#about">About</a> <a href="#projects">Projects</a>
</nav>
<main>
<section id="about">…</section>
<section id="projects">…</section>
</main>
<footer>…</footer>03 / Make
Your studio task
Make — Build a semantic personal profile page from scratch.
- Write a profile page with header, nav, main, sections, and footer.
- Add one real link, one list, and one image with alt text.
- Validate the markup with the W3C validator.
- Read the page without CSS and confirm the meaning survives.
It uses header, nav, main, and footer, real links, an image with alt text, and reads sensibly without CSS.
04 / Check