Introduction to HTML

beginner

Part of Getting Started with HTML

Theory

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of web content using a system of tags and elements. Every website you visit — from simple blogs to complex applications like Gmail or YouTube — is built on HTML.

A Brief History of HTML

HTML was created by Tim Berners-Lee in 1991 while working at CERN. The first version had only 18 tags. Since then, HTML has evolved through several versions:

HTML 2.0 (1995) — the first standardized version
HTML 3.2 (1997) — added tables, applets, and text flow around images
HTML 4.01 (1999) — introduced CSS support, scripting, and improved accessibility
XHTML (2000) — a stricter, XML-based version of HTML
HTML5 (2014) — the current major version, adding native video/audio, canvas, semantic elements, and powerful APIs

HTML5 is now the living standard, continuously updated by the WHATWG (Web Hypertext Application Technology Working Group).

How the Web Works

When you type a URL into your browser, this sequence of events occurs:

Your browser sends an HTTP request to a server
The server processes the request and sends back an HTTP response containing HTML
The browser parses the HTML and constructs the DOM (Document Object Model)
The browser renders the page, applying CSS for styling and executing JavaScript for interactivity

The beauty of HTML is that it is platform-independent — it works on Windows, macOS, Linux, iOS, and Android equally.

HTML Tags and Elements

An HTML element is defined by a start tag, content, and an end tag:

<tagname>Content goes here...</tagname>

Some elements are self-closing (void elements) and don't have content or an end tag:

<img src="photo.jpg" alt="A photo" />

Elements can have attributes that provide additional information:

<a href="https://example.com" target="_blank">Click here</a>

Here, href and target are attributes of the <a> (anchor) element.

Basic HTML Document Structure

Every HTML document follows a standard structure:

The <!DOCTYPE html> declaration tells the browser this is an HTML5 document
The <html> element is the root of the page
The <head> element contains meta-information (title, character encoding, linked stylesheets)
The <body> element holds all visible content

Browsers and Editors

Modern browsers (Chrome, Firefox, Safari, Edge) all include Developer Tools (press F12) that let you inspect HTML, debug CSS, and test JavaScript in real time.

To write HTML, you can start with any text editor:

Beginner-friendly: VS Code, Sublime Text, Notepad++
Advanced: WebStorm, Vim, Emacs
Online: CodePen, JSFiddle, Replit

All HTML files use the .html file extension.

Practical Examples

Example: Basic HTML Document Structure

html

Example: HTML with Multiple Elements

html

Exercises

Create Your First HTML Page

easy

Create a complete HTML document with a title of 'My First Page', a main heading that says 'Hello, World!', and a paragraph introducing yourself.

Starter Code:

<!-- Write your code below -->

Expected Output:

A web page displaying 'My First Page' as the browser tab title, and 'Hello, World!' as a heading with a paragraph about yourself underneath.

Add Multiple Elements

easy

Extend your HTML page to include at least two subheadings (h2), three paragraphs, one image, and one link. Use placeholder content if needed.

Starter Code:

<!-- Build on your first page -->

Expected Output:

A page with a main heading, two sections each with subheadings and paragraphs, an image, and a clickable link.

Mini Quiz

Mini Project

Mini Project: My First Webpage

Create a complete personal introduction page that includes all the basic HTML elements you have learned: headings, paragraphs, images, and links.

Requirements:

Bonus Challenge

Add a horizontal rule (<hr>) between sections and use <br> to create line breaks within paragraphs.