HTML5: Thẻ <meta>


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Tổng quan

Thẻ <meta> dùng để trình bày bất kỳ loại thông tin siêu dữ liệu (metadata) nào cho dù metadata không thể được trình bày với những thẻ liên quan đến <meta> (như <base>, <link>, <script>, <style>, <title>).

HTML5: Thẻ <meta />

Tùy thuộc vào thuộc tính, thẻ <meta> sẽ có thể trình bày những siêu dữ liệu sau đây:

· nếu là thuộc tính name thì siêu dữ liệu ở mức tài liệu (document-level) sẽ được áp dụng cho toàn bộ trang web;

· nếu là thuộc tính http-equiv thì một chỉ thị pragma được đưa ra để yêu cầu máy chủ web cho biết cách thức phục vụ trang web tương ứng;

· nếu là thuộc tính charset (thuộc tính của HTML5) thì một bảng mã sẽ được cung cấp nhằm điều chỉnh dạng dữ liệu sẽ được hiển thị trong trang web;

· ​nếu là thuộc tính là itemprop thì một siêu dữ liệu do người dùng định nghĩa sẽ được chuyển cho tác nhân người dùng.

Nhóm nội dung: meta thuộc nhóm nội dung siêu dữ liệu. Nếu thuộc tính itemprop được sử dụng thì nhóm nội dung sẽ bao gồm thêm Flow và Phrasing.

Nội dung được phép: Thẻ <meta> không chứa nội dung.

Thẻ đóng: Thẻ <meta> là thẻ đơn (<meta />).

Phần tử cha được phép:

<meta charset>, <meta http-equiv> nằm trong thẻ <head>; <meta charset> cũng có thể nằm trong thẻ <body>; nếu thuộc tính http-equiv không phải là một khai báo mã hóa thì <meta> có thể nằm trong thẻ <noscript>.

<meta name>: bất kỳ phần tử nào chấp nhận nhóm nội dung Metadata.

<meta itemprop>: bất kỳ phần tử nào chấp nhận nhóm nội dung Metadata hoặc nhóm nội dung Parsing.

Giao diện DOM: HTMLMetaElement.

Thuộc tính

Thẻ <meta> bao gồm các thuộc tính Global.

Lưu ý rằng thuộc tính name có một ý nghĩa đặc biệt trong thẻ <meta> và thuộc tính itemprop không được phép thiết lập khi một trong các thuộc tính namehttp-equiv hoặc charset đang được sử dụng.

charset

Thuộc tính này được dùng để khai báo một bảng mã ký tự dùng cho trang web, thuộc tính này có thể được ghi đè (cục bộ) bằng cách sử dụng thuộc tính lang trong mỗi thẻ; charset chứa một hằng chuỗi trong danh sách các giá trị được xổ ra khi bạn mở nháy kép; trong trường hợp danh sách xổ ra không có bảng mã ký tự bạn mong muốn thì bạn có quyền điền một bảng mã ký tự theo ý mình nhưng nó phải nằm trong danh sách các bảng mã ký tự được định nghĩa bởi IANA. Dưới đây là một số gợi ý cho bạn lựa chọn:

· Khuyến khích sử dụng mã UTF-8.

· Không nên sử dụng bảng mã ASCII không tương thích (tức là không ánh xạ được mã 8-bit (trỏ từ 0x20 tới 0x7E) tới mã Unicode (trỏ từ 0x0020 tới 0x007E)) bởi vì những trình duyệt không hỗ trợ loại bảng mã này có thể diễn giải nội dung không đúng theo ý muốn. Ta nên tránh những loại bảng mã sau đây: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, nhóm ISO-2022 và nhóm EBCDIC.

· Không thể sử dụng các bảng mã CESU-8, UTF-7, BOCU-1 và SCSU một cách thông thường mà phải thông qua các kỹ thuật cross-scripting.

· Không nên sử dụng bảng mã ký tự UTF-32 bởi vì các giải thuật mã hóa HTML5 có thể không phân biệt được nó với mã UTF-16.

Lưu ý:

- Bảng mã ký tự khai báo phải phù hợp với một trong các trang web của website.

- Thẻ <meta> phải nằm trong thẻ <head> hoặc nằm trong 512 Byte đầu tiên của trang web, bởi vì một số trình duyệt sẽ tìm kiếm bảng mã trong những Byte đầu tiên này trước khi chọn một bảng mã ký tự khác cho trang web.

