HTML Elements

Headings

Welcome back! In the last lesson, you learned about the basic structure of an HTML document and built your very first web page. Now it is time to fill that page with real content. We are going to learn the most common HTML elements you will use every single day as a web developer.

Let us start with headings. Headings are like the titles and subtitles in a book or a newspaper. They break your content into sections and tell both the reader and the browser what each section is about.

HTML gives you six levels of headings, from <h1> (the biggest and most important) down to <h6> (the smallest). Here is what they all look like:

<h1>Heading Level 1 — Page Title</h1>
<h2>Heading Level 2 — Main Section</h2>
<h3>Heading Level 3 — Subsection</h3>
<h4>Heading Level 4 — Sub-subsection</h4>
<h5>Heading Level 5 — Minor Heading</h5>
<h6>Heading Level 6 — Smallest Heading</h6>

Click Run above to see all six heading levels rendered in the browser. Notice how each level gets progressively smaller.

Here are the important rules for using headings well:

• Use only one <h1> per page. Think of it as the main title of your page — like the headline of a newspaper article. Every page should have exactly one.
• Do not skip levels. After an <h1>, use <h2> for the next section, then <h3> for subsections within that. Jumping from <h1> straight to <h4> confuses both readers and search engines.
• Use headings for structure, not for size. If you want text to be bigger or bolder, that is a job for CSS (which we will learn in the next lesson). Headings should reflect the logical outline of your content.

Paragraphs and Line Breaks

The <p> tag is your bread and butter in HTML. It creates a paragraph — a block of text with some space above and below it. You already used it in Lesson 1, and you will use it constantly from now on.

<p>This is my first paragraph. The browser will display it as a block of text with some breathing room around it.</p>

<p>This is a second paragraph. Notice how the browser automatically adds space between paragraphs, making your content easier to read.</p>

One thing that surprises beginners: the browser ignores extra spaces and line breaks inside your HTML. Even if you press Enter ten times between two words in your code, the browser will display them right next to each other. This is called whitespace collapsing.

So how do you force a line break within a paragraph? You use the <br> tag. It is a self-closing tag (no closing tag needed) that simply says "start a new line right here."

<p>
  Roses are red,<br>
  Violets are blue,<br>
  HTML is awesome,<br>
  And so are you!
</p>

Links

Links are what make the web a web. They let you connect one page to another, creating the interconnected network of information we all use every day. Without links, every web page would be an island with no way to reach other pages.

You create a link with the <a> tag (the "a" stands for anchor). The key ingredient is the href attribute, which tells the browser where the link should go:

<p>Visit the <a href="https://www.lansing.org">City of Lansing</a> website to learn about our community.</p>

<p>You can also link to other pages on your own site: <a href="/lessons/web-basics/01-intro-to-html.html">go back to Lesson 1</a>.</p>

Let us break down how this works:

• <a> is the opening tag that starts the link.
• href="..." is an attribute — a piece of extra information attached to the tag. The href (short for "hypertext reference") tells the browser the URL or path to navigate to when someone clicks the link.
• The text between the opening and closing tags — like "City of Lansing" — is called the link text. This is what the user sees and clicks on.
• </a> closes the link.

You can also create links that jump to a specific section on the same page. These are called anchor links or same-page links. You give the target section an id attribute, and then link to it with a # symbol:

<!-- This link jumps to the section below -->
<p><a href="#my-hobbies">Jump to my hobbies</a></p>

<p>Here is some content in between...</p>
<p>More content here to create some space...</p>

<!-- This is the target section -->
<h2 id="my-hobbies">My Hobbies</h2>
<p>I enjoy hiking along the River Trail in Lansing!</p>

Images

A web page without images would be pretty plain. The <img> tag lets you display pictures, photos, diagrams, and any other visual content on your page.

The <img> tag is self-closing — it does not have a closing tag because it does not wrap around text content. Instead, it uses attributes to specify what image to show:

<img src="https://placehold.co/400x200" alt="A placeholder image showing the dimensions 400 by 200 pixels">

Here is what those attributes mean:

• src (source) — The URL or file path of the image you want to display. This is required. Without it, the browser has no idea what image to show.
• alt (alternative text) — A text description of the image. This is extremely important for several reasons:

1. Accessibility: People who use screen readers (software that reads web pages aloud) rely on alt text to understand what an image shows. Without it, they have no idea what the image is.
2. Broken images: If the image fails to load (bad internet connection, wrong file path), the browser shows the alt text instead so the user still knows what was supposed to be there.
3. Search engines: Search engines like Google cannot "see" images. They use the alt text to understand what an image is about, which can help your page appear in search results.

<img src="https://placehold.co/400x200" alt="A sample placeholder image">

<p>The image above is a placeholder. In a real website, you would use a path to an actual photo or graphic.</p>

Lists

Lists are everywhere on the web — navigation menus, recipes, to-do apps, product features, step-by-step instructions. HTML gives you two main types of lists:

Unordered Lists

An unordered list displays items with bullet points. Use it when the order of the items does not matter. You create one with <ul> (unordered list) and put each item inside an <li> (list item) tag:

