What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. HTML uses a system of elements represented by tags to define headings, paragraphs, links, images, forms and other content. Every page you visit in a browser is built on HTML — it is the skeleton of the web.

History

HTML was created by Tim Berners-Lee in 1991 as a way to share documents over the emerging World Wide Web. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. Since then HTML has gone through several major versions: HTML 2.0 (1995), HTML 4.01 (1999), XHTML (2000), and finally HTML5, which was standardized by the W3C and WHATWG in 2014 and remains the current living standard.

Basic Syntax

An HTML document is made up of nested elements. Each element consists of an opening tag, content, and a closing tag. Some elements are self-closing (void elements) and do not require a closing tag. Tags can carry attributes that provide additional information or behaviour.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a <a href="https://example.com">link</a>.</p>
    <img src="photo.jpg" alt="A photo" />
  </body>
</html>

Core Concepts

• DOCTYPE — <!DOCTYPE html> tells the browser this is an HTML5 document. Always the first line.
• Element — The basic building block: an opening tag, content, and a closing tag. Example: <p>Hello</p>
• Void element — Self-closing elements with no content: <img>, <br>, <input>, <meta>, <link>
• Attribute — Extra information inside an opening tag: <a href="/page">, <img alt="description">
• Nesting — Elements must be properly nested; a child element must be closed before its parent
• Head — Contains metadata: title, character set, viewport, CSS links, scripts
• Body — Contains all visible page content

Semantic HTML5 Elements

HTML5 introduced semantic elements that describe meaning, not just appearance. They help browsers, search engines and assistive technologies understand your content:

• <header> — Introductory content or navigation for a page or section
• <nav> — A set of navigation links
• <main> — The dominant content of the document (only one per page)
• <section> — A thematic grouping of content with a heading
• <article> — A self-contained piece of content (blog post, news item)
• <aside> — Content tangentially related to the main content (sidebar)
• <footer> — Footer for a page or section
• <figure> / <figcaption> — An image or diagram with an optional caption

Common Tags Reference

• Headings — <h1> through <h6> — use only one <h1> per page
• Paragraph — <p>
• Link — <a href="url">text</a>
• Image — <img src="url" alt="description">
• Lists — <ul> (unordered), <ol> (ordered), items with <li>
• Table — <table>, <tr>, <th>, <td>
• Form — <form>, <input>, <textarea>, <button>, <select>
• Division / Span — <div> (block), <span> (inline) — generic containers
• Bold / Italic — <strong> (important), <em> (emphasis)
• Code — <code> (inline), <pre> (preformatted block)

HTML vs CSS vs JavaScript

The three core technologies of the web each have a distinct role:

• HTML — Structure and content. Defines what is on the page.
• CSS — Presentation. Controls colors, fonts, layout and spacing.
• JavaScript — Behaviour. Adds interactivity, animations and dynamic updates.

A web page without CSS is plain but readable. A web page without JavaScript still displays content. But a web page without HTML has nothing to show.

Accessibility Basics

• Always add alt attributes to images — screen readers use them
• Use semantic elements instead of generic <div> everywhere
• Label form inputs with <label for="id">
• Ensure headings follow a logical hierarchy (h1 → h2 → h3)
• Use sufficient colour contrast between text and background

Rules to Remember

• Always include <!DOCTYPE html> as the first line
• HTML is case-insensitive but lowercase tags are conventional
• Attribute values should always be quoted
• Void elements (<img>, <br>, <input>) do not have closing tags
• Nest elements correctly — never overlap tags
• Use lang attribute on <html> for accessibility and SEO

HTML Document Structure

Every HTML document follows a standard structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Page Title</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

The <!DOCTYPE html> declaration tells the browser this is an HTML5 document. The <head> section contains metadata not visible on the page, while the <body> contains all visible content.

HTML Attributes

Attributes provide additional information about an element and are always written in the opening tag:

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

Common attributes include id (unique identifier), class (CSS class name), src (source URL for images and scripts), alt (alternative text for images) and style (inline CSS).