HTML5 là gì ? Học HTML5 từ cơ bản tới nâng cao

LongDoTe · 12/12/2025

HTML5 là nền tảng của mọi trang web hiện đại. Đây là kế hoạch học tập chi tiết trong 30 ngày (4 tuần) để bạn không chỉ nắm vững cấu trúc cơ bản mà còn làm chủ các tính năng nâng cao và API mới của HTML5.
Kế hoạch này cân bằng giữa lý thuyết, thực hành, và phát triển dự án nhỏ.

📅 Kế hoạch Học HTML5 Chi Tiết (30 Ngày)

Tuần 1: Cấu trúc & Nền tảng (The Core)

Trọng tâm là nắm vững cú pháp, cấu trúc tài liệu và các thẻ cơ bản.

Ngày	Chủ đề	Kiến thức cần nắm vững	Bài tập Thực hành
Ngày 1	Giới thiệu & Cấu trúc Cơ bản	HTML là gì, Cú pháp thẻ. Cấu trúc tài liệu HTML5 (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`). Thẻ Meta Viewport.	Tạo trang HTML đầu tiên với cấu trúc chuẩn. Thử nghiệm với các thẻ `<title>` và meta.
Ngày 2	Thẻ Tiêu đề & Đoạn văn	Thẻ tiêu đề (`<h1>` đến `<h6>`). Thẻ đoạn văn (`<p>`). Thẻ ngắt dòng (`<br>`), Phân cách ngang (`<hr>`).	Viết một bài blog ngắn, sử dụng hợp lý các cấp độ tiêu đề và đoạn văn.
Ngày 3	Liên kết (Links) & Hình ảnh	Thẻ liên kết (`<a>`): thuộc tính `href`, `target="_blank"`. Thẻ hình ảnh (`<img>`): thuộc tính `src`, `alt`, `width`, `height`.	Tạo trang "Giới thiệu" có liên kết đến các trang khác và chèn 3 ảnh có mô tả `alt` khác nhau.
Ngày 4	Danh sách (Lists)	Danh sách không có thứ tự (`<ul>`, `<li>`). Danh sách có thứ tự (`<ol>`, `<li>`). Danh sách mô tả (`<dl>`, `<dt>`, `<dd>`).	Tạo một danh sách các công thức nấu ăn, một danh sách các bước nấu ăn có thứ tự, và danh sách mô tả các thuật ngữ công nghệ.
Ngày 5	Định dạng Văn bản Căn bản	Thẻ định dạng: `<strong>`, `<em>`, `<i>`, `<b>`, `<u>`, `<sup>`, `<sub>`. Thẻ khối (`<div>`) và thẻ nội tuyến (`<span>`).	Định dạng một đoạn văn phức tạp, sử dụng tất cả các thẻ định dạng để nhấn mạnh các từ khác nhau.
Ngày 6	Bảng (Tables) Cơ bản	Thẻ `<table>`, `<thead>`, `<tbody>`, `<tr>` (hàng), `<th>` (tiêu đề), `<td>` (ô dữ liệu). Thuộc tính `colspan` và `rowspan`.	Tạo một bảng báo cáo doanh số đơn giản có 3 cột, 5 hàng và sử dụng `colspan` cho tiêu đề chung.
Ngày 7	Ôn tập & Dự án Mini (Tuần 1)	Ôn lại toàn bộ cú pháp và các thẻ đã học.	Dự án Mini 1: Xây dựng Trang CV Online đơn giản (chỉ dùng HTML) bao gồm: Tiêu đề, Danh sách kinh nghiệm, Bảng kỹ năng và Ảnh cá nhân.

Tuần 2: Cấu trúc Ngữ nghĩa & Forms (Semantics & Interaction)

Trọng tâm là các thẻ ngữ nghĩa mới của HTML5 và cách tạo các biểu mẫu tương tác.

Ngày	Chủ đề	Kiến thức cần nắm vững	Bài tập Thực hành
Ngày 8	Thẻ Ngữ nghĩa HTML5 (Phần 1)	Ý nghĩa của việc dùng thẻ ngữ nghĩa. Thẻ: `<header>`, `<nav>`, `<main>`, `<footer>`.	Bọc CV Online của Ngày 7 bằng các thẻ ngữ nghĩa mới này.
Ngày 9	Thẻ Ngữ nghĩa HTML5 (Phần 2)	Thẻ: `<section>`, `<article>`, `<aside>`, `<figure>`, `<figcaption>`.	Viết một bài blog mẫu với nhiều đoạn, sử dụng `<article>` cho nội dung chính, `<aside>` cho quảng cáo/liên kết liên quan, và `<figure>` cho hình ảnh.
Ngày 10	Form Cơ bản: Input & Label	Thẻ `<form>`, `<label>`. Các loại `input` cơ bản: `text`, `password`, `checkbox`, `radio`, `submit`, `reset`. Thuộc tính `name` và `id`.	Tạo Form đăng nhập và Form đăng ký cơ bản.
Ngày 11	Form Nâng cao: Input Types mới	Các loại `input` mới của HTML5: `email`, `url`, `number`, `date`, `color`, `range`. Thuộc tính `placeholder`, `required`.	Tạo Form khảo sát sản phẩm, sử dụng `range` cho đánh giá, `date` cho ngày mua, và `email` bắt buộc.
Ngày 12	Thành phần Form khác	Thẻ `<textarea>`, `<select>`, `<option>`, `<fieldset>`, `<legend>`. Thẻ `<button>` (khác `input type="submit"`).	Thiết kế Form Liên hệ chuyên nghiệp bao gồm lựa chọn chủ đề (dùng `<select>`) và ô nhập tin nhắn lớn (dùng `<textarea>`).
Ngày 13	Thuộc tính Form Validation	`pattern` (Regex), `min`, `max`, `minlength`, `maxlength`. Thuộc tính `autocomplete`, `autofocus`.	Thử nghiệm đặt `pattern` cho trường username (chỉ chấp nhận chữ cái và số).
Ngày 14	Ôn tập & Dự án Mini (Tuần 2)	Ôn lại các thẻ ngữ nghĩa và các loại Form Input.	Dự án Mini 2: Xây dựng Trang Landing Page đơn giản với các phần `<header>`, `<section>`, và một Form Đăng ký nhận tin (Newsletter Form) hoàn chỉnh.

Tuần 3: Đa phương tiện & API (Media & Advanced Features)

Trọng tâm là các khả năng nhúng đa phương tiện và khám phá các API mới.

Ngày	Chủ đề	Kiến thức cần nắm vững	Bài tập Thực hành
Ngày 15	Nhúng Video HTML5	Thẻ `<video>`. Thuộc tính `src`, `controls`, `autoplay`, `loop`, `muted`, `poster`.	Nhúng video từ máy tính vào trang web, thiết lập tự động phát nhưng tắt tiếng.
Ngày 16	Nhúng Audio HTML5	Thẻ `<audio>`. Các thuộc tính tương tự video. Thẻ `<source>` (Hỗ trợ nhiều định dạng).	Nhúng một đoạn nhạc nền cho trang web, sử dụng nhiều thẻ `<source>` cho khả năng tương thích.
Ngày 17	Canvas API Cơ bản	Thẻ `<canvas>`. Giới thiệu về cách tương tác với JavaScript (`getContext('2d')`) để vẽ hình dạng đơn giản.	Tạo một thẻ `<canvas>` và dùng JS để vẽ một hình vuông màu đỏ. (Đây là điểm giao giữa HTML và JS).
Ngày 18	SVG (Scalable Vector Graphics)	Khác biệt giữa SVG và Raster Image. Cách nhúng SVG trực tiếp vào HTML. Thẻ `<svg>` và các thẻ vẽ cơ bản.	Nhúng một icon SVG đơn giản và thử thay đổi thuộc tính `fill` trực tiếp trong mã HTML.
Ngày 19	iFrames & Nhúng Nội dung	Thẻ `<iframe>` (Nhúng nội dung từ website khác). Sử dụng `<iframe>` để nhúng bản đồ Google Maps hoặc video YouTube.	Nhúng một video YouTube và một bản đồ Google Maps vào trang web.
Ngày 20	HTML API: Geolocation	Khám phá Geolocation API (Yêu cầu quyền truy cập vị trí người dùng). Giới thiệu về cách sử dụng (chủ yếu là JS).	Tạo một nút, khi nhấn sẽ hiển thị kinh độ và vĩ độ hiện tại của bạn (cần dùng JS).
Ngày 21	Ôn tập & Dự án Mini (Tuần 3)	Ôn lại các thẻ Media và API (chú trọng cấu trúc thẻ HTML).	Dự án Mini 3: Xây dựng Trang Bộ Sưu Tập Phim/Nhạc cá nhân, sử dụng thẻ `<figure>` và nhúng video/audio bằng thẻ `<video>` và `<audio>`.

Tuần 4: Lưu trữ, Nâng cao & Hoàn thiện (Storage & Finishing)

Trọng tâm là các kỹ thuật lưu trữ dữ liệu phía Client và các yếu tố cấu hình nâng cao.

Ngày	Chủ đề	Kiến thức cần nắm vững	Bài tập Thực hành
Ngày 22	Lưu trữ Web (Web Storage)	Khác biệt giữa Cookie, Local Storage và Session Storage. Cú pháp cơ bản của `localStorage` (cần dùng JS).	Tạo một Form đăng nhập đơn giản. Khi người dùng nhập tên, lưu tên đó vào `localStorage` và hiển thị lại khi họ quay lại trang (cần dùng JS).
Ngày 23	Thẻ `<template>` và Web Components	Thẻ `<template>` (định nghĩa các khối HTML không hiển thị). Khái niệm về Web Components.	Tạo một cấu trúc thẻ `<template>` cho một sản phẩm.
Ngày 24	Thẻ `<picture>` và Responsive Images	Thẻ `<picture>` và thuộc tính `srcset` của thẻ `<img>`. Cách cung cấp nhiều kích thước ảnh cho các thiết bị khác nhau.	Thiết lập một hình ảnh hiển thị bản nhỏ cho điện thoại và bản lớn cho PC bằng `srcset`.
Ngày 25	Các thuộc tính Toàn cục (Global Attributes)	Thuộc tính `data-*` (tạo data tùy chỉnh), `contenteditable`, `spellcheck`, `hidden`.	Thử nghiệm đặt `contenteditable="true"` cho một đoạn văn và thử nghiệm lưu/đọc data từ thuộc tính `data-*`.
Ngày 26	Tối ưu hóa SEO Căn bản	Các thẻ meta quan trọng (`description`, `keywords`). Thẻ Canonical. Sử dụng các thẻ ngữ nghĩa đúng cách.	Tối ưu hóa lại trang Landing Page của Ngày 14, đảm bảo các thẻ meta và cấu trúc ngữ nghĩa chuẩn SEO.
Ngày 27	Kiểm tra Lỗi & Hợp lệ (Validation)	Sử dụng W3C Validator để kiểm tra lỗi HTML. Khắc phục các lỗi phổ biến (thẻ đóng/mở, thuộc tính bắt buộc).	Đưa tất cả các dự án mini đã làm qua W3C Validator và sửa các lỗi phát hiện được.
Ngày 28-30	Dự án Lớn (Final Project)	Kết hợp tất cả kiến thức đã học (Cấu trúc, Ngữ nghĩa, Form, Media).	Dự án Cuối khóa: Xây dựng Trang Website Cá nhân/Danh mục đầu tư (Portfolio). Đảm bảo sử dụng HTML5 Semantics, có Form Liên hệ phức tạp, nhúng Media và cấu trúc responsive (sẽ cần CSS sau này, nhưng tập trung vào HTML).

🛠️ Công cụ cần thiết

Trình soạn thảo mã (Code Editor): VS Code (được khuyến nghị) hoặc Sublime Text.
Trình duyệt web: Chrome hoặc Firefox (có sẵn công cụ Developer Tools).
W3C Validator: Công cụ kiểm tra tính hợp lệ của mã HTML.
Tài liệu tham khảo: MDN Web Docs (Mozilla Developer Network).

Chúc bạn thành công với kế hoạch học tập này! HTML5 là bước đệm vững chắc cho mọi công nghệ web khác (như CSS và JavaScript).