<h3>Things I Love About Lansing</h3>
<ul>
  <li>The River Trail along the Grand River</li>
  <li>Michigan State University campus</li>
  <li>The farmers market downtown</li>
  <li>Impression 5 Science Center</li>
</ul>

Ordered Lists

An ordered list numbers the items automatically. Use it when the order does matter — like steps in a recipe or rankings. You create one with <ol> (ordered list):

<h3>How to Make a Web Page</h3>
<ol>
  <li>Open a text editor</li>
  <li>Write your HTML code</li>
  <li>Save the file with a .html extension</li>
  <li>Open the file in your web browser</li>
  <li>Celebrate your creation!</li>
</ol>

Nested Lists

You can put a list inside another list to create sub-items. This is called a nested list. To nest a list, place a new <ul> or <ol> inside an <li> element:

<h3>My Favorite Foods</h3>
<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Cherries (Michigan grown!)</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Sweet corn</li>
    </ul>
  </li>
  <li>Snacks
    <ul>
      <li>Better Made chips</li>
      <li>Mackinac Island fudge</li>
    </ul>
  </li>
</ul>

Nesting Elements

As you build more complex pages, you will constantly put elements inside other elements. This is called nesting, and getting it right is one of the most important skills in HTML.

Think of nesting like stacking boxes. A small box goes inside a bigger box, which goes inside an even bigger box. The rule is simple: the last element you open must be the first one you close.

Here is an example of correct nesting:

<p>I am learning <strong>HTML</strong> at Coders Farm.</p>

The <strong> tag opens inside the <p> and closes inside the <p>. Everything is tidy and contained.

Now here is incorrect nesting (do NOT do this):

<!-- WRONG! Do not do this -->
<p>I am learning <strong>HTML</p></strong>

See the problem? The <p> tag closes before the <strong> tag, even though <strong> was opened inside <p>. The tags are overlapping instead of nesting properly. Browsers will try to fix this for you, but the results can be unpredictable.

A good way to visualize proper nesting is through indentation. Each time you nest an element inside another, indent it with two spaces:

<ul>
  <li>
    <a href="https://www.lansing.org">
      <strong>City of Lansing</strong>
    </a>
  </li>
</ul>

With proper indentation, you can clearly see which elements are inside which. If the closing tags line up with their opening tags, your nesting is correct.

Interactive Exercise: Build a Personal Bio Page

Now it is time to put everything together! In the editor below, you are going to build a simple personal bio page using all the elements you just learned — headings, paragraphs, links, images, and lists.

We have given you some starter code with comments that guide you through what to add. Fill in the blanks, replace the placeholder text with your own information, and click Run to see your page come to life.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>About Me</title>
</head>
<body>

  <!-- Step 1: Add your name as a main heading -->
  <h1>Your Name Here</h1>

  <!-- Step 2: Write a paragraph about yourself -->
  <p>Hi! My name is [your name] and I live in Lansing, Michigan. I am learning to code at Coders Farm and I am excited to build my first web pages!</p>

  <!-- Step 3: Add a section heading for hobbies -->
  <h2>My Hobbies</h2>

  <!-- Step 4: Create an unordered list of hobbies -->
  <ul>
    <li>Reading books</li>
    <li>Hiking the River Trail</li>
    <li>Cooking new recipes</li>
    <!-- Add more hobbies here! -->
  </ul>

  <!-- Step 5: Add a paragraph with a link -->
  <h2>A Website I Like</h2>
  <p>One of my favorite websites is <a href="https://www.michigantrails.org">Michigan Trails</a> because I love exploring nature.</p>

  <!-- Bonus: Try adding an image! -->
  <img src="https://placehold.co/300x200" alt="A placeholder for my photo">

</body>
</html>

Fantastic work! If you completed the exercise above, you have just built a real web page that uses headings, paragraphs, lists, links, and an image. That is a big step forward from where you were just one lesson ago. Take a moment to feel good about that — you earned it.

Knowledge Check

Let us test what you learned. Give these questions a try — do not worry if you do not get them all right the first time. You can always scroll back up to review.

Lesson Summary

You covered a lot of ground in this lesson. Here is a quick recap of everything you learned:

• Headings (<h1> through <h6>) organize your content into sections. Use one <h1> per page and do not skip levels.
• Paragraphs (<p>) hold blocks of text. Use <br> for line breaks within a paragraph, but prefer separate <p> tags for distinct ideas.
• Links (<a href="...">) connect pages together. The href attribute specifies the destination, and the text between the tags is what the user clicks.
• Images (<img src="..." alt="...">) display visual content. Always include descriptive alt text for accessibility.
• Unordered lists (<ul>) display bullet points, and ordered lists (<ol>) display numbered items. Each item uses the <li> tag. Lists can be nested inside other lists.
• Proper nesting means closing elements in the opposite order from how you opened them. If it opens inside, it must close inside.

With these elements in your toolkit, you can already build meaningful, well-structured web pages. In the next lesson, we will learn CSS — the language that lets you add colors, fonts, spacing, and visual style to everything you have built so far. Your pages are about to get a whole lot more beautiful!