Học HTML, CSS từ Zero Tới Hero
Mỗi file HTML sẽ có phần đuôi mở rộng là html. Ví dụ: index.html, product.html, contact.html, …
Tên file xuất hiện trong các bài học thử thách:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Các thẻ meta ở đây -->
</head>
<body>
<!-- Nội dung trang web ở đây -->
</body>
</html>
Trong đoạn code trên có 4 thành phần:
- Khai báo
DOCTYPE - Thẻ
<html> - Thẻ
<head> - Thẻ
<body>
DOCTYPE
Đây là khai báo kiểu cho tài liệu HTML, còn được gọi là DOCTYPE, là dòng code đầu tiên cần được khai báo trong mọi file HTML.
Khai báo DOCTYPE:
<!DOCTYPE html>
Khai báo DOCTYPE có ý nghĩa hướng dẫn cho trình duyệt web hiểu về phiên bản HTML mà trang web đang sử dụng. Điều này đảm bảo rằng trang web của bạn được xử lý giống nhau trên nhiều trình duyệt khác nhau.
Thẻ HTML
Toàn bộ trang web được bao bọc trong cặp thẻ html (gồm thẻ mở <html> và thẻ đóng </html>). Thẻ <html> (hay phần tử <html>) còn được gọi là phần tử gốc (root), đây là phần tử cấp cao nhất vì tất cả các phần tử khác đều là con của phần tử này.
<!DOCTYPE html>
<html>
<!-- Toàn bộ nội dung trang web nằm ở đây -->
</html>
Trong thực tế, các trang web sẽ sử dụng thêm thuộc tính lang trong thẻ mở html, điều này nhằm chỉ định ngôn ngữ được sử dụng trong nội dung của trang web.
Ví dụ trang web của bạn có nội dung là tiếng Việt:
<!DOCTYPE html>
<html lang="vi">
<!-- Toàn bộ nội dung trang web nằm ở đây -->
</html>
Trong trường hợp nội dung là tiếng Anh:
<!DOCTYPE html>
<html lang="en">
<!-- Toàn bộ nội dung trang web nằm ở đây -->
</html>
Các công cụ dịch ngôn ngữ (ví dụ như Google translate) hay các trình đọc màn hình (screen reader) sẽ sử dụng thuộc tính này để nhận biết được ngôn ngữ của trang web một cách chính xác.
vivàenđược đề cập trong các ví dụ trên là mã ngôn ngữ (Locale codes). Bạn có thể tra cứu thêm mã của các ngôn ngữ khác tại: https://www.w3schools.com/tags/ref_language_codes.asp
Thẻ HEAD
Thẻ <head> là nơi chứa các thẻ meta, là các thẻ cung cấp thêm thông tin hiển thị của trang web. Ví dụ: tiêu đề trang web, các đường link tới file CSS, khả năng thu/phóng của trang web, …
Sử dụng thẻ <head> trong thẻ <html>:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Các thẻ meta ở đây -->
</head>
</html>
Thẻ BODY
Thẻ <body> là nơi chứa toàn bộ nội dung hiển thị của trang web. Mọi nội dung bạn từng nhìn thấy trên các trang web đều nằm trong thẻ <body>.
Sử dụng thẻ <body> trong thẻ <html>:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Các thẻ meta ở đây -->
</head>
<body>
<!-- Nội dung trang web ở đây -->
</body>
</html>
Lưu ý, thẻ <head> và <body> luôn là thẻ con trực tiếp của thẻ <html> bạn nhé.
Tóm tắt
- Mỗi file HTML có đuôi mở rộng là
html, ví dụ:index.html. Cấu trúc gồm 4 phần:DOCTYPE,<html>,<head>và<body> DOCTYPElà dòng đầu tiên cần được khai báo trong mọi file HTML.- Thẻ
<html>chứa toàn bộ nội dung của trang web. - Thẻ
<head>chứa các thẻ meta, thẻ<body>chứa nội dung được hiển thị của trang web. - Thuộc tính
langsử dụng để chỉ định ngôn ngữ của trang web. Các công cụ dịch ngôn ngữ và trình đọc màn hình sẽ sử dụng thuộc tính này.
Nhận xét