HTML Basics

Lists & Tables

Links & Media

Forms & Layout

HTML Introduction

Introduction to HTML: The Building Blocks of the Web

What you'll learn

  • Understand the main ideas in HTML Introduction.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind HTML Introduction.

❮ Home Next ❯

Introduction to HTML: The Building Blocks of the Web

Here is a quick preview of what standard HTML looks like:

Try nesting elements yourself:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is my first paragraph of text!</p>
</body>
</html>

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. Think of it as the "skeleton" of every website you visit.

Even though HTML itself does not add color, motion, or interactivity, it defines the meaning of every piece of content on the page. When a browser reads your file, it looks for HTML tags like <p>, <h1>, and <img> and then decides how to show them.

Key Facts to Remember:

Why HTML matters

Every website you visit is built on HTML. If the structure is broken, the page may still load, but the content can be confusing or inaccessible. Clean HTML is essential for screen readers, SEO, and reliable layouts on modern devices.

1. The Anatomy of a Basic Webpage

Every HTML document follows a specific structural recipe. Here is what the code looks like:

Breakdown of the Structure:

  1. <!DOCTYPE html>: Tells the browser, "Hey, I'm using the latest version of HTML (HTML5)!"
  2. <html>: The container for everything on the page.
  3. <head>: The "brain" of the page. It holds hidden data like the title that appears on the browser tab.
  4. <body>: The "body" of the page. Everything you actually see (text, images, buttons) goes here.

2. Tags vs. Elements

While people often use these terms interchangeably, they are slightly different:

Term Definition Example
Tag The individual keywords inside brackets. <p> (Opening) or </p> (Closing)
Element The full package: Opening tag + Content + Closing tag. <p>Hello World!</p>

Try nesting elements yourself:

<div>
  <p>I am a paragraph <strong>nested</strong> inside a div!</p>
</div>

3. The "Power Trio": HTML, CSS, and JavaScript

Modern websites are built using three main layers. To understand how they interact, imagine building a car:

4. Enhancing Elements with Attributes

Attributes provide extra information about an HTML element. They always live inside the opening tag and usually look like name="value".

Example: <a href="https://www.google.com">Visit Google</a>

  • <a> is the tag for a link.
  • href is the attribute (it tells the link where to go).
  • "https://www.google.com" is the value.

5. How to Create Your First Page (Step-by-Step)

  1. Write: Type your HTML code into a simple text editor (like Notepad or VS Code).
  2. Save: Save the file with the extension .html (e.g., index.html).
  3. Open: Double-click the file. Your computer will automatically open it in your web browser (Chrome, Firefox, or Safari).
  4. Render: The browser reads your tags and turns them into a visual webpage!

Exercise

?

What does HTML stand for?

❮ Home Next ❯