1. Khái niệm
   1. HTML là viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu siêu văn bản.
   2. HTML không phải ngôn ngữ lập trình mà là ngôn ngữ đánh dấu
   3. Mỗi file HTML có đuôi mở rộng là `html`, ví dụ: `index.html`.
   4. Cấu trúc gồm 4 phần: `DOCTYPE`, `<html>`, `<head>` và `<body>`
2. Thẻ meta
   1. meta charset
      1. Thẻ meta với `charset="UTF-8"` có tác dụng hỗ trợ hiển thị các ký tự nằm ngoài khoảng từ `A - Z`. Ví dụ: tiếng Việt có dấu, tiếng Trung, tiếng Nhật, tiếng Ả Rập, v.v.
   2. meta title
      1. Tuy không có tên thẻ meta nhưng title vẫn thuộc nhóm thẻ meta
      2. Giúp hỗ trợ công cụ tìm kiếm
      3. Hiển thị trên trình duyệt
   3. meta viewport
      1. Hướng dẫn trình duyệt cách hiển thị
      2. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
3. Boilerplate
   1. Là những đoạn code tiêu chuẩn được tái sử dụng ở nhiều nơi
   2. Sử dụng boilerplate HTML với "!" hoặc "html:5"
4. Nhóm thẻ tiêu đề
   1. Các thẻ heading h1-h6
   2. Ý nghĩa
      1. Thể hiện các tiêu đề chính của trang web theo từng đề mục
      2. Hỗ trợ công cụ tìm kiếm nhận diện những nội dung chính của trang web
      3. Hỗ trợ hiển thị
   3. Lưu ý
      1. Không sử dụng vượt cấp
      2. Luôn nên bắt đầu từ h1
      3. Không lồng các thẻ heading vào nhau
      4. Trong 1 trang luôn chỉ có duy nhất 1 thẻ h1
5. Nhóm thẻ văn bản
   1. p
      1. paragraph: định nghĩa một đoạn văn
      2. Lưu ý: với những đoạn text ngắn có thể không phải đoạn văn mà là thẻ li, span, hoặc thẻ heading, label, td, .v.v. Không phải lúc nào cũng sử dụng thẻ p cho text
   2. u
      1. underline (inline): nhấn mạnh bằng cách gạch chân một đoạn văn
   3. i
      1. italic (inline): nhấn mạnh bằng cách in nghiêng đoạn văn
   4. b
      1. bold (inline): nhấn mạnh bằng cách tô đậm đoạn văn
   5. strong
      1. nhấn mạnh bằng cách tô đậm đoạn văn, tuy nhiên đoạn text trong thẻ strong sẽ được công cụ tìm kiếm chú ý hơn và thể hiện tính nghiêm trọng, khẩn cấp hơn.
6. Nhóm thẻ danh sách
   1. Thẻ ol
      1. ordered list: danh sách có đánh thứ tự
   2. Thẻ ul
      1. unordered list: danh sách không đánh thứ tự
   3. Thẻ li
      1. list item: phần tử con trong danh sách
   4. Lưu ý
      1. Thẻ li phải là con trực tiếp của thẻ ol hoặc ul
      2. Thay đổi style cho li bằng "list-style-type" cho thẻ ol hoặc ul
7. Nhóm thẻ bảng
   1. Các thẻ bảng
      1. table
         1. Khai báo 1 bảng
      2. thead
         1. Khai báo phần đầu bảng
      3. tr
         1. table-row: khai báo 1 dòng trong bảng
      4. th
         1. table-heading: khai báo tiêu đề 1 cột
      5. tbody
         1. Khai bảo thân bảng
      6. td
         1. table-data: khai báo 1 ô trong dòng
         2. mặc định thẻ td phải là con trực tiếp của thẻ tr
      7. tfoot
         1. Khai báo phần chân bảng
   2. colspan
      1. Thuộc tính colspan để gộp các cột liền kề
      2. Mặc định: 1 - tức là không gộp
      3. Nhận giá trị nguyên dương
   3. border-collapse
      1. Khi xứ lý border của bảng, mỗi thẻ trong bảng sẽ có border riêng không đè gộp với các thẻ khác của bảng.
      2. Giá trị mặc định: separate
         1. Chia ra thành các border riêng
      3. border-collapse: collapse
         1. Gộp các đường border của các thẻ bảng thành 1 đường duy nhất
8. Nhóm thẻ link, a, iframe, script
   1. Thẻ link
      1. Dùng để đưa tài nguyên khác vào trang web, phục vụ gián tiếp cho việc hiển thị nội dung.
      2. Ví dụ: font chữ, tài nguyên css, tài nguyên icons...
   2. Thẻ a (anchor)
      1. Tạo một siêu liên kết
      2. Thuộc tính: href - hypertext reference: chỉ định đường dẫn được tham chiếu
      3. Đưa người dùng từ trang web này sang trang web khác.
      4. Đưa đến 1 vị trí cụ thể trong chính trang web thông qua id
      5. Mở hộp mail: <a href="mailto:someone@example.com">Send email</a>
      6. Mở hộp call: <a href="tel:+4733378901">+47 333 78 901</a>
      7. Download: <a href="./my_cv.pdf">My CV</a>
      8. target
         1. Xác định cách mở một siêu liên kết
         2. _blank: mở trong tab mới
         3. _self (default): mở tại chính tab hiện tại
   3. Thẻ iframe
      1. Tạo ra một bộ khung nội tuyến
      2. Nhúng nội dung từ trang khác vào trang hiện tại
   4. Thẻ script
      1. Nhúng tài nguyên JavaScript vào trang web
      2. Thường được sử dụng ngay trước khi đóng thẻ body
9. Nhóm thẻ form
   1. Thẻ form đóng vai trò quan trọng trong tương tác web hiện đại vì giúp nhận dữ liệu từ người dùng như đăng ký, đăng nhập, nhập thông tin người dùng, thêm, sửa thông tin dữ liệu, v.v.
   2. Các thẻ chính
      1. form
         1. Định nghĩa 1 form
         2. Thuộc tính action: Hành vi khi thẻ form được submit
         3. Thuộc tính method: Phương thức truyền dữ liệu khi form được submit (thường là POST)
         4. Subtopic 3
      2. input
         1. Nhận giá trị 1 dòng
         2. Thẻ input có nhiều type quy định kiểu giá trị nhận vào như text, email, password, datetime, color, button, .v.v
      3. textarea
         1. Tạo một vùng nhập liệu
         2. cols: quy định số ký tự trên 1 dòng
         3. rows: quy định số dòng trong textarea
      4. label
         1. Tạo nhãn dán cho input
         2. Thuộc tính for để focus vào input có id chỉ định
      5. button
         1. nút bấm
      6. select-option
         1. Lựa chọn chỉ 1 dạng thả xuống
      7. radio
         1. Lựa chọn chỉ 1
      8. checkbox
         1. Lựa chọn 1 hoặc nhiều
   3. Lưu ý
      1. Hầu hết các thẻ trong form đều là thẻ inline
      2. Trong một số trường hợp xử lý dữ liệu không phức tạp hoặc ngữ nghĩa không quan trọng, có thể không cần sử dụng thẻ form
10. Nhóm thẻ media
    1. img
       1. Dùng để hiển thị ảnh
       2. Đây là self-closing tag: Không có nội dung
       3. Nội dung hiển thị là do tài nguyên tải được từ thuộc tính src
       4. Thuộc tính
          1. src
             1. chỉ định tài nguyên tải được và đặt tài nguyên này vào khung mà thẻ img đã chiếm chỗ từ trước
          2. width
             1. độ rộng của image
          3. height
             1. chiều cao của image
          4. alt (alternative)
             1. Văn bản thay thế khi ảnh bị lỗi
             2. Hộ trợ công cụ tìm kiếm hiểu được ý nghĩa của ảnh
          5. title
             1. Thẻ ảnh cùng thường có title để khi hover lên ảnh, người dùng biết được tên và nội dung ảnh
       5. Các định dạng ảnh
          1. Ảnh bitmap
             1. Là một thuật ngữ chỉ nhóm các định dạng ảnh sử dụng dạng cấu trúc nhiều điểm ảnh sắp xếp liên tiếp để tạo thành ảnh hoàn chỉnh
             2. Có thể tải từng phần của ảnh
          2. JPG/JPEG
             1. Joint Photographic Experts Group
             2. Là 1 trong số định dạng ảnh bitmap
             3. Thông dụng và chiếm đa số
             4. Không hỗ trợ nền trong suốt
             5. Bị vỡ ảnh khi phóng to
          3. PNG
             1. Portable Network Graphics
             2. Hỗ trợ nền trong suốt
             3. Thường sẽ chiếm dung lượng cao hơn JPG nếu cùng kích thước và màu sắc
          4. SVG
             1. Scalable Vector Graphics: định dạng vector đồ hoạ
             2. Dung lượng cực nhỏ
             3. Dễ dàng chỉnh sửa bởi CSS
             4. Phóng to không lo vỡ
             5. Hỗ trợ ảnh trong suốt
             6. Không thể tải từng phần của ảnh mà phải đợi tải xong hoàn toàn
             7. Dung lượng nhanh chóng tăng cao khi màu sắc và đồ hoạ phức tạp
             8. Dùng với các thiết kế đơn giản như icon, logo, thiết kế hình học, biển báo...
          5. GIF
             1. Graphic Interchange Format
             2. Hỗ trợ ảnh động
             3. Màu sắc bị hạn chế
             4. Ảnh động sẽ không chuyển động hoặc chuyển động giật cục khi chưa tải xong
             5. Nguồn ảnh GIF: https://giphy.com
          6. Webp
             1. Do google tạo ra để tối ưu dung lượng của những ảnh PNG, JPEG
             2. Hỗ trợ ảnh trong suốt
             3. Hỗ trợ ảnh động
       6. Tối ưu ảnh
          1. Không sử dụng ảnh to cho chi tiết nhỏ làm giảm hiệu suất.
          2. Không sử dụng ảnh nhỏ cho chi tiết lớn gây vỡ ảnh
          3. Sử dụng công cụ nén ảnh để giảm dung lượng ảnh: https://tinypng.com
          4. Không nên dùng ảnh ngoài trang, khi ảnh bị xoá hoặc thay đổi đường dẫn, ảnh sẽ bị lỗi.
          5. Thẻ img với loading="lazy"
             1. Ảnh sẽ được tải khi người dùng gần cuộn xuống đến phần ảnh
             2. Chỉ những ảnh trong viewport mới được tải ngay lập tức
             3. Không nên sử dụng loading="lazy" cho những ảnh quan trọng
    2. video và audio
       1. Định nghĩa 1 video hoặc audio
       2. Thuộc tính
          1. source
             1. Quy định nguồn lấy tài nguyên
          2. width
             1. Chiều rộng media
          3. height
             1. Chiều cao media
          4. controls
             1. Cho phép người dùng điều khiển media
          5. title
             1. Tiêu đề media
       3. Thẻ source
          1. Khi sử dụng nhiều nguồn tài nguyên khác nhau, định nghĩa từng nguồn tài nguyên bằng thẻ source (viết trong thẻ media chính)
    3. figure
       1. Thẻ figure xuất hiện từ phiên bản HTML 5 dùng để bổ sung ngữ nghĩa cho ảnh và các media khác
       2. figure thường được sử dụng chung img và figcaption để chú thích cho ảnh
11. Quy ước đặt tên
    1. Những lỗi phổ biến
       1. Tên có dấu cách
       2. Tên Tiếng Việt hoặc tiếng địa phương
       3. Tên có ký tự đặc biệt:!,/,|, {, }, @, #...
       4. Tên không mô tả được nội dung, không rõ nghĩa
       5. Tên không theo quy ước đặt tên
    2. Những quy ước đặt tên phổ biến
       1. camelCase
          1. Đặt tên hàm, tên biến
       2. PascalCase
          1. Đặt tên class, hàm khởi tạo, component trong lập trình, .v.v
       3. kebab-case
          1. Đặt tên class css, attribute trong html, css
       4. snake_case
    3. Đa số tên file, thư mục, class, id trong quá trình làm việc với HTML, CSS sẽ sử dụng kebab-case
12. Thẻ đủ và thẻ tự đóng
    1. Thẻ đủ
       1. Là thẻ bao gồm một cặp thẻ mở và đóng
       2. Nội dung nằm ở giữa thẻ mở và thẻ đóng
    2. Thẻ tự đóng
       1. Thẻ không cần thẻ đóng hoặc được coi là tự đóng
       2. Thẻ không có nội dung hoặc nội dung được tải từ tài nguyên ngoài thẻ
13. Thẻ inline và thẻ block
    1. Thẻ inline
       1. Coi mỗi phần tử như 1 ký tự trên dòng
       2. Chỉ chiếm chỗ đúng phần nội dung hiển thị
       3. Có thể có 1 khoảng trắng nếu html viết 2 thẻ inline xuống dòng hoặc không viết liền sát nhau trên cùng dòng
    2. Thẻ block
       1. Mỗi thẻ block chiếm toàn bộ chiều rộng của thẻ cha
    3. Những hạn chế của thẻ inline
       1. Không thể thiết lập trực tiếp padding-top, padding-bottom, margin-top, margin-bottom, width, height, min-width, min-height cho thẻ inline (trừ một số thẻ như img, video, audio, ifame, v.v.)
    4. Display: inline-block
       1. Khi vẫn muốn sử dụng các thẻ trên cùng một dòng nhưng khắc phục các hạn chế của thẻ inline
    5. Lưu ý
       1. Không dùng thẻ inline bọc thẻ block
14. HTML Semantics
    1. HTML Semantics là những thẻ HTML có ngữ nghĩa cụ thể, dùng cho văn cảnh cụ thể, bổ sung nghĩa cho nội dung của phần tử
    2. Hỗ trợ công cụ tìm kiếm phân tích đúng nội dung của website
    3. Trong HTML có những thẻ không có ngữ nghĩa như thẻ div, span dùng để bao bọc nội dung chứ không mang ý nghĩa đặc biệt gọi là HTML non-semantics
15. Tính hợp lệ của một tài liệu HTML
    1. Một tài liệu HTML được coi là hợp lệ khi tuân thủ những quy đinh do tổ chức W3C (World Wide Web Consortium) đặt ra cho tài liệu
    2. Ưu điểm của một HTML hợp lệ
       1. Tính nhất quán
       2. Hiển thị tốt
       3. Hỗ trợ SEO
       4. Dễ bảo trì
       5. Tương thích với các công cụ tích hợp
    3. Kiểm tra tính hợp lệ tại: https://validator.w3.org/
16. Các loại đường dẫn
    1. Đường dẫn tuyệt đối
       1. Là đường dẫn hoàn chỉnh bắt đầu từ thư mục gốc của hệ thống tập tin hoặc tên miền website trên không gian mạng.
       2. Không phụ thuộc vào vị trí sử dụng của file
       3. Đường dẫn thiết bị window
          1. C:\Users\Username\Documents\File.txt
       4. Đường dẫn thiết bị macOS
          1. /home/hoangnm/Documents/File.txt
       5. Đường dẫn trên internet
          1. https://fullstack.edu.vn/
    2. Đường dẫn tương đối
       1. Là đường dẫn chỉ đến tập tin, thư mục khác dựa trên vị trí tập tin, thư mục hiện tại mà không quan tâm đến thư mục gốc trong hệ thống tập tin
       2. Phụ thuộc vào vị trí sử dụng đường dẫn
       3. Trên thiết bị
          1. Pictures\Image.png
          2. ../imgs/img1.png
       4. Trên internet
          1. //imgs/img1.png
    3. Đường dẫn bắt đầu bằng `/`, `./`, `../`, `//`
       1. /
          1. Trong các hệ điều hành Unix, MacOS... thì đây được đại diện là thư mục gốc
          2. Đây được coi là đường dẫn tuyệt đối, tuy nhiên trong tài liệu HTML mà sử dụng đương dẫn "/" thì tài nguyên sẽ được tìm bắt đầu từ thư mục gốc (root) mà website được khởi chạy.
       2. ./
          1. Trỏ đến file và thư mục cùng cấp vị trí sử dụng
          2. Đây được coi là đường dẫn tương đối
       3. ../
          1. Đi ra ngoài 1 thuộc cấp folder so với vị trí sử dụng
          2. Đây cũng được coi là đường dẫn tương đối
       4. //
          1. Đây là đường dẫn tương đối được sử dụng trong không gian mạng
          2. Khi một tài nguyên bắt đầu bằng // - nó sẽ được tự thêm phương thức trùng với phương thức http hoặc https của trình duyệt