Lesson 1Beginner 3 min read

Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every website you visit — from Google to YouTube to this one — is built on HTML.

Think of HTML as the skeleton of a web page. It defines what's on the page: headings, paragraphs, images, links, buttons, and forms. It does not control how things look (that's CSS) or how things behave (that's JavaScript).

How HTML works

An HTML file is just a text file with a .html extension. Your browser reads this file and renders it as a visual web page.

Here's the simplest possible HTML page:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Let's break this down:

<!DOCTYPE html> tells the browser this is an HTML5 document.
<html> wraps everything on the page.
<head> contains metadata (title, character set, links to CSS files).
<body> contains everything visible on the page.
<h1> is a top-level heading. <p> is a paragraph.

Try it yourself

Open any text editor (VS Code, Notepad, etc.).
Paste the code above and save the file as index.html.
Double-click the file — it will open in your browser.

That's it. You just made a web page.

Tags, attributes, and nesting

HTML uses tags to mark up content. Most tags come in pairs — an opening tag and a closing tag — with content in between:

HTML

<p>This is a paragraph.</p>

Some tags are void elements (self-closing) and have no closing tag, such as <img>, <br>, and <meta>.

Attributes add extra information to a tag. They go inside the opening tag as name="value" pairs:

HTML

<a href="https://example.com" title="Example site">Visit Example</a>
<img src="logo.png" alt="Site logo" width="120" />

Common attributes you'll see everywhere:

id — a unique identifier for one element on the page (used for links and JavaScript).
class — a reusable label for styling with CSS.
href — the destination URL on links.
src — the file path on images and scripts.
alt — a text description of an image for accessibility.

Elements can be nested inside other elements. The rule is simple: close inner tags before outer tags, like stacking boxes.

How HTML fits with CSS and JavaScript

HTML alone produces a plain, unstyled page. In real projects you almost always combine three layers:

HTML — structure and meaning (headings, paragraphs, forms, navigation).
CSS — presentation (colors, fonts, spacing, responsive layout).
JavaScript — behavior (form validation, menus, fetching data, updating the page without a full reload).

None of these replace the others. A beautiful design still needs semantic HTML underneath. A dynamic app still needs HTML for the DOM tree JavaScript manipulates.

Validating your markup

Browsers are forgiving — they will try to render broken HTML. For learning and production, it's worth checking your work:

Use the browser DevTools (right-click → Inspect) to see how the browser parsed your page.
Run your HTML through the

[

W3C Markup Validation Service](https://validator.w3.org/) to catch unclosed tags or invalid nesting.

Keep one <main> landmark per page and use heading levels in order (h1 then h2, not h1 then h4) for accessibility.

What you'll learn in this track

This HTML track walks from absolute basics to advanced topics: forms, semantic structure, tables, accessibility, HTML5 APIs, and production best practices. Each lesson builds on the last, so work through them in order when you're starting out.

Key takeaway

HTML is not a programming language — it's a markup language. You use it to describe the structure and meaning of content. Once you're comfortable with HTML, you'll add CSS for styling and JavaScript for interactivity.