Các thẻ khai báo thông tin web căn bản

Chủ nhật - 31/07/2016 23:48
In ra
Đóng cửa sổ này

Các thẻ html khai báo thông tin web cơ bản và nâng cao.

Như bài trước thì bạn đã hiểu một tài liệu web bằng HTML hoàn chỉnh sẽ được cấu tạo từ 4 phần chính là thẻ <html>, thẻ khai báo thông tin website <head>, thẻ khai báo loại tập tin <!DOCTYPE> và thẻ <body>

Phía bên trong cặp thẻ <html> trong tài liệu thì trước tiên sẽ là cặp thẻ <head> , cặp thẻ này sẽ có nhiệm vụ để bạn khai báo thông tin tài liệu website mà bạn đang tạo ra như tên tác giả, tên tài liệu, mô tả, khai báo Javascript, khai báo CSS…. Nhưng bây giờ, các bạn chỉ cần biết qua 1 số thẻ khai báo thông tin web căn bản và một số thẻ mở rộng khác được đặt bên trong thẻ cặp <head> mà hầu như dự án nào bạn cũng sẽ sử dụng tới.

Trước khi khởi đầu, bạn hãy mở lại tài liệu HTML giới thiệu đã làm ở phần trước. Bổ sung thêm các thẻ trong phần <head> </head>. Hoặc viết một tài liệu HTML như dưới đây.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title> Trang giới thiệu cá nhân - Tên Bạn</title>
    <meta name="author" content="Ten Ban" />
    <meta name="description" content="Đây là một blog cá nhân của tôi. Chia sẽ những kỷ niệm, buồn vui, hình ảnh, và những câu chuyện thú vị" />
    <meta name="keyword" content="blog cá nhân, blog học mót, học mót" />
  </head>
  <body>
    <p>Đây là nội dung bài giới thiệu</p>
  </body>
</html>

Khai báo tên tài liệu với cặp thẻ <title>

Thẻ <title> </title> được sử dụng để khai báo tên tài liệu web mà bạn đang soạn. Trong thực tiễn thẻ này giúp trình duyệt hiển thị tên tài liệu lúc mở lên và các trình duyệt tìm kiếm như Google, Yahoo, Bing cũng hiển thị nội dung trong cặp thẻ này để lấy tên tài liệu.

Ví dụ như với đoạn HTML trên, mình sẽ tạo lập tên tài liệu này là Học Mót - Blog học làm web nukeviet www.hocmot.net, bạn lưu lại và sau đó mở nó lên bằng trình duyệt sẽ thấy kết quả như sau.

tieu de web html

Khai báo dữ liệu vĩ mô với thẻ <meta>

Thẻ <meta> là một thẻ đặc biệt hơn những thẻ khác vì nó không có thẻ đóng mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này có tác dụng khai báo những dữ liệu vĩ mô trong tài liệu web HTML của bạn như từ khóa, tên tác giả, mô tả, bảng mã ký tự sử dụng,…

Thẻ meta luôn được khai báo kèm theo ít nhất là 1 thuộc tính và mỗi thuộc tính phải luôn có giá trị. Ví dụ:

01	`<meta` `charset="utf-8"` `/>`

Trong đó, charset là tên thuộc tính và utf-8 là giá trị của thuộc tính charset .

Thuộc tính charset

Thuộc tính charset trong thẻ <meta> có chức năng khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tài liệu là gì. Hiện tại hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm chữ Hán – Nôm, các ngôn ngữ tiếng latin và các ngôn ngữ đọc từ phải sang trái.

Thuộc tính name

Đối với thuộc tính name thì thẻ meta của bạn phải sở hữu 2 thuộc tính, đó là là thuộc tính name và content, trong đó thuộc tính content được hiểu giống như là thiết lập nội dung cho thuộc tính name. Ví dụ:

01	`<meta` `name="author"` `content="Hoc Mot"` `/>`

Trong đó, giá trị của tính chất name là 1 giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ 1 số giá trị như:

author: Khai báo tên tác giả.
description: Khai báo mô tả.
keyword: Khai báo từ khóa của tài liệu, các từ khóa này sẽ đóng vai trò hỗ trợ các trình tìm kiếm văn bản hoặc máy tìm kiếm website dò tìm.

Đó là những giá trị quan trọng thường sử dụng, ngoài ra còn 1 số giá trị khác như:

application-name: Tên ứng dụng đại diện của tài liệu web.
generator: Khai báo tên ứng dụng tạo ra tài liệu.

Lời kết

Như mình đã nhắc ở đầu bài là những thẻ khai báo thông tin quan trọng cho tài liệu HTML còn tương đối nhiều nhưng dù sao các thẻ đó bạn cũng sẽ không sử dụng ngay bây giờ nên mình sẽ nhắc đến ở những loại bài viết khác. Nhưng trước mắt bạn nên nắm rõ ý nghĩa những thẻ kia để khi nhìn vào một mã nguồn HTML thì bạn còn hiểu được ý nghĩa của chúng.