Meaningful HTML
Choose elements that explain their purpose.
A useful skeleton
A header introduces a page or section. A nav holds a major group of navigation links. The main element contains the primary page content. A footer holds closing information. These elements provide meaning beyond their appearance.
Actions and destinations
Use an anchor when the user goes somewhere and a button when the user does something. Native controls bring built-in keyboard behavior. A clickable div needs extra work to provide that behavior.
Use a div when you need a neutral wrapper
A div is useful for layout when no semantic element fits. It does not describe the content. Choose semantics first, then style them.
Try the example
<header>
<p>Fieldnotes / Issue 01</p>
<nav aria-label="Main"><a href="#story">Read the story</a></nav>
</header>
<main id="story">
<article>
<h1>A walk without a destination</h1>
<p>Some ideas arrive when you stop looking for them.</p>
</article>
</main>
<footer><p>Made with attention.</p></footer>Enable JavaScript to edit and run the example in the playground.
Your turn
Add an h2 and paragraph inside the article.
Check your understanding
Which element is best for a control that performs an action?
- <div>
- <button>
- <span>
Show answer and explanation
<button>. A button provides native action semantics and keyboard behavior.