HTML Element Fundamentals

1. What We Are Learning

In this lesson, you will learn to recognize common HTML elements and their purpose. Specifically, we will focus on five essential tags:

• <h1>: The main heading.
• <p>: A paragraph of text.
• <div>: A generic container for grouping elements.
• <img>: An image.
• <a>: A link.

These are the absolute workhorses of the web. Almost everything you see on a page is made from some combination of these elements.

2. Why This Matters

As a designer, you instinctively think in terms of text, images, and grouped components. These HTML tags are the code-level equivalents of those concepts.

• h1 and p are your text blocks.
• img is your image frame.
• a is your interactive hotspot or link.
• div is your "Group" or "Frame" command in Figma.

When an AI generates code from your design, it will be a sea of these tags. Being able to read them allows you to verify the AI's work, give it better instructions ("Put the <img> and the <p> inside a <div>"), and understand why the layout looks the way it does. This is the core of code literacy.

3. Step-by-Step Instructions

Let's start by identifying these tags and understanding what they do.

Text Elements: Headings and Paragraphs (<h1>, <p>)

First, let's look at the most basic content: text. On the web, we primarily structure text using headings and paragraphs.

• <h1> (Heading 1): This is for the main, top-level heading on a page. Think of it as your display or headline 1 text style. While there are also <h2> through <h6> for subheadings, <h1> is the most important for page structure and search engines. Best practice is to use only one <h1> per page.
• <p> (Paragraph): This is for a standard block of text. Any time you have a sentence or a paragraph, you'll wrap it in <p> tags.

The Universal Container: The <div>

What if you want to group a heading and a paragraph together so you can style them as a single unit? In Figma, you'd select both and press Cmd+G to group them. In HTML, you use a <div>.

• <div> (Division): This is the most common tag on the web. It's a generic container with no inherent meaning. Its only job is to group other elements, creating the "boxes inside of boxes" structure of a webpage. You'll use <div>s to create sections, columns, cards, and any other layout component.

Media and Links: Images (<img>) and Anchors (<a>)

Webpages aren't just text. Let's see how to add images and links. These elements are a little different because they require extra information called attributes.

• <img> (Image): Used to embed an image.
  • src attribute: This tells the browser where to find the image file. It's the "source."
  • alt attribute: This provides a text description of the image. It's crucial for accessibility (screen readers for visually impaired users) and will be displayed if the image fails to load.

Now for links, which make the web a "web."

• <a> (Anchor): Used to create a hyperlink. The text you put between the opening <a> and closing </a> tags becomes the clickable link text.
  • href attribute: This stands for "hypertext reference" and tells the browser the destination URL of the link.

Bonus Concept: Block vs. Inline

Why do headings and paragraphs stack on top of each other, but links can sit right inside a line of text? It's because of their default display behavior.

Understanding this is key to understanding layout. When you look at your index.html page in the browser, you'll see your <h1> takes up the full width and the <p> starts on a new line below it. This is because they are block-level elements.

4. What Could Go Wrong

• Problem: My image is showing a broken icon.

  • Reason: The URL in your src attribute is likely incorrect or broken. Also, make sure the URL is wrapped in quotes, like src="http://...".
  • Solution: Double-check the image URL. In this situation, the alt text you provided will be displayed, which shows why it's so important!

• Problem: My link doesn't go anywhere when I click it.

  • Reason: You either forgot the href attribute, or the URL inside it is not valid.
  • Solution: Make sure you have href="..." with a full, valid web address inside the quotes (e.g., href="https://www.figma.com").

• Problem: All my text is jumbled together on the page.

  • Reason: You probably forgot a closing tag, like </p> or </h1>. When the browser doesn't see a closing tag, it gets confused about where one element ends and the next begins.
  • Solution: Scan your code. Every <p> needs a </p>, and every <h1> needs an </h1>. VS Code's color-coding can help you spot missing tags.

5. Mini Exercise

Time to apply what you've learned. Let's add these new elements to your index.html file.

1. Open your my-landing-page project in VS Code.

2. Inside the <body>, below your <h1>Hello World</h1> line, add the following elements one by one.

   a. Add a paragraph:

   <p>I am a product designer learning to build for the web.</p>
   

   b. Add a link:

   <a href="https://www.figma.com">This is my favorite design tool.</a>
   

   c. Add an image: We'll use a placeholder service for now.

   <img src="https://via.placeholder.com/200x100" alt="A 200 by 100 pixel placeholder image">
   

   d. (Optional) Group them in a <div>: To practice, try wrapping the new paragraph, link, and image inside a <div>.

   <div>
       <p>I am a product designer learning to build for the web.</p>
       <a href="https://www.figma.com">This is my favorite design tool.</a>
       <img src="https://via.placeholder.com/200x100" alt="A 200 by 100 pixel placeholder image">
   </div>
   

3. Save your index.html file (Cmd+S or Ctrl+S).

4. Look at your browser window where Live Server is running. You should see your new paragraph, link, and image appear below the heading. Notice how they stack vertically because p and img (by default in this context) behave like block-level elements.

6. Checklist Before Moving Ahead

• I can identify an <h1> tag and explain that it's for a main page title.
• I can identify a <p> tag and explain that it's for a paragraph of text.
• I can identify a <div> tag and explain its purpose as a generic container, similar to a "group" in Figma.
• I can identify an <img> tag and explain the purpose of its src and alt attributes.
• I can identify an <a> tag and explain the purpose of its href attribute.
• I successfully added a paragraph, link, and image to my index.html page.

Excellent work. You can now read and understand the most fundamental building blocks of a webpage. This vocabulary is the foundation for everything that follows.

A Look Ahead: Now that you know about generic containers (<div>), the next lesson will introduce semantic HTML. We'll learn about more descriptive container tags like <header>, <section>, and <footer>. These give more meaning to our content, which is great for accessibility and search engines, and helps us write cleaner, more understandable code.