HTML: cấu trúc & semantic

Học HTML từ đầu - bộ xương của mọi trang web - và viết semantic HTML đúng chuẩn: thẻ/phần tử/thuộc tính, văn bản & danh sách, liên kết & ảnh (alt), bảng & form (label), các thẻ ngữ nghĩa header/nav/main/article/section/aside/footer, và HTML cho SEO (title/meta/Open Graph). Thực hành qua 4 trang thật - bán hàng, tin tức, landing page, giới thiệu khoá học - để thấy rõ semantic tốt cho SEO, cho CSS và dễ bảo trì.

Lộ trình học

1. 1 HTML là gì: bộ xương trang web HTML là ngôn ngữ ĐÁNH DẤU (markup), không phải lập trình: thẻ (tag), phần tử (element), thuộc tính (attribute); cấu trúc doctype/html/head/body. Cơ bản · 15′
2. 2 Văn bản, tiêu đề & danh sách Đánh dấu nội dung văn bản: tiêu đề h1-h6 theo THỨ BẬC, đoạn p, nhấn mạnh ngữ nghĩa strong/em (khác b/i hình thức), danh sách ul/ol/li và blockquote. Cơ bản · 18′
3. 3 Liên kết, ảnh & đa phương tiện Liên kết a (href, target, rel), ảnh img với thuộc tính alt (quan trọng cho SEO & người khiếm thị), figure/figcaption, và audio/video đúng cách. Cơ bản · 18′
4. 4 Bảng & biểu mẫu (form) Bảng table (thead/tbody/th scope) cho dữ liệu; biểu mẫu form với input gắn label đúng (for/id), các loại input, button và validation cơ bản của trình duyệt. Vận dụng · 22′
5. 5 Semantic HTML là gì & vì sao cần Thẻ ngữ nghĩa header/nav/main/article/section/aside/footer thay cho "div soup"; vì sao semantic tốt cho SEO, accessibility (screen reader) và CSS dễ nhắm. Vận dụng · 22′
6. 6 Cấu trúc một trang chuẩn semantic Ghép bố cục một trang hoàn chỉnh bằng landmark: header chứa nav, main chứa article/section, aside, footer; và thứ bậc heading (heading outline) đúng chuẩn. Vận dụng · 22′
7. 7 a11y: web cho mọi người Accessibility (a11y) - khả năng tiếp cận: HTML cho người dùng screen reader, bàn phím và thị lực kém; alt, label, ARIA, focus và tương phản màu theo WCAG. Vận dụng · 20′
8. 8 HTML cho SEO & metadata HTML giúp Google hiểu trang: thẻ title, meta description, meta viewport, Open Graph (preview khi chia sẻ), thứ bậc heading, alt ảnh và structured data. Vận dụng · 20′
9. 9 Thẻ script: defer & async Nhúng JavaScript bằng thẻ script: vì sao script mặc định chặn dựng trang (render-blocking), và cách defer & async tải song song không chặn để trang mở nhanh. Vận dụng · 20′
10. 10 Tối ưu tốc độ tải trang Các thủ thuật HTML giúp trang tải nhanh: resource hints (preload, preconnect, dns-prefetch), hoãn tải (lazy) ảnh/iframe, và thứ tự nạp tài nguyên hợp lý. Vận dụng · 22′
11. 11 Dự án: trang web bán hàng Dự án 1: trang bán hàng bằng HTML semantic - mỗi sản phẩm là một article (figure ảnh, giá, nút mua), danh sách sản phẩm và form giỏ hàng đơn giản. Vận dụng · 26′
12. 12 Dự án: trang tin tức Dự án 2: trang bài báo bằng HTML semantic - article với header (tựa, tác giả, time), section nội dung, aside tin liên quan, breadcrumb - tốt cho SEO. Vận dụng · 26′
13. 13 Dự án: Landing Page Dự án 3: landing page bằng HTML semantic - hero (header), các section giới thiệu, lời kêu gọi hành động (CTA), form đăng ký và footer. Cấu trúc để CSS làm đẹp. Vận dụng · 26′
14. 14 Dự án: trang giới thiệu khoá học Dự án cuối khoá: trang giới thiệu một khoá học ghép mọi thứ đã học - header/nav, article mô tả, section lộ trình (ol), form đăng ký, footer. Nâng cao · 32′