Embedding Content in HTML

Weaving the Web with Hyperlinks

The hyperlink, or anchor tag <a>, is what makes the web a web. It connects your page to other pages, either on your own site or across the internet.

The most critical part of a link is its href attribute, which stands for "hypertext reference." This tells the browser where to go when the link is clicked.

A great way to get familiar with the syntax and its most important features is to read through the W3Schools guide on HTML Links.

As you can see, the anchor tag is versatile. You can link to external resources or build out the navigation for a multi-page website, a fundamental task for any project.

Displaying Visuals with Images

Images are vital for bringing a design to life. In HTML, we use the <img> tag to embed them. Unlike the tags we've seen so far, <img> is a "self-closing" or "empty" element—it doesn't have a closing tag because it doesn't wrap around content. Instead, it uses attributes to define what image to show.

The two most important attributes are:

• src (source): The path to the image file. This works just like the href in a link and can be an absolute or relative URL.
• alt (alternative text): A text description of the image. This is not optional. For your "User & Product Thinking" skill, the alt attribute is crucial. It ensures your content is accessible to users with screen readers and is also displayed if the image fails to load.

Let's watch a short, practical video that demonstrates how to add both images and hyperlinks, and even how to combine them.

Organizing Content with Lists

Lists are perfect for grouping related items, such as navigation links, product features, or step-by-step instructions. HTML provides three types of lists, each with a specific semantic purpose.

1. Unordered List <ul>: A bulleted list. Use this when the order of items doesn't matter. The items themselves are defined with the <li> (list item) tag. This is the standard for navigation bars.
2. Ordered List <ol>: A numbered list. Use this when the sequence of items is important, like in a recipe or a "Top 10" list. It also uses <li> for its items.
3. Description List <dl>: A list of terms and their descriptions. This is great for glossaries or metadata. It uses <dt> (description term) for the term and <dd> (description details) for its definition.

The following resource gives a great overview of all three.

Your Turn: Flesh Out Your Portfolio Skeleton

It's time to apply these concepts. In the last lesson, you created a semantic skeleton for your portfolio page. Now, let's add some content to it.

Here is the skeleton we created:

<header>
  <nav>
    <!-- Navigation goes here -->
  </nav>
</header>

<main>
  <section>
    <!-- "About Me" section -->
  </section>

  <section>
    <!-- "Projects" section -->
  </section>
</main>

<footer>
  <!-- Footer links go here -->
</footer>

Task: In a text editor or right here, modify this skeleton to include the following:

1. In the <nav>: Add an unordered list (<ul>) containing three list items (<li>). Each item should contain a hyperlink (<a>) for "Home", "Projects", and "Contact". For now, you can use "#" as a placeholder for the href attribute (e.g., <a href="#">Home</a>).
2. In the "About Me" <section>: Add an <img> tag for a profile picture. You don't need a real image file; you can use a placeholder src like "profile.jpg". Crucially, provide meaningful alt text, such as "A headshot of [Your Name]".
3. In the "Projects" <section>: Add a heading for a specific project. Below it, use a description list (<dl>) to detail your contributions. Include at least two term/description pairs, such as:
   • Term (<dt>): Role
   • Description (<dd>): UI/UX Designer
   • Term (<dt>): Tools
   • Description (<dd>): Figma, Adobe Illustrator

Take your time to write out the code. When you're ready, compare your work to the solution below.

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>About Me</h2>
    <img src="profile.jpg" alt="A headshot of Ahmed, smiling.">
    <!-- More bio text could go here -->
  </section>

  <section>
    <h2>Project: Fintech App Redesign</h2>
    <dl>
      <dt>Role</dt>
      <dd>Lead UI/UX Designer</dd>
      <dt>Tools</dt>
      <dd>Figma, Adobe Illustrator, Runway</dd>
    </dl>
  </section>
</main>

<footer>
  <!-- You could add another <ul> here for social media links! -->
</footer>

Conclusion

You've now learned how to add the fundamental content building blocks to a webpage. By combining the structural elements from our previous lesson with the links, images, and lists from this one, you are well on your way to converting a complete design into a static but well-structured HTML document.

Key Takeaways:

• Hyperlinks (<a>): Use the href attribute to define the destination and the target="_blank" attribute to open links in a new tab for a better user experience.
• Images (<img>): Use the src attribute for the image path and always include a descriptive alt attribute for accessibility.
• Clickable Images: Nest an <img> tag inside an <a> tag to create an image that functions as a link.
• Lists (<ul>, <ol>, <dl>): Choose the list type that semantically matches your content's purpose—unordered for non-sequential items, ordered for sequential steps, and description for key-value pairs.

In the next lesson, we'll move from displaying content to collecting it. You will learn how to build HTML forms with inputs, dropdowns, and buttons—the primary way users interact with and submit data on the web.