LESSON 1.3

HTML Tag Preview

A first look at the building blocks of every webpage

Get your first look at how HTML tags work and create your first web page.

💡 The Concept

HTML tags for beginners might look unfamiliar at first, but they follow a consistent pattern that quickly becomes second nature. Have you ever wondered what it actually takes to build a web page from scratch? The good news is you don’t need any special software, a computer science degree, or years of experience. In fact, you can create your very first web page in just a few minutes with nothing more than a basic understanding of HTML. Let’s roll up our sleeves and write some real code.

📌 Note: This is a preview lesson — we’re just trying out a few HTML tags to get a feel for how they work. You won’t see <!DOCTYPE html> or the full HTML page structure here yet. That all comes in an upcoming lesson where we build a complete page from scratch.

Understanding HTML Tags

HTML works by wrapping your content in tags. Tags are special keywords surrounded by angle brackets (< and >) that tell the browser what to do with the text inside them. Most tags come in pairs: an opening tag and a closing tag.

graphic explaining HTML opening and closing tags.

Here’s what basic HTML markup looks like:

<p>This is a short paragraph.</p>
<p>This is a longer paragraph. HTML paragraphs can contain as much text as you need. The browser automatically wraps the text to fit the width of the screen, and adds a little extra space above and below each paragraph.</p>
<h1>This is the largest heading.</h1>
<h6>This is the smallest heading.</h6>
<b>This is bold text</b>

Take a moment right now to locate the angle brackets (< and >) and the forward slash (/) on your keyboard. You’ll be using them constantly.

The pattern is simple: you place the opening tag before the content you want to mark up, and the closing tag (with the forward slash) after it. That’s the core concept of HTML. Once you grasp it, everything else builds on top of it.

Heading Tags: Organizing Your Content

HTML gives you six levels of headings, from <h1> (the largest and most important) down to <h6> (the smallest). Think of them like an outline for your page.

Here’s how headings are typically used on a real web page:

  • <h1>: The main title or brand name of the page (use only one per page)
  • <h2>: Major section headings
  • <h3>: Sub-headings within those sections
  • <h4>, <h5>, <h6>: Rarely used on most websites, but available when you need deeper levels of organization

While the heading level you choose does change the default font size, the real purpose of headings is to show the structure and organization of your page, much like an outline for an essay. The image below shows you relative default sizes of the headings.

Heading Tags, h1 to h6 showing the relative default sizes in the browser.

Paragraphs, Bold Text, and Horizontal Rules

Beyond headings, here are three essential tags you’ll use all the time:

The Paragraph Tag: <p>

Wrap any block of text in <p></p> tags to create a paragraph. The browser will automatically add spacing above and below it.

The Bold Tag: <b>

Want to emphasize a word or phrase? Wrap it in <b></b> tags to make it bold.

The Horizontal Rule: <hr>

The <hr> tag draws a horizontal line across the page. It’s a nice way to visually separate sections. Note that <hr> is a special self-closing tag; it doesn’t have a closing tag because it doesn’t wrap around any content.

🎬 Video Demonstration

This video demonstrates making a simple web page in JSFiddle using the HTML you just learned.

Exercise: Try It Yourself

Try It Yourself with JSFiddle

You don’t need to install anything to start writing HTML right now. JSFiddle.net is a free online tool that lets you write HTML, CSS, and JavaScript in your browser and instantly see the results.

Here’s a quick exercise to try:

  1. Go to JSFiddle.net.
  2. Copy the text below into the HTML panel.
  3. Add <h1> tags around the title and <h2> tags around the subtitle.
  4. Add <p> tags around the long paragraph.
  5. Insert an <hr> tag after the long paragraph. That draws a line.
  6. Add <small> tags around the Wikipedia text. This is a footer for the web page.
  7. Click “Run” and see your web page appear.

Here is the text with markup for this exercise:

Minnesota Summers

An article about the beauty of the lakes

The state's nickname, the "Land of 10,000 Lakes", is apt, as there are 11,842 Minnesota lakes over 10 acres in size. The Minnesota portion of Lake Superior is the largest at 962,700 acres and deepest body of water in the state. Minnesota has 6,564 natural rivers and streams that cumulatively flow for 69,000 miles Approximately 10.6 million acres of wetlands are contained within Minnesota's borders, the most of any state except Alaska. 

Wikipedia: https://en.wikipedia.org/wiki/Minnesota

Check your code and result against the screenshot below:

What a simple website looks like in JSFiddle with HTML only.
JSFiddle lets you write HTML and see the results instantly. No setup required.

 What You’ve Learned

Let’s recap what you now know how to do:

  • Write HTML using opening and closing tags
  • Use heading tags (<h1> through <h6>) to structure your page
  • Create paragraphs with <p>
  • Make text bold with <b>
  • Add horizontal lines with <hr>
  • Use JSFiddle or a text editor to build and preview web pages
  • Peek behind the curtain of any website with Chrome Developer Tools

You’ve just taken the most important step in learning web development: you’ve written actual code and made it work. Everything from here builds on these fundamentals. Next, you’ll deepen your HTML knowledge, then add CSS to make your pages beautiful, and eventually bring them to life with JavaScript. The path ahead is exciting, and you’re already on it. Keep experimenting, keep building, and don’t be afraid to break things. That’s how every great developer learns!

❓ Frequently Asked Questions

Why does the hr tag not have a closing tag when almost every other tag does?

Because it does not wrap around content — it just inserts something. Tags like img, br, and input work the same way. They are called void or self-closing elements. The rule is: if a tag has content between it and a closing tag, it needs both. If it just places something on the page by itself, it does not need a closing tag.

Does it matter which heading level I use, or is it just about font size?

It matters a lot — but not for the reason beginners expect. Heading levels communicate structure, not just size. Search engines use them to understand what your page is about, and screen readers use them to help users navigate. Using h1 for your main title, h2 for major sections, and so on keeps your page both accessible and SEO-friendly. You can always change the font size with CSS.

Do I need to memorize all the HTML tags before I can build anything?

No. Working developers look up tags all the time — that is completely normal. You only need a handful to build your first real page: headings, paragraphs, links, images, and lists. The rest you pick up as you need them. The goal right now is to understand the pattern (opening tag, content, closing tag) — the specific tags come naturally with practice.

★ Key Takeaways

HTML is made up of tags that tell the browser how to display your content. This lesson gave you a first look at common tags like headings, paragraphs, bold, and lists. Next up is the Web Developer Workflow, where you will learn how to set up your text editor and browser side by side. That setup is how you will work through every project in this course.

Next Lesson: The Web Developer Workflow: Text Editor and Browser

← Back to Introduction to Web Development Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons