HTML: HTML Introduction
Last updated: 2026-09-08
HTML is the skeleton of the web. Without HTML, there would be no internet as we know it.
1. 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.
2. A Simple HTML Document
Every HTML document is made up of a series of tags. Below is the most basic HTML document structure:
▶ Example
▶ Try it Yourself(1) 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
▶ Example
HTML attributes in action:
▶ Try it Yourself3. HTML Tag Syntax
HTML tags usually come in pairs: an opening tag and a closing tag:
<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>.
<TAGNAME> works technically, lowercase is more standard and readable.
▶ Example
A complete page with headings, paragraphs, and links:
▶ Try it Yourself4. HTML Attributes
Tags can have attributes to provide additional information. Attributes are written in the opening tag using the format name="value":
<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)
" " are recommended for consistency.
5. 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
6. 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.
❓ FAQ
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.<!DOCTYPE html> be on the first line? What happens if I leave it out?📖 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!