- Thẻ <meta> chỉ là một phần của giải thuật để xác định tập ký tự cho trang web mà các trình duyệt sẽ sử dụng. Header HTTP Content-Type và bất kỳ thẻ nào cũng sẽ ưu tiên thẻ <meta>.

- Bạn nên ưu tiên sử dụng thuộc tính charset bởi vì nếu không có bảng mã nào được sử dụng trong trang web thì sẽ phải cần đến một số kỹ thuật cross-scripting, và điều này có thể gây ra tác hại cho người dùng.

- Trước HTML5, thẻ <meta> thường có dạng <meta http-equiv="Content-Type"  content="text/html; charset=IANAcharset">, trong đó IANAcharset tương đương (equivalent) với thuộc tính charset (của HTML5). Ta vẫn có quyền sử dụng cú pháp này mặc dù nó đã trở nên lỗi thời.

Ví dụ:

<meta charset="utf-8" />

content : Thuộc tính này sẽ cung cấp các giá trị liên quan đến các thuộc tính http-equivname.

http-equiv : Đây là thuộc tính liệt kê, nó định nghĩa một pragma để sửa đồi hành vi máy chủ và hành vi người dùng. Giá trị của pragma sẽ được định nghĩa thông qua thuộc tính content, các giá trị có thể có của pragma gồm:

· content-language 

Pragma này sẽ định nghĩa ngôn ngữ mặc định cho trang web. Có điểm lưu ý rằng bạn không nên thường xuyên sử dụng giá trị này vì nó đã lỗi thời, bạn có thể thay thế bằng thuộc tính lang của thẻ <body>.

· content-security-policy

Pragma này cho phép người quản trị website định ngĩa các chính sách nội dung cho tài nguyên đã được sử dụng; các chính sách ở đây chủ yếu liên quan đến việc xác định nguồn gốc máy chủ và các điểm cuối của kịch bản, điều này sẽ giúp bảo vệ chống lại các cuộc tấn công kịch bản cross-site.

· content-type

Pragma này định nghĩa kiểu MIME của tài liệu, giá trị của MIME nằm trong thuộc tính content. Cú pháp hợp lệ trong content đối với content-type thường là: content="text/html; charset=IANAcharset" , trong đó IANAcharset là bảng mã ký tự được định nghĩa bởi IANA.

Lưu ý:

- Nên sử dụng thuộc tính charset của thẻ <meta> để thay thế cho content-type vì nó đã lạc hậu so với HTML5.

- Vì thẻ <meta> không làm thay đổi được kiểu của tài liệu trong XHTML hoặc HTML5 với củ pháp XHTML, cho nên không được thiết lập kiểu MIME cho XHTML thông qua content-type.

- Chỉ có các tài liệu dạng HTML mới có thể sử dụng được content-type, còn trong các tài liệu dạng khác thuộc tính này không còn cần đến. Do vậy, có thể coi content-type đã trở nên lỗi thời, và ta nên thay thế nó bằng thuộc tính charset.

Ví dụ:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

· default-style

Pragma này dùng để định nghĩa CSS ta muốn được sử dụng trong trang web; khi đó thuộc tính content của <meta> phải mang giá trị của thuộc tính title của thẻ <link> và thuộc tính href của thẻ <link> phải chứa URL của tập tin CSS, hoặc cũng có thể content cần mang giá trị của thuộc tính title của thẻ <style> và trong <style> chứa nội dung CSS.

· refresh

Pragma này dùng để định nghĩa:

- số giây (second) cho đến khi trang web được tải lại (reload) nếu thuộc tính content chỉ chứa nội dung là một số nguyên dương;

- số giây cho đến khi trang web được chuyển hướng nếu thuộc tính content chứa nội dung là một số nguyên dương và sau đó là ';url=' và một URL hợp lệ.

Ví dụ sau sẽ chuyển hướng tới trang http://v1study.com sau 05 giây:

<meta http-equiv="refresh" content="5;url=http://v1study.com/" />

· set-cookie

Dùng để định nghĩa một cookie cho trang web, nội dung của nó phải tuân thủ theo cú pháp được định nghĩa tại IETF HTTP Cookie Specification. Pragma này đã trở nên lỗi thời và ta có thể thay thế nó bằng "HTTP header set-cookie".

name

Thuộc tính này định nghĩa tên của một siêu dữ liệu ở mức tài liệu. Ta không nên thiết lập thuộc tính name nếu một trong những thuộc tính itemprop, http-equiv hoặc charset đã được thiết lập.

Tên của siêu dữ liệu mức tài liệu được kết hợp vớ giá trị của thuộc tính content. Dưới đây ta sẽ tìm hiểu các giá trị có thể có của thuộc tính name kết hợp với giá trị của thuộc tính content:

