Trong bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về đường dẫn file trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về phần tử head trong HTML.
Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu về phần tử head trong HTML. Ngoài ra bạn đọc có thể tham khảo một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu về phần tử block trong HTML.
Phần tử head trong HTML
1. Phần tử head trong HTML
- Phần tử head trong HTML là phần tử chứa siêu dữ liệu (metadata), và được đặt giữa thẻ html và thẻ body.
- Siêu dữ liệu HTML là dữ liệu về tài liệu HTML. Siêu dữ liệu không được hiển thị.
- Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, script và các thông tin meta khác.
- Các thẻ mô tả siêu dữ liệu bao gồm: thẻ title, style, meta, link, script và thẻ base.
2. Phần tử title trong HTML
- Phần tử title trong HTML được sử dụng để chỉ định tiêu đề của tài liệu và được yêu cầu trong tất cả các tài liệu HTML.
Phần tử title trong HTML:
- Định nghĩa một tiêu đề trong tab trình duyệt.
- Cung cấp tiêu đề cho trang khi trang đó được thêm vào mục yêu thích.
- Hiển thị tiêu đề cho trang trên danh sách kết quả tìm kiếm.
Ví dụ: dưới đây là ví dụ về tài liệu HTML:
Kết quả trả về sau khi áp dụng phần tử title có dạng như dưới đây:
3. Phần tử style trong HTML
Phần tử style trong HTML được sử dụng để chỉ định style cho phần thông tin trên một trang HTML duy nhất.
Ví dụ: dưới đây là ví dụ minh họa phần tử style trong HTML:
Kết quả trả về sau khi áp dụng phần tử style có dạng như dưới đây:
4. Phần tử link trong HTML
Phần tử link trong HTML được sử dụng để liên kết với các style sheet bên ngoài.
Ví dụ: dưới đây là ví dụ về phần tử link trong HTML:
Kết quả trả về sau khi áp dụng phần tử link có dạng như dưới đây:
5. Phần tử meta trong HTML
Phần tử meta trong HTML được sử dụng để chỉ định bộ ký tự được sử dụng, mô tả trang, từ khóa (keyword), tác giả và các siêu dữ liệu khác.
Siêu dữ liệu được sử dụng trên các trình duyệt (để hiển thị nội dung), các công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.
Ví dụ: dưới đây là ví dụ về phần tử meta trong HTML:
Kết quả trả về sau khi áp dụng thẻ meta trong HTML có dạng như dưới đây:
"Tim hieu ve phan tu meta trong HTML."
6. Thiết lập Viewport trong HTML
Trên HTML được bổ sung phương thức mới cho phép các nhà thiết kế web kiểm soát Viewport thông qua thẻ meta.
Viewport có thể hiểu là khu vực hiển thị nội trang web trên thiết bị người dùng, và thay đổi theo kích thước màn hình thiết bị.
Chúng ta có thể thêm phần tử meta viewport dưới đây trên tất cả các trang web:
Trong đó:
- Phần tử meta viewport cung cấp hướng dẫn cho trình duyệt cách kiểm soát kích thước và tỷ lệ của trang.
- Phần width=device-width thiết lập chiều rộng của trang cho phù hợp với chiều rộng của màn hình thiết bị (thay đổi theo từng thiết bị).
- Phần initial-scale=1.0 thiết lập mức zoom ban đầu khi trang được trình duyệt tải lần đầu tiên.
Ví dụ: dưới đây là ví dụ một trang web không có thẻ meta viewport (bên trái) và một trang web có thẻ meta viewport (bên phải):
7. Phần tử script trong HTML
Phần tử script trong HTML được sử dụng để chỉ định JavaScript phía máy khách.
Ví dụ: dưới đây là ví dụ về phần tử script trong HTML. Trong ví dụ này JavaScript sẽ viết "Taimienphi.vn" thành phần tử HTML bằng id="demo":
Kết quả trả về có dạng như dưới đây:
8. Phần tử base trong HTML
Phần tử base trong HTML được sử dụng để chỉ định URL hoặc mục tiêu mặc định cho tất cả các URL tương đối trên trang web.
Ví dụ: dưới đây là ví dụ về phần tử base trong HTML:
Kết quả trả về có dạng như dưới đây:
9. Có thể bỏ qua các thẻ html, head và body?
Trong HTML5, chúng ta có thể bỏ qua các thẻ như thẻ html, body và thẻ head.
Ví dụ: đoạn mã dưới đây được xem là hợp lệ, trong đoạn mã này chúng ta bỏ qua các thẻ html, body và thẻ head:
Kết quả trả về có dạng như dưới đây:
10. Tổng kết
Dưới đây là bảng danh sách các phần tử head trong HTML:
https://thuthuat.taimienphi.vn/phan-tu-head-trong-html-50802n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về phần tử head trong HTML giúp bạn có nhiều tài liệu để học HTLM tốt hơn. Ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác trên Taimienphi.vn để tìm hiểu về danh sách trong HTML. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về layout trong HTML nhé.