Course List
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language used to build web pages and web applications. It uses a set of predefined tags (such as <h1>, <p>, <img>, etc.) to describe the structure and content of a web page, including headings, paragraphs, images, links, tables, forms, and more.
HTML is not a programming language; it is a markup language. Its core role is to give content meaning and structure, which browsers then parse and render into visual pages. An HTML document is made up of elements, which typically consist of an opening tag, content, and a closing tag, for example: <p>This is a paragraph.</p>.
Since its inception in 1991, HTML has gone through many iterations. The current stable version is HTML5. HTML5 introduced many new features such as native video/audio support, Canvas, local storage, and semantic tags (<header>, <footer>, <article>, etc.), greatly enhancing the capabilities of web applications.
HTML is typically used together with CSS (Cascading Style Sheets) and JavaScript: CSS controls the page style and layout, while JavaScript handles interactivity. The combination of these three technologies forms the foundation of modern web development.
Main features:
Easy to learn with intuitive syntax.
Natively supported by all browsers, no extra plugins needed.
Seamless integration with CSS and JavaScript.
Rich set of tags and attributes to accommodate various content display needs.
Whether you are a beginner or an experienced developer, mastering HTML is the first step into the world of web development.
Common HTML Tags Table
The table below lists some of the most commonly used HTML tags, their purpose, and examples:
| Tag | Purpose | Example |
|---|---|---|
<html> | Root container of an HTML document | <html>...</html> |
<head> | Contains document metadata (title, encoding, styles, etc.) | <head><title>Page Title</title></head> |
<title> | Defines the page title shown on the browser tab | <title>My Homepage</title> |
<body> | Main visible content of the web page | <body>...</body> |
<h1> ~ <h6> | Headings, <h1> is highest level, <h6> lowest | <h1>Main Heading</h1> |
<p> | Paragraph | <p>This is a paragraph.</p> |
<a> | Hyperlink, uses href attribute to specify destination | <a href="https://example.com">Visit Example</a> |
<img> | Embeds an image (self-closing tag) | <img src="photo.jpg" alt="description"> |
<ul>, <ol>, <li> | Unordered list, ordered list, and list items | <ul><li>Item A</li></ul> |
<div> | Block-level container for layout and styling groups | <div class="box">Content</div> |
<span> | Inline container, often used for local text styling | <span style="color:red;">Red text</span> |
<tr>, <tr>, <td> | Table: table, row, cell | <table><tr><td>Data</td></tr> |
<form> | User input form | <form action="/submit">...</form> |
<input> | Input field (text, password, button, etc.) | <input type="text" name="username"> |
<br> | Line break (self-closing) | First line<br>Second line |
<!-- ... --> | Comment, not displayed on the page | <!-- This is a comment --> |
Note: The above are the most basic and commonly used HTML tags. In actual development, there are many more semantic tags (
<article>,<section>,<nav>, etc.) and form enhancement tags (<select>,<textarea>, etc.) that can be learned as needed.
HTML Version History Table
Since its birth, HTML has gone through several important versions, each introducing new features and standard improvements. The table below summarizes the major versions and their characteristics:
| Version | Year Published | Main Features & Improvements |
|---|---|---|
| HTML 1.0 | 1993 (draft) | Earliest HTML proposal, defined basic tags (headings, paragraphs, links, images). Very rudimentary with limited functionality. |
| HTML 2.0 | 1995 (RFC 1866) | First standardized HTML version; added forms (<form>), input elements, laying the foundation for web interaction. |
| HTML 3.2 | 1997 | Released by W3C; added tables (<tr>), text flow around images, superscript/subscript, <applet> and other elements, enhanced layout capabilities. |
| HTML 4.01 | 1999 | Widely adopted mature version; introduced CSS support, scripts (<script>), frames (<iframe>), and semantic improvements. Came in Strict, Transitional, and Frameset doctypes. |
| XHTML 1.0 | 2000 | XML-based rewrite of HTML, requiring stricter syntax (lowercase tags, close all elements, quoted attributes). Improved compatibility with XML tools. |
| HTML5 | 2014 (W3C Recommendation) | The foundation of the modern web. Added semantic elements (<header>, <footer>, <article>, <nav>), native multimedia (<audio>, <video>), Canvas, SVG embedding, local storage, Web Workers, geolocation, and more. |
| HTML 5.1 | 2016 | Minor improvements over HTML5; added <menu>, <dialog> elements, improved accessibility features and developer experience. |
| HTML 5.2 | 2017 | Removed obsolete elements (e.g., keygen), clarified usage of <main> and <aside>, enhanced security policies. |
| HTML Living Standard | Continuously updated | The current “living standard” led by WHATWG, no longer uses version numbers and is updated in real time. All modern browsers follow this specification. Subsequent evolutions of HTML5 are incorporated into this standard. |
Note: The evolution of HTML has transformed it from a simple document markup language into a powerful application development platform. Understanding version history helps you know when different features became available and make informed decisions about compatibility with older projects.
HTML Practice
We will provide some examples and online editors in each chapter to help you better learn HTML!
Example
<!DOCTYPE html>
<html>
<title>Hello World </title>
<body>
<h1>My First Title</h1>
<p>My First Paragraph. </p>
</body>
</html>