HTML Notes
Understand what HTML is, how it works, how browsers parse and render HTML, the history of HTML to HTML5, and write your very first webpage from scratch.
HTML — HyperText Markup Language — is the foundation of every webpage on the internet. It is not a programming language. It does not have variables, loops, or functions. Instead, it is a markup language: a way of annotating text to give it structure and meaning.
When you open any website and right-click → "View Page Source", what you see is HTML. The browser reads that HTML document, interprets the tags, and renders the visual page you interact with.
How HTML Works
Tags and Elements
HTML uses tags to mark up content. A tag is a keyword wrapped in angle brackets:
<tagname>content goes here</tagname>Most elements have an opening tag and a closing tag (with a /):
<h1>My First Heading</h1>
<p>This is a paragraph of text.</p>
<strong>This text is bold.</strong>Some elements are self-closing — they have no content and no closing tag:
<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">Attributes
Tags can carry attributes — extra information that modifies the element:
<a href="https://google.com" target="_blank">Visit Google</a>
<img src="logo.png" alt="Company logo" width="200">
<input type="email" placeholder="Enter your email" required>Attributes go inside the opening tag: attributeName="value".
Your First HTML Page
A minimal valid HTML5 document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>Let's break down every line:
| Line | What it does |
|---|---|
<!DOCTYPE html> | Tells the browser: "this is an HTML5 document" |
<html lang="en"> | Root element. lang="en" helps screen readers and search engines |
<head> | Contains metadata — not visible on the page |
<meta charset="UTF-8"> | Sets character encoding — allows all languages and symbols |
<meta name="viewport" ...> | Makes the page responsive on mobile devices |
<title> | Text shown in the browser tab |
</head> | Closes the head section |
<body> | Everything visible on the page goes here |
<h1> | Top-level heading |
<p> | Paragraph of text |
</body>, </html> | Close the body and html elements |
How Browsers Render HTML
When you type a URL in your browser, this is what happens:
- DNS Lookup — URL is resolved to a server IP address
- HTTP Request — Browser requests the HTML file from the server
- Parsing — Browser reads the HTML top-to-bottom, building the DOM (Document Object Model)
- Resource Fetching — Browser discovers and fetches linked CSS, JS, images
- Render Tree — DOM + CSS styles combined into a render tree
- Layout — Browser calculates positions and sizes of every element
- Painting — Pixels are drawn to the screen
The DOM is a tree representation of your HTML. Every HTML element becomes a node in this tree:
JavaScript manipulates this tree — that is how dynamic pages work.
A Brief History of HTML
| Version | Year | Key Addition |
|---|---|---|
| HTML 1.0 | 1991 | Created by Tim Berners-Lee at CERN |
| HTML 2.0 | 1995 | First formal specification, forms added |
| HTML 3.2 | 1997 | Tables, scripting support |
| HTML 4.01 | 1999 | CSS separation, accessibility improvements |
| XHTML 1.0 | 2000 | HTML with strict XML syntax rules |
| HTML5 | 2014 | Semantic elements, audio/video, canvas, APIs |
| HTML Living Standard | Present | Continuously updated by WHATWG |
HTML5 was a major leap — it introduced semantic elements (<article>, <section>, <nav>), native multimedia (<audio>, <video>), the <canvas> drawing API, web storage, geolocation, and much more.
HTML vs XHTML vs HTML5
HTML 4 was lenient — unclosed tags and missing attributes were tolerated.
XHTML tried to enforce XML strictness — every tag must be closed, attributes must be quoted, everything lowercase. This proved too rigid for practical web development.
HTML5 took a pragmatic middle ground: cleaner syntax, semantic meaning, backward compatibility, and rich new APIs — without forcing XML strictness.
The Role of HTML in SEO
Search engines read your HTML to understand your page. They look at:
<title>— the page title shown in search results<meta name="description">— the search result snippet<h1>through<h6>— topic hierarchy and keywords<a href>— internal and external links for crawlingaltattributes on images — image context for indexing- Semantic elements (
<article>,<main>) — content significance
Writing proper HTML is not just about making things display correctly — it directly affects how well your pages rank in search.
Validating HTML
The W3C provides a free validator: validator.w3.org. It checks your HTML for errors like:
- Unclosed tags
- Missing required attributes
- Incorrect nesting
- Deprecated elements
Always validate important pages before deploying. Clean HTML is:
- More predictable across browsers
- More accessible to screen readers
- Better for SEO
Summary
- HTML is a markup language for structuring web content — not a programming language
- It uses tags (
<tagname>) to wrap content and give it meaning - Every HTML document starts with
<!DOCTYPE html>and has<html>,<head>, and<body> - Browsers parse HTML into a DOM tree, then render it visually
- HTML5 is the current standard, adding semantic elements, multimedia support, and JavaScript APIs
- Good HTML improves SEO, accessibility, and cross-browser compatibility
*Next: HTML Document Structure*
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for What is HTML? — The Language of the Web.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this HTML Complete Guide topic.
Search Terms
html-complete-guide, html complete guide, html, complete, guide, introduction, what, what is html? — the language of the web
Related HTML Complete Guide Topics