HTML Content Creation: Text, Images, and Hyperlinks

TL;DR

You'll learn how to add basic text, display images, and create clickable links using HTML, which are the fundamental building blocks for any webpage. Mastering these elements lets you structure information and make your web content interactive. We'll cover the essential tags and attributes needed to bring your content to life.

1. The Mental Model

Think of HTML as a set of instructions for a web browser, telling it what content to display and how to display it. You're essentially arranging different types of content—like paragraphs, pictures, and links—on a page using specific "tags."

2. The Core Material

Creating content in HTML involves using specific tags to define different types of elements. Let's break down the most common ones you'll need.

Adding Text

Photo by alleksana on Pexels

You'll use various tags to format text, from simple paragraphs to headings.

• Paragraphs: The <p> tag is for general blocks of text.
  html <p>This is a standard paragraph of text on your webpage.</p>
• Headings: Headings organize your content hierarchically, from <h1> (most important) down to <h6> (least important).
  html <h1>Main Page Title</h1> <h2>Section Subtitle</h2> <h3>Smaller Heading</h3>
• Line Breaks: The <br> tag forces a new line, useful for short poetic lines or addresses where a full paragraph break isn't needed. It's a self-closing tag (doesn't have a closing </br>).
  html <p>First line of text.<br>Second line of text.</p>
• Strong and Emphasis: Use <strong> for important text (usually bold) and <em> for emphasized text (usually italic).
  html <p>This is <strong>very important</strong> information. You should <em>really</em> pay attention.</p>

Embedding Images

Photo by Vitaly Gariev on Pexels

Images make your pages visually appealing. You use the <img> tag for this.

• The <img> tag is self-closing.

• It requires two main attributes:

  • src: Specifies the path to the image file (e.g., images/myphoto.jpg or a web URL).
  • alt: Provides alternative text for the image, crucial for accessibility (screen readers) and if the image fails to load.

  html <img src="images/sunset.jpg" alt="A beautiful sunset over the ocean.">
  * Optional Attributes: You can control an image's size using width and height attributes, specified in pixels.
  html <img src="images/logo.png" alt="Company Logo" width="150" height="75">

Creating Hyperlinks

Photo by Ann H on Pexels

Hyperlinks (or just "links") connect your page to other pages or resources. You use the <a> (anchor) tag for this.

• The <a> tag requires the href attribute, which specifies the destination URL.

• The text or image between the opening <a> and closing </a> tags becomes the clickable part.

  html <p>Visit our <a href="https://www.example.com">homepage</a> for more info.</p>
  * Linking to sections within the same page:
  1. Give the target element an id attribute.
  html <h2 id="section-about">About Us</h2>
  2. Link to it using # followed by the id in the href.
  html <a href="#section-about">Go to About Us</a>
  * Opening links in a new tab: Use the target="_blank" attribute.
  html <a href="https://www.external-site.com" target="_blank">External Link</a>

Here's how these elements fit together:

graph TD
    A[HTML Page Content] --> B{What kind of content?}
    B --> C{Text}
    B --> D{Image}
    B --> E{Link}

    C --> C1[<p> Paragraphs]
    C --> C2[<h1>-<h6> Headings]
    C --> C3[<br> Line Breaks]
    C --> C4[<strong>, <em> Emphasis]

    D --> D1[<img> tag]
    D1 --> D1a[src attribute (path)]
    D1 --> D1b[alt attribute (description)]
    D1 --> D1c[width/height (optional size)]

    E --> E1[<a> tag]
    E1 --> E1a[href attribute (destination URL)]
    E1 --> E1b[target="_blank" (new tab, optional)]
    E1 --> E1c[id for internal links]

3. Worked Example

Let's create a simple HTML file that includes a page title, a short paragraph, an image, and a link to another website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>

    <h1>Welcome to My Awesome Page!</h1>

    <p>This is a simple page demonstrating basic HTML content creation. We'll show you how to add text, an image, and a link.</p>

    <p>Here's a cool picture:</p>
    <img src="https://via.placeholder.com/300x200" alt="A placeholder image for demonstration" width="300" height="200">

    <p>Want to learn more about web development? Check out <a href="https://developer.mozilla.org/en-US/docs/Web" target="_blank">MDN Web Docs</a>!</p>

    <p>Don't forget to explore all the amazing things you can build with HTML, CSS, and JavaScript.</p>

</body>
</html>

When you open this file in a browser, you'll see a main title, two paragraphs (one with emphasis), a grey rectangular image, and a clickable link to MDN Web Docs that opens in a new tab.

4. Key Takeaways

• HTML tags like <p>, <h1>, <img>, and <a> define different types of content on a webpage.
• The <img> tag uses src for the image path and alt for descriptive alternative text.
• The <a> tag uses href to specify the link's destination.
• Attributes provide extra information about an HTML element, like src, alt, href, width, height, id, and target.
• Use <strong> for strong importance and <em> for emphasis within text.
• The target="_blank" attribute in an <a> tag opens the link in a new browser tab.

Common Mistakes to Avoid:
- Forgetting to close tags (e.g., <div> without </div>), which can break your layout.
- Not providing an alt attribute for images, harming accessibility.
- Incorrectly typing image paths in src, causing images not to appear.
- Using <br> for general spacing instead of proper CSS margins/padding or new paragraphs.

5. Now Try It

Open a text editor (like VS Code, Notepad++, or even Notepad), create a new file, and save it as my_content.html. Inside this file, create a webpage that includes:
1. A main heading (<h1>) with your name.
2. A paragraph (<p>) introducing yourself.
3. An image (<img>) of your favorite animal (you can use a placeholder image URL like https://via.placeholder.com/200x150 if you don't have one ready). Make sure it has an alt attribute.
4. A link (<a>) to a website related to your hobby, opening in a new tab.
5. A paragraph (<p>) with at least one word bolded using <strong>.

Success looks like: Opening my_content.html in your web browser and seeing your name, intro, a displayed image, a clickable link, and bold text, all laid out correctly.