· application-name: định nghĩa tên của ứng dụng web đang chạy trong trang web.

Lưu ý:

- Các trình duyệt có thể sử dụng giá trị này để nhận diện ứng dụng; nó có sự khác biệt so với thẻ <title> ở chỗ nó thường bao gồm tên các ứng dụng nhưng có thể nó cũng chứa những thông tin đặc biệt như tên của tài liệu hoặc trạng thái;

- Những trang web đơn giản thì không nên sử dụng application-name.

· author: định nghĩa theo một định dạng bất kỳ tên của tác giả của tài liệu;

· description: chứa nội dung vắn tắt nhưng xúc tích về trang web. Ở một số trình duyệt như Opera và FireFox thì việc sử dụng description cho trang web sẽ có tác dụng đánh dấu (bookmarked) trang web đó;

· generator: chứa một bộ định danh với định dạng bất kỳ đối với phần mềm dùng để tạo trang web;

· keywords: chứa các chuỗi phân cách nhau bằng dấu (,) và những chuỗi này có liên quan chặt chẽ tới nội dung của các trang web của website tới mức chúng được coi là những từ khóa của trang web và website;

· referrer: giá trị này dùng để điều khiển nội dung của header HTTP Referer và nó sẽ đính kèm bất kỳ một yêu cầu nào gửi từ tài liệu hiện thời. Các giá trị của thuộc tính content ứng với <meta name="referer"> gồm:

Giá trị Mô tả
no-referrer Không gửi header HTTP Referer.
origin Gửi bản tài liệu gốc.
no-referrer-when-downgrade Gửi bản tài liệu gốc như là một tham chiếu tới đích có mức độ bảo mật cao hơn hoặc tương đương (https->https), nhưng không gửi tham chiếu tới đích có mức độ bảo mật thấp hơn (https->http).
origin-when-crossorigin Gửi một URL hoàn chỉnh (không có tham số) khi thực hiện yêu cầu có nguồn tương tự nhưng chỉ gửi bản tài liệu gốc cho những trường hợp khác.
unsafe-URL Gửi một URL hoàn chỉnh (không có tham số) khi thực hiện yêu cầu có nguồn tương tự.

Lưu ý: Nếu ta dùng phương pháp chèn động để tạo thẻ <meta name="referrer"> (bằng cách sử dụng document.write hoặc appendChild) thì ta sẽ không xác định được rằng có gửi được hay không các tham chiếu, và điều này có thể tạo ra các xung đột hay mâu thuẫn, khi đó giá trị no-referrer sẽ được sử dụng.

Các thuộc tính cũng có thể có một giá trị được lấy từ danh sách mở rộng được định nghĩa tại WHATWG Wiki MetaExtensions. Mặc dù không được chính thức chấp nhận, nhưng ta sẽ tìm hiểu một vài tên phổ biến sau đây:

· <meta name="creator">: định nghĩa theo một định dạng bất kỳ tên của người tạo trang web. Lưu ý rằng creator cũng có thể là tên của một tổ chức hay cơ quan nào đó. Ta có thể sử dụng nhiều thẻ <meta> nếu có nhiều tên;

· <meta name="googlebot">: dùng để đồng bộ hóa các robot, nhưng chỉ được dùng bởi Googlebot với mục đích thu thập thông tin chỉ mục (index) cho Google;

· <meta name="publisher">: định nghĩa theo một định dạng bất kỳ tên của nhà xuất bản tài liệu. Lưu ý rằng publisher cũng có thể định nghĩa tên của tổ chức hay cơ quan nào đó;

· <meta name="robots">: định nghĩa việc thu thập thông tin liên kết với trang web. Danh sách các giá trị thu thập được phân cách nhau bằng dấu (,). Dưới đây là các giá trị có thể có trong danh sách của <meta name="robots">:

Giá trị Mô tả Sử dụng bởi
index Cho phép robot đánh chỉ mục trang web Tất cả
noindex Ngăn ngừa robot đánh chỉ mục cho trang web Tất cả
follow Cho phép robot theo dõi các liên kết trong trang web Tất cả
nofollow Ngăn ngừa robot theo dõi các liên kết trong trang web Tất cả
noodp Ngăn ngừa việc sử dụng mô tả DMOZ nếu có, chẳng hạn như mô tả về trang web trong các trang kết quả của bộ máy tìm kiếm (search engine) Google, Yahoo, Bing
noarchive Ngăn ngừa bộ máy tìm kiếm đệm (caching) nội dung trang web Google, Yahoo
nosnippet Ngăn ngừa việc hiển thị bất kỳ phần mô tả nào về trang web trong trang kết quả tìm kiếm Google
noimageindex Ngăn ngừa trang web hiện thời xuất hiện như là một trang tham khảo từ một ảnh đã được lập chỉ mục. Google
noydir Ngăn ngừa việc sử dụng mô tả Yahoo Directory nếu có Yahoo
nocache Đồng bộ hoá việc không lưu trữ Bing

Lưu ý:

- Chỉ những robot liên kết mới thực hiện được những quy tắc đã được định nghĩa bởi robots.

- Robot vẫn cần phải truy cập vào trang web để đọc siêu dữ liệu. Nếu bạn không muốn điều này xảy ra - chẳng hạn như để ngăn ngừa việc tiêu hao băng thông - thì bạn cần thay thế hoặc bổ sung tập tin robots.txt.

 - Nếu bạn muốn xoá chỉ mục của trang web thì bạn sẽ sử dụng giá trị noindex, nhưng nó chỉ hoạt động khi robot 'viếng thăm' trang web vào lần kế tiếp, và để đảm bảo chắc chắn rằng robot sẽ viếng thăm trang web này thì bạn nên sử dụng tập tin robots.txt . Một số bộ máy tìm kiếm (Google chẳng hạn) đã phát triển các công cụ cho phép bạn gỡ bỏ nhanh chỉ mục khỏi các trang web mong muốn. Chẳng hạn bạn có thể vào phần 'Chỉ mục của Google' của công cụ Webmasters của Google để xoá chỉ mục cho những trang web mong muốn.

- Bạn cần tránh việc sử dụng những giá trị có thể loại trừ lẫn nhau tại cùng thời điểm, chẳng hạn như indexnoindex, hoặc follownofollow, bởi vì có thể gây ra sự mất kiểm soát hành vi của robot.

- Một số bộ máy tìm kiếm thu thập các robot như Google, Yahoo Search hay Bing, ... đều hỗ trợ các giá trị tương tự trong phần chỉ dẫn HTTP là X-Robot-Tags, điều này sẽ cho phép các bộ máy tìm kiếm sử dụng pragma này trên những tài liệu không phải là HTML (hình ảnh chẳng hạn).

· <meta name="slurp">: dùng để đồng bộ các robot, nhưng chỉ áp dụng cho Slurp - bộ thu thập chỉ mục của Yahoo Search;

· <meta name="viewport">: đưa ra những gợi ý về kích thước ban đầu cho chế độ xem trang web. Pragma này chỉ được sử dụng cho một số thiết bị di động; nó cũng đang được sử dụng khá phổ biến mặc dù nó không nằm trong tiến trình được chuẩn hoá. Các giá trị có thể có của pragma này:

Giá trị Các giá trị có thể có Mô tả
width Một số nguyên dương hoặc literal device-width Định nghĩa độ rộng theo đơn vị pixel cho chế độ xem
height Một số nguyên dương hoặc literal device-height Định nghĩa độ cao theo đơn vị pixel cho chế độ xem
initial-scale Một số thực nằm trong đoạn từ 0.0 đến 10.0 Xác định tỉ lệ giữa độ rộng của thiết bị (device-width theo chế độ portrait hoặc device-height theo chế độ landscape) với kích thước của chế độ xem.
maximum-scale Một số thực nằm trong đoạn từ 0.0 đến 10.0 Xác định giá trị lớn nhất cho chế độ thu phóng (zoom); nó phải lớn hơn hoặc bằng minimum-scale.
minimum-scale Một số thực nằm trong đoạn từ 0.0 đến 10.0 Xác định giá trị nhỏ nhất cho chế độ thu phóng (zoom); nó phải nhỏ hơn hoặc bằng maximum-scale.
user-scalable Một giá trị boolean (yes hoặc no) Nếu thiết lập là no thì người dùng không được phép thu phóng; mặc định là yes.

Lưu ý:

- Mặc dù không được chuẩn hoá nhưng <meta name="viewport"> lại thương xuyên được sử dụng bởi các trình duyệt dành cho mobile như Safari Mobile, Firefox for Mobile hoặc Opera Mobile.

- Các giá trị mặc định có thể thay đổi tuỳ thuộc vào từng thiết bị hoặc trình duyệt.

Ví dụ:

<meta name="viewport" content="width=device-width, initial-scale=1" />
» Tiếp: Thẻ <col> và <colgroup>
« Trước: !DOCTYPE
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!