What you will learn
- Use headings, paragraphs, sections, and landmarks.
- Choose semantic elements based on meaning.
- Understand nesting and document hierarchy.
- Write HTML that remains useful without CSS or JavaScript.
The code from this chapter
Type these programs yourself. The predictions below are the exercises; the explanations are in the book.
2.1 Elements, Tags, and Attributes
Type this into a file, predict the output, then run it.
<a href="projects.html">See my projects</a>2.3 Semantic Landmarks
TPRM Lab 2.1: Turn a Blob into a Document
Type this into a file, predict the output, then run it.
<body>
<header>
<h1>City Garden Club</h1>
Small spaces, better harvests.
</header>
<main>
<section>
<h2>Next Workshop</h2>
Learn how to grow herbs in containers.
</section>
<article>
<h2>Water in the Morning</h2>
Cooler temperatures reduce evaporation.
</article>
</main>
<footer>Garden Club</footer>
</body>TPRM Lab 2.2: Meaning Before Styling
Type this into a file, predict the output, then run it.
Please <strong>save your work</strong> before closing.
I <em>really</em> recommend testing on a phone.
<blockquote>
Make the structure correct before making it pretty.
</blockquote>