Skip to content
← Back to Introduction to HTML & CSS

You are viewing a free preview of this lesson.

Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.

View PricingCreate Account

Introduction to HTML

Introduction to HTML

HTML — HyperText Markup Language — is the standard language used to create and structure content on the web. Every website you visit is built on a foundation of HTML. It is not a programming language; it is a markup language that tells the browser what content to display and how to organise it.

What Is HTML?

HTML uses elements (also called tags) to describe the structure of a web page. Each element wraps a piece of content and tells the browser what role that content plays — a heading, a paragraph, an image, a link, a list, and so on.

Concept Description
Element A building block of an HTML page (e.g., <p>, <h1>, <img>)
Tag The syntax that defines an element — an opening tag <p> and a closing tag </p>
Attribute Extra information on an element (e.g., class="intro", src="photo.jpg")
Content The text or nested elements between the opening and closing tags

Key fact: HTML was created by Tim Berners-Lee in 1991 as part of his vision for the World Wide Web. The current version, HTML5, was finalised in 2014 and continues to evolve through the WHATWG Living Standard.

A Brief History of HTML

  • 1991 — Tim Berners-Lee publishes the first HTML specification with 18 elements
  • 1995 — HTML 2.0 becomes the first standard specification (IETF)
  • 1997 — HTML 3.2 and then HTML 4.0 introduce tables, forms, and style sheets
  • 1999 — HTML 4.01 becomes the dominant standard for years
  • 2000 — XHTML 1.0 applies strict XML rules to HTML
  • 2014 — HTML5 is finalised by the W3C, adding semantic elements, audio, video, canvas, and more
  • Present — The WHATWG Living Standard keeps HTML evolving continuously

How the Browser Renders HTML

When you open a web page, the browser performs these steps:

  1. Fetches the HTML file from the server
  2. Parses the HTML into a tree structure called the DOM (Document Object Model)
  3. Fetches linked resources — CSS stylesheets, JavaScript files, images, fonts
  4. Renders the page by combining the DOM with CSS styles
  5. Paints the pixels on your screen
   HTML File
      │
      ▼
   Parser → DOM Tree
      │         │
      ▼         ▼
   CSS Styles  JavaScript
      │
      ▼
   Render Tree → Layout → Paint → Screen

Your First HTML Page

Create a file called index.html and open it in any text editor:

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

Save the file and double-click it to open it in your browser. You should see a heading and a paragraph.

Anatomy of an HTML Element

Every HTML element follows this pattern:

<tagname attribute="value">Content goes here</tagname>
Part Example Purpose
Opening tag <p> Marks the start of the element
Attribute class="intro" Provides extra information
Content Hello, World! The visible text or nested elements
Closing tag </p> Marks the end of the element

Void (Self-Closing) Elements

Some elements have no content and therefore no closing tag:

<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">

Essential HTML Tools

Tool Purpose
Text editor VS Code, Sublime Text, or any code editor
Web browser Chrome, Firefox, Edge, or Safari
Developer tools Press F12 to inspect HTML, CSS, and JavaScript
Live Server VS Code extension that auto-reloads the page when you save

Viewing the Source

You can view the HTML of any web page:

  1. Right-click on the page and select View Page Source to see the raw HTML
  2. Right-click on a specific element and select Inspect to see it in the developer tools
  3. In the developer tools, the Elements tab shows the live DOM tree

HTML Comments

Comments are invisible to users but useful for developers:

<!-- This is a comment -->
<!-- TODO: Add navigation bar -->

<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden.</p> -->

Summary

HTML is the foundational language of the web, using elements and attributes to structure content. Every web page is an HTML document that the browser parses into a DOM tree and renders on screen. You only need a text editor and a browser to start building web pages. In the next lesson, we will explore the structure of an HTML document in detail — the doctype, head, body, and metadata.

Subscribe to continue