HTML Tutorial by EezyTutorials

HTML - Introduction

Back to top ↑

Overview

Estimated time: 25–35 minutes

HTML (HyperText Markup Language) defines the structure and meaning of content on the web. Every page you visit is an HTML document (often enhanced with CSS and JavaScript). In this course, you’ll master HTML from the ground up, with many small, runnable examples and exercises.

Learning Objectives

  • Explain what HTML is and how it differs from CSS and JavaScript.
  • Identify the parts of an HTML document (doctype, html, head, body).
  • Understand elements, attributes, and the DOM tree.
  • Preview core topics: text, links, images, lists, tables, forms, media, semantics, accessibility, and browser APIs.

Prerequisites

  • None. Start here.

Your first page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My first page</title>
</head>
<body>
  <h1>Hello, HTML!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Try it

How browsers use HTML

  • Parse HTML into a DOM tree (Document Object Model).
  • Apply CSS to compute layout and paint.
  • Run JavaScript to handle behavior and dynamic changes.

Key concepts

Elements and attributes

<a href='/about' title="About us">About</a>
<img src="/logo.png" alt="Site logo" width="160">

An element is a tag pair with content. An attribute adds extra info (e.g., href on links, alt on images).

Semantic HTML

<header>...</header>
<main>...</main>
<footer>...</footer>

Semantic elements add meaning, which improves accessibility and SEO.

Multiple examples

<p>Plain paragraph</p>
<p title="tooltip">Paragraph with a title attribute</p>
<a href='#contact'>Jump to Contact</a>
<img src="/images/hero.jpg" alt="A mountain range at sunrise" width="320">

Common Pitfalls

  • Forgetting lang on <html> and meta viewport for mobile.
  • Missing alt on images (accessibility and SEO issue).
  • Using <div> everywhere instead of semantic elements.

Checks for Understanding

  1. Is HTML a programming language? What is its role?
  2. Which element contains metadata? Which contains visible content?
Show answers
  1. No—HTML is a markup language that structures content.
  2. Metadata goes in <head>; visible content goes in <body>.

Exercises

  1. Create a minimal HTML page with your name in an <h1> and a short bio in a <p>.
  2. Add a link to your favorite website and an image with descriptive alt text.

Tip: View the Study Index for a structured learning path.

Next: HTML - Editors & Setup »