Thẻ HTML <title> định nghĩa tiêu đề của một trang web. Tiêu đề này xuất hiện trên thanh tab của trình duyệt và khi bạn thêm trang vào danh sách dấu trang (bookmarks). Tất cả các trang web đều nên chứa thẻ <title>.
Khi bạn xây dựng một trang web, bạn sẽ muốn chỉ định tiêu đề cho trang web đó. Ví dụ, giả sử bạn đang xây dựng trang chủ cho trang web của một tiệm bánh địa phương. Bạn có thể muốn tên của tiệm bánh xuất hiện làm tiêu đề của trang web.
Đó chính là nơi thẻ <title> HTML xuất hiện. Thẻ <title> định nghĩa tiêu đề của tài liệu trong HTML và được đặt trong phần head của trang web. Hướng dẫn này sẽ thảo luận, tham khảo một ví dụ, tầm quan trọng của thẻ <title> và cách bạn có thể sử dụng nó trong mã của mình.
Tóm tắt về HTML Head
Trong HTML, phần tử <head> được dùng để lưu trữ các phần tử tiêu đề. Các phần tử này cung cấp thông tin bổ sung về trang web, chẳng hạn như biểu tượng (icon) nên xuất hiện cho trang web.
Cùng nhau, các phần tử trong phần <head> mô tả thông tin cốt lõi về một tài liệu. Chúng có thể trỏ trình duyệt đến các bảng định kiểu và kịch bản (scripts) được sử dụng trong tài liệu (nếu có).
HTML <title>
Thẻ HTML <title> định nghĩa tiêu đề của tài liệu. Thẻ này xuất hiện bên trong thẻ <head>. Thẻ này nên tóm gọn mục đích của trang web. Bạn chỉ cần chỉ định một thẻ <title> cho mỗi trang.
Hãy xem cú pháp cho thẻ này:
<head> <title>Trang chủ | Career Karma</title> </head>
Thẻ <title> có cả thẻ mở và thẻ đóng. Giữa các thẻ này, chúng ta đã viết tiêu đề cho một trang web.
Văn bản trong thẻ <title> của chúng ta không hiển thị trên trang web. Điều này là vì thẻ <title> của chúng ta được bao quanh bởi thẻ <head> thay vì thẻ <body> trên trang web của chúng ta.
Tiêu đề ở trên rất mạnh vì nó cho người dùng biết chính xác họ đang xem trang nào. Chúng tôi cũng đã chỉ định tên trang web giúp tránh nhầm lẫn nếu người dùng có nhiều tab mở với tiêu đề "Trang chủ".
Tiêu đề của bạn nên rõ ràng, dễ đọc và không quá dài. Xem xét các ví dụ tiêu đề sau:
- Blog – Career Karma
- Liên hệ Career Karma
- Blog Career Karma
Tất cả các tiêu đề này đều truyền đạt mục đích của trang. Tiêu đề của bạn không nên quá dài vì tiêu đề chỉ có không gian hạn chế trên thanh tab.
Thẻ <title> hỗ trợ tất cả các thuộc tính toàn cục (global attributes) trong HTML5. Thẻ này được hỗ trợ bởi tất cả các trình duyệt hiện đại chính. Thẻ title không có bất kỳ thuộc tính HTML dành riêng cho phần tử nào.
Ví dụ thẻ HTML Title
Phần tử tiêu đề HTML được định nghĩa trong thẻ <head> trên một trang HTML. Giả sử chúng ta đang xây dựng một trang web cho tiệm bánh địa phương, Joseph Abrams & Sons. Chúng ta hiện đang xây dựng trang chủ, và muốn tên tiệm bánh xuất hiện trong tiêu đề trang web.
Chúng ta có thể sử dụng mã sau để đặt tiêu đề trang là "Joseph Abrams & Sons":
<head> <title>Joseph Abrams & Sons</title> </head>
Khi trang web của trang web được mở, tiêu đề trang được đặt là "Joseph Abrams & Sons".
Bây giờ, giả sử chúng ta đang xây dựng trang liên hệ cho tiệm bánh địa phương trước đó. Chúng ta có thể muốn dùng tiêu đề "Liên hệ | Joseph Abrams & Sons". Tiêu đề này đơn giản và cũng mô tả tốt mục đích của trang web.
Tại sao nên sử dụng thẻ <title>?
Có một số lý do khiến việc chỉ định thẻ tiêu đề tài liệu là quan trọng.
Thứ nhất, thẻ <title> hiển thị tiêu đề trang trên thanh tiêu đề của trình duyệt web. Ví dụ, tiêu đề của trang này là "Thẻ HTML Title: Hướng dẫn từng bước | Career Karma". Điều này xuất hiện trong tên tab của trang web này.
Thứ hai, thẻ <title> gán nhãn trang web khi nó được thêm vào dấu trang hoặc lưu làm yêu thích trong trình duyệt web của người dùng. Tiêu đề bạn chỉ định sẽ là tiêu đề được lưu tự động. Nếu bạn không sử dụng tiêu đề phù hợp cho trang web, người dùng có thể thấy khó khăn để tìm thấy trang của bạn trong dấu trang.
Các công cụ tìm kiếm phụ thuộc vào nội dung của thẻ title. Tiêu đề được chỉ định trong thẻ title sẽ là tiêu đề trang web trên Trang kết quả công cụ tìm kiếm (SERP). SERP là một mục trên trang kết quả tìm kiếm.
Ngoài ra, nội dung của thẻ <title> được dùng để xác định chủ đề của trang web bởi các công cụ tìm kiếm.
Vậy, bây giờ chúng ta biết thẻ <title> quan trọng, bạn có thể hỏi: làm thế nào để sử dụng thẻ title HTML? Hãy trả lời câu hỏi đó.
Kết luận
Thẻ <title> nêu tiêu đề của một tài liệu HTML. Tiêu đề này xuất hiện trong tên tab của trình duyệt web. Nó cũng được các công cụ tìm kiếm sử dụng khi xử lý một trang web để quyết định tiêu đề và chủ đề của nó.
Hướng dẫn này đã thảo luận, tham khảo một ví dụ, các kiến thức cơ bản về thẻ HTML <title>. Bây giờ bạn đã sẵn sàng bắt đầu sử dụng thẻ title như một chuyên gia HTML!
Bạn muốn tìm hiểu thêm về viết mã HTML? Hãy xem hướng dẫn Cách học HTML của chúng tôi. Hướng dẫn này chứa danh sách các tài nguyên và khóa học học tập hàng đầu cho người mới bắt đầu và lập trình viên trung cấp. Bạn cũng sẽ tìm thấy các cuốn sách hàng đầu về chủ đề HTML.