3. Text, Links & Images
Formatting Text in HTML
HTML offers a variety of tags to format text for emphasis, meaning, and structure. Unlike styling with CSS, these tags define what the text *represents*, not how it looks.
<h1>Welcome to My Site</h1>
<h2>About Me</h2>
<p>Hello! I’m learning HTML and building my first website.</p>
<p><strong>Fun fact:</strong> I love tech and coding!</p>
<p><em>This text is italicized for emphasis.</em></p>| Tag | Purpose |
|---|---|
| <h1>–<h6> | Headings (from most important to least) |
| <p> | Paragraph |
| <strong> | Bold for importance |
| <em> | Italics for emphasis |
| <br> | Line break |
| <hr> | Horizontal line divider |
Adding Links with the <a> Tag
The <a> (anchor) tag connects one page or section to another. It’s one of the most powerful elements in HTML, allowing you to link to other sites, files, or even places within the same page.
<a href="https://developer.mozilla.org/" target="_blank">Visit MDN Web Docs</a>
<a href="about.html">About Me Page</a>
<a href="#contact">Jump to Contact Section</a>- `href` — defines where the link goes.
- `target="_blank"` — opens the link in a new tab.
- Anchor links (like `#contact`) jump to a section within the same page.
Inserting Images
Images make your pages more engaging. HTML uses the <img> tag to embed them. It’s a self-closing tag - meaning it doesn’t need an ending tag.
<img src="profile.jpg" alt="A photo of me smiling" width="200">
<img src="https://via.placeholder.com/150" alt="Placeholder image">- `src` - image source (path or URL)
- `alt` - alternative text for accessibility and SEO
- `width` and `height` - optional size control (use CSS for better scaling)
Understanding Relative vs Absolute Paths
A relative path points to a file in your project folder (like `images/profile.jpg`). An absolute path points to a full web URL (like `https://example.com/profile.jpg`).
Mini Project Step 2: The 'About Me' Page
Expand your `index.html` from Lesson 1 by adding formatted text, a personal photo, and useful links. You can link to your social profiles or favorite sites, and include one internal anchor link that scrolls to a 'Contact' section at the bottom of your page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<img src="profile.jpg" alt="My photo" width="200">
<p>Hello! I’m <strong>Chrise</strong>, a beginner web developer learning HTML, CSS, and JavaScript.</p>
<p>I enjoy <em>building things</em> and exploring the web.</p>
<h2>Find Me Online</h2>
<a href="https://github.com" target="_blank">GitHub</a> |
<a href="https://twitter.com" target="_blank">Twitter</a>
<h2 id="contact">Contact</h2>
<p>You can reach me at <a href="mailto:hello@example.com">hello@example.com</a>.</p>
</body>
</html>