HTML Introduction
HTML is the skeleton of the web. Without HTML, there would be no internet as we know it.
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It is not a programming language, but a markup language — it uses tags to tell the browser how to display content.
Every web page you see, from simple blogs to complex e-commerce platforms, is built with HTML underneath. HTML defines the structure of a page: headings, paragraphs, images, links, tables... everything's "skeleton" is created by HTML.
💡 Easy analogy:
Think of a web page as a house. HTML is the structural framework (walls, doors, windows), CSS is the decoration (colors, style), and JavaScript is the electrical and plumbing system (interactive features).
A Simple HTML Document
Every HTML document is made up of a series of tags. Below is the most basic HTML document structure:
Example
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Code Breakdown
<!DOCTYPE html>— Document type declaration, tells the browser this is an HTML5 document<html>— Root element of the HTML document, everything goes inside this tag<head>— Document header area, contains metadata (title, encoding, etc.)<title>— Defines the page title shown in the browser tab<body>— Document body area, all visible content goes here<h1>— Level 1 heading, usually the largest text on the page<p>— Paragraph tag, used to wrap a block of text
HTML Tag Syntax
HTML tags usually come in pairs: an opening tag and a closing tag:
HTML
<tagname>Content goes here</tagname>
- Opening tag:
<tagname>— angle brackets wrapping the tag name - Closing tag:
</tagname>— same as opening but with a forward slash - Content: The text or other tags between the opening and closing tags
A few tags have no content and are called void tags. Examples include the line break tag <br> and the horizontal rule tag <hr>.
✅ Best Practice:
Always write tag names in lowercase. Although
<TAGNAME> works technically, lowercase is more standard and readable.
HTML Attributes
Tags can have attributes to provide additional information. Attributes are written in the opening tag using the format name="value":
HTML
<a href="https://www.example.com">This is a link</a>
<img src="/assets/images/tutorials/html-example-photo.webp" alt="A sample photo">
href— The destination URL of a linksrc— The file path of an imagealt— Alternative text when the image cannot load (important for accessibility)
⚠️ Note:
Attribute values need to be wrapped in quotes. Double quotes
" " are recommended for consistency.
HTML Versions
HTML has gone through multiple versions since its inception. We currently use HTML5, the latest standard. HTML5 introduced many new features:
- Semantic tags (
<header>,<nav>,<article>, etc.) - Native audio and video support (
<audio>,<video>) - Canvas drawing API
- Local storage (localStorage)
- Responsive image support
📌 Rest assured:
This tutorial is entirely based on the HTML5 standard. Every concept you learn is current and ready to use.
Development Tools
You only need two things to write HTML:
- A text editor — VS Code (free, lightweight), Sublime Text, or Notepad++
- A browser — Chrome, Edge, or Firefox all work Write code in your editor, save it as a
.htmlfile, then open it with your browser — it's that simple.
🚀 Try it yourself:
Open your text editor, copy the sample code above, save it as myfirst.html, then double-click to open it in your browser — you've just created your first web page!
❓ FAQ
Q How is HTML different from programming languages? Why isn't HTML considered a programming language?
A Programming languages like Python and Java have variables, loops, and conditional logic — they can perform calculations and make decisions. HTML simply describes page structure using tags. It has no logic, no calculations, no ability to change its own behavior. In short: programming languages do things, HTML describes things.
Q Do I need any prerequisites to learn HTML? Can I learn it without knowing English?
A HTML is the easiest entry point into programming — no prerequisites needed. Poor English won't hold you back. HTML tags use just a few dozen common words (like
p for paragraph, h for heading), and you'll memorize them through practice. What matters most is understanding tag semantics and nesting logic, not English proficiency.Q Why must
<!DOCTYPE html> be on the first line? What happens if I leave it out?A Without DOCTYPE, browsers switch to "Quirks Mode" — a 1990s-era rendering engine that can cause layout issues and CSS failures. DOCTYPE tells the browser to use modern standards mode. It's not an HTML tag; it's an instruction that must come before everything else.
📖 Summary
- HTML is a markup language that uses tags to describe page structure, not a programming language
- Every HTML document follows a fixed skeleton:
<!DOCTYPE html>,<html>,<head>+<body> - Tags usually come in pairs (opening and closing), a few void tags have no closing tag
- Attributes provide extra configuration for tags, written in the opening tag
- We currently use HTML5, which adds semantic tags, audio/video, and other new features
📝 Exercises
- Create your first web page: Open your text editor (or VS Code), copy the first code example from this chapter, save it as
myfirst.html, and double-click to open it in your browser. Modify the content inside the<h1>and<p>tags to introduce yourself, then save and refresh the browser to see the changes. - Observe a real webpage: Open any website (like Wikipedia), right-click and select "View Page Source", and see how many tags you can recognize!