Give a team page its structure
Start with a page someone can use
Your school’s robotics team needs a page for its next meetup. Before picking colors or animations, decide what visitors need to know: who, when, and where.
HTML describes a page’s structure and meaning. A heading introduces a topic. A paragraph holds related sentences. A link takes someone somewhere else.
<h1>Robotics Club</h1>
<p>Build something together this Thursday.</p>
An element usually has an opening tag, content, and a closing tag. In <h1>Robotics Club</h1>, the heading’s content is “Robotics Club.” Tags describe that content; they aren’t words the visitor sees.
Make the next step clear
<a href="https://www.firstinspires.org/">Explore robotics</a>
The href attribute gives the link its destination. Use words that describe where the link goes. “Explore robotics” tells a visitor more than “click here.”
Your turn
Turn the starter into a meetup announcement. Add a main heading, a paragraph that includes a meeting time, and a useful link. Run it to see your page. Then check your work.
Try changing the heading to <p>. The words still appear, but what meaning did you lose? A page’s structure helps people using screen readers navigate, too.
Stop and think
- Which information deserves the main heading?
- How is an HTML element different from its text?
- Can someone understand your link without reading the sentence around it?