Chapter 1: Introduction to HTML

Welcome to the building block of the web! HTML, or HyperText Markup Language, is the standard language for creating the structure of web pages. Unlike the programming languages we have covered so far, HTML is a markup language; it uses tags to annotate text, images, and other content to tell a web browser how to display them.

Why Learn HTML?

Every website you visit—from simple blogs to complex social networks—uses HTML. It is the skeletal structure upon which all web development is built. By learning HTML, you gain the ability to create your own digital footprint, showcase your projects, and eventually integrate advanced features using CSS and JavaScript.

The Anatomy of an HTML Document

An HTML file is composed of nested elements defined by tags, which usually come in pairs: an opening tag and a closing tag.

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, Web!</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

Key Concepts

Tags: Everything in HTML is enclosed in angle brackets, like <p> for paragraphs or <h1> for headings.
Attributes: Tags can have attributes that provide additional information (e.g., <a href="url">).
Elements: An element consists of an opening tag, the content, and a closing tag.

Crucial Concepts

HTML is not a programming language; it doesn't have logic, loops, or variables like Python or Java. Instead, it defines the content. Understanding the difference between content (HTML), presentation (CSS), and behavior (JavaScript) is essential for any web developer.

Try It Yourself

Create a new file named index.html.
Write a basic HTML structure and include a heading and a paragraph.
Open your file in any web browser to see your creation.

Understanding the Document Structure

Every HTML page starts with a <!DOCTYPE html> declaration, which tells the browser to use modern HTML5 rules. Inside the <html> tag, the page splits into two parts: the <head>, which holds metadata like the page title and linked stylesheets (invisible to visitors), and the <body>, which holds everything the visitor actually sees.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

What Are HTML Tags?

Tags are the building blocks of HTML. Most come in pairs — an opening tag like <p> and a closing tag like </p> — with your content in between. Some, like <img> and <br>, are "self-closing" and don't wrap around anything.

A Note on Indentation

HTML doesn't require indentation to work, but consistently indenting nested tags makes your code far easier to read and debug as pages grow larger. Most code editors, including VS Code, will auto-indent for you as you type.

Back to Course Next Chapter