Challenge - Text and links
Write a page combining headings, paragraphs, emphasis and links.
Recall text and links
In HTML, text is built with meaningful tags. <h1> holds the main heading, <p> a paragraph, <strong> strong emphasis, and <em> italic emphasis. This distinction tells the browser, screen readers, and search engines what the content means.
Links are made with <a href="...">. An absolute URL gives a full address (https://bookshelf.com); a relative URL points inside the same site (/reviews/5). Sometimes a fragment like #about jumps within the page.
Exercise Combine heading, paragraph and link
Add a <h1> heading and a <p> paragraph to body. Inside the paragraph include a <strong>, an <em>, and an <a> link pointing to https://bookshelf.com.
Show example solution
<body>
<h1>Book Reviews</h1>
<p>This week I talked <strong>at length</strong> about the book I <em>loved</em> most.</p>
<p>For more, you can visit my <a href="https://bookshelf.com">blog</a>.</p>
</body>Test yourself
-
Which is an absolute URL?
- https://bookshelf.com/post/5
- /posts/5
- #about
- mailto:info@bookshelf.com
Show answer
https://bookshelf.com/post/5 — Correct. An address starting with https gives a full path; that makes it absolute.
-
Write the link's attribute
<h1>Book Reviews</h1> <p>On my page I share my <strong>favorite</strong> books. For more, you can visit my <a ____="https://bookshelf.com">blog</a>.</p>Show answer
<h1>Book Reviews</h1> <p>On my page I share my <strong>favorite</strong> books. For more, you can visit my <a href="https://bookshelf.com">blog</a>.</p> -
Match each tag to its role
- <h1>
- Main heading
- <p>
- Paragraph
- <strong>
- Strong emphasis
- <em>
- Italic emphasis
- <a>
- Link