Học HTML, CSS từ Zero Tới Hero
- Trình duyệt sẽ hiểu như thế nào?
- Có thể bỏ qua thẻ head và body
Bài học này nhằm giúp các bạn hiểu rõ hơn về tính hợp lệ của HTML. Thực tế, để đảm bảo tính tường minh, mình cũng hiếm khi bỏ thẻ <head> và <body> khi code HTML. Mình cũng không khuyến nghị các bạn làm điều này, vì thực tế có nhiều người có thể chưa biết và có thể dẫn tới hiểu nhầm.
Trong bài này, chúng ta sẽ tìm hiểu về tính hợp lệ của HTML thông qua tình huống viết HTML thiếu đi những thành phần tiêu chuẩn như DOCTYPE, thẻ <html>, <head> và <body>.
Trình duyệt sẽ hiểu như thế nào?
Các bạn nghĩ, trình duyệt sẽ làm gì với đoạn code dưới đây?
<h1>Xin chào! Hôm nay là một ngày đẹp trời!</h1>
Trình duyệt sẽ?
- Báo lỗi
- Không hiển thị được
- Tự thêm thẻ tiêu chuẩn còn thiếu
Câu trả lời là: trình duyệt sẽ tự thêm các thẻ <html>, <head> và <body>. Tuy nhiên, thành phần DOCTYPE sẽ không được trình duyệt tự thêm.
Trình duyệt sẽ hiểu đoạn code trên như sau:
<!-- trình duyệt tự thêm các thẻ <html>, <head>, <body> -->
<html>
<head></head>
<body>
<h1>Xin chào! Hôm nay là một ngày đẹp trời!</h1>
</body>
</html>
Trường hợp khác, khi trong code có các thẻ meta.
Ví dụ:
<meta charset="UTF-8">
<title>Xin chào!</title>
<h1>Xin chào! Hôm nay là một ngày đẹp trời!</h1>
Thì trình duyệt sẽ hiểu như sau:
<html>
<head>
<!-- Các thẻ meta được đưa vào thẻ <head> -->
<meta charset="UTF-8">
<title>Xin chào!</title>
</head>
<body>
<h1>Xin chào! Hôm nay là một ngày đẹp trời!</h1>
</body>
</html>
Các thẻ thuộc nhóm meta tự động được thêm vào trong thẻ <head>.
 |
| Ảnh chụp kết quả thực tế trong trình duyệt web. |
Có một lưu ý, để đảm bảo các thẻ thuộc nhóm meta được đưa vào trong thẻ <head> thì các thẻ này phải nằm trên đầu tài liệu HTML. Nếu không, các thẻ meta có thể bị đưa vào trong thẻ <body>, điều này sẽ vi phạm về cách sử dụng HTML theo tiêu chuẩn của W3C, các thẻ meta cần nằm trong thẻ <head>.
Có thể bỏ qua thẻ head và body
Theo tài liệu của W3C về thẻ <head>, đây là một thẻ optional (không bắt buộc).
 |
| Ảnh chụp tài liệu của W3C nói về thẻ <head>. |
Trong tài liệu hướng dẫn tối ưu HTML của Google có đề cập:
For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.
(This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught. For consistency and simplicity reasons it’s best served omitting all optional tags, not just a selection.)
Ý Google muốn nói là: để tối ưu về kích thước tệp tốt nhất nên bỏ qua các thẻ không bắt buộc sử dụng. Tuy nhiên, điều này có thể cần nhiều thời gian để được chấp rộng rãi, vì phần lớn các nhà phát triển được dạy là cấu trúc tiêu chuẩn của HTML là phải có thẻ <head> và <body>.
Tổng kết lại, để viết được một tệp HTML hợp lệ cần có các yếu tố sau:
- Thành phần DOCTYPE, thành phần này quan trọng vì khai báo phiên bản HTML
- Thẻ
<html lang="xxx">, nếu thiếu thuộc tínhlangsẽ có mộtwarningtrên validator.w3.org - Thẻ
<title>, theo tiêu chuẩn của W3C thì đây là một thẻ bắt buộc sử dụng
Thẻ <title> là bắt buộc:
 |
| Ảnh chụp từ tài liệu nói về thẻ <title> của W3C. |
Tóm tắt
- Trình duyệt sẽ tự thêm các thẻ
<html>,<head>,<body>nếu code HTML không có các thẻ này. - Có thể không viết thẻ
<head>và<body>trong code HTML mà vẫn đảm bảo tính hợp lệ theo W3C. Tài liệu của W3C cũng cho biết đây là 2 thẻ optional (không bắt buộc sử dụng). - Để đảm bảo tính hợp lệ của HTML theo tiêu chuẩn của W3C cần đáp ứng các yếu tố:
- Có khai báo
DOCTYPE - Có khai báo thuộc tính
langcho thẻ<html> - Có sử dụng thẻ
<title>
- Có khai báo
- Tài liệu tối ưu HTML của Google có đề cập tới việc bỏ đi các thẻ optional để tối ưu dung lượng. Tuy nhiên cũng cần lưu ý khi áp dụng vì nhiều nhà phát triển có thể chưa biết điều này.
Nhận xét