Chapter 2: Text Formatting and Hyperlinks

HTML is primarily about defining the *meaning* of content. In this chapter, we go beyond basic paragraphs and headings to explore how to emphasize text, create lists, and—most importantly—build the hyperlinks that hold the entire World Wide Web together.

1. Semantic Text Formatting

It is tempting to just use tags like <b> for bold or <i> for italics. However, modern HTML encourages semantic tags, which tell the browser (and search engines) *why* something is formatted that way. For instance, <strong> indicates important text, while <em> indicates emphasized text.

<p>This is <strong>very important</strong> and this is <em>emphasized</em>.</p>

2. Lists: Organizing Content

Lists are essential for clarity. HTML provides two main types:

• Unordered Lists (<ul>): Used for items where the order doesn't matter, typically shown with bullet points.
• Ordered Lists (<ol>): Used for steps or rankings where the order matters, typically shown with numbers.

Each item in these lists must be wrapped in a <li> (list item) tag.

3. Hyperlinks: The Web's Backbone

The "Hyper" in HyperText comes from the <a> (anchor) tag. This is how we navigate between pages. The most important attribute is href (Hypertext Reference), which contains the destination URL.

<a href="https://www.google.com" target="_blank">Visit Google</a>

Notice the target="_blank" attribute; this tells the browser to open the link in a new tab, which is a common best practice for external links.

4. Absolute vs. Relative Paths

When linking to pages on your own website, you don't need the full URL (e.g., https://your-site.com/about.html). Instead, use relative paths like about.html or ../pages/contact.html. This makes your website portable—if you move your site to a different domain, your links won't break.

Common Beginner Mistakes

• Broken Links: Always double-check your spelling in the href attribute. A missing slash or typo is the most common reason links fail.
• Nested Links: You cannot place a link inside another link. It leads to unpredictable browser behavior.
• Misusing Lists: Don't use a list just to indent text. Use CSS for layout and spacing; use HTML tags only for the structural meaning of the content.

Try It Yourself

1. Create an unordered list of your three favorite programming languages.
2. Add a link to the official documentation for each language.
3. Write a paragraph describing your goals and use the <strong> and <em> tags to highlight key words.

Lists in HTML

HTML supports both ordered (numbered) and unordered (bulleted) lists, which are useful for anything from recipe steps to navigation menus.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
</ol>

Linking to Other Pages

The anchor tag <a> creates hyperlinks. You can link to other pages on your own site (relative links) or to external websites (absolute links), and even jump to a specific section of the current page.

<a href="about.html">About Us</a>
<a href="https://example.com" target="_blank">Visit Example</a>

Nesting Tags Correctly

Tags must be closed in the reverse order they were opened. Writing <b><i>text</b></i> is invalid HTML because the tags overlap; the correct form is <b><i>text</i></b>. Browsers often try to fix this automatically, but relying on that is bad practice.