Các thẻ được sử dụng trong phần đầu

Bài viết này giải thích các thẻ được sử dụng trong phần đầu.

Nó giải thích các thẻ được sử dụng trong phần đầu, chẳng hạn như <link>, <script>, <style>.

YouTube Video

Các thẻ được sử dụng trong phần đầu

Thẻ <title>

1<title>Document Title</title>

• Thẻ <title> định nghĩa tiêu đề của tài liệu. Tiêu đề này được hiển thị trên tab của trình duyệt và được sử dụng trong đánh dấu trang và kết quả tìm kiếm.

Thẻ <link>

• Thẻ <link> được sử dụng để liên kết các tài nguyên bên ngoài với tài liệu hiện tại. Nó thường được sử dụng để liên kết các tệp CSS bên ngoài nhưng cũng có thể được sử dụng cho các biểu tượng và nguồn tài nguyên bên ngoài khác.

Thuộc tính rel của thẻ <link>

Thuộc tính rel được sử dụng để chỉ định mối quan hệ giữa tài nguyên được liên kết và tài liệu hiện tại trong thẻ <link>. Có nhiều loại giá trị cho thuộc tính rel, nhưng ở đây chúng tôi sẽ giải thích những loại đặc biệt quan trọng và được sử dụng thường xuyên.

stylesheet

1<link rel="stylesheet" href="styles.css">

• stylesheet được sử dụng để liên kết một tập tin stylesheet bên ngoài.

icon

1<link rel="icon" href="favicon.ico" type="image/x-icon">

• rel="icon" định nghĩa biểu tượng hiển thị trên tab của trình duyệt hoặc dấu trang. Bằng cách chỉ định favicon đúng, thương hiệu và nhận diện hình ảnh của trang web được cải thiện.

preload

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• preload được sử dụng để tải các tài nguyên trước khi bắt đầu hiển thị trang. Nó đặc biệt hữu ích cho các tài nguyên mà thời gian rất quan trọng, chẳng hạn như phông chữ hoặc hình ảnh lớn. Điều này cải thiện hiệu năng và tăng cường trải nghiệm người dùng.

canonical

1<link rel="canonical" href="https://example.com/page.html">

• canonical được sử dụng để thông báo cho các công cụ tìm kiếm về phiên bản chuẩn của một trang. Trong trường hợp nội dung trùng lặp, việc chỉ định URL chuẩn giúp hợp nhất xếp hạng tìm kiếm từ góc độ SEO và đảm bảo nội dung được lập chỉ mục chính xác.

alternate

1<link rel="alternate" hreflang="en" href="https://example.com/en/">

• alternate được sử dụng để chỉ ra các trang có ngôn ngữ hoặc định dạng khác nhau cho các công cụ tìm kiếm và trình duyệt. Trong các trang web đa ngôn ngữ, bạn có thể chỉ định URL cho mỗi phiên bản ngôn ngữ kết hợp với thuộc hreflang để cung cấp cho người dùng các trang bằng ngôn ngữ thích hợp.

manifest

1<link rel="manifest" href="/manifest.json">

• manifest cung cấp cho trình duyệt một tập tin manifest chứa thông tin cấu hình cho PWA (Progressive Web App). Tệp này chứa thông tin như biểu tượng ứng dụng, màu sắc chủ đề và chế độ hiển thị, giúp cài đặt và chạy PWA trên các thiết bị di động.

dns-prefetch

1<link rel="dns-prefetch" href="//example.com">

• Khi tham chiếu tài nguyên bên ngoài, thực hiện phân giải DNS của tên miền trước có thể cải thiện tốc độ tải trang. Điều này đặc biệt hiệu quả đối với các trang có nhiều tài nguyên bên ngoài hoặc khi muốn mang lại trải nghiệm người dùng nhanh.

Thẻ <style>

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>

• Thẻ <style> được sử dụng để định nghĩa các bảng định kiểu nội bộ. Nó được sử dụng để áp dụng các kiểu CSS cho các phần tử trên trang, cho phép bạn viết CSS mà không cần sử dụng các tệp bên ngoài.

Thẻ <script>

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>

• Thẻ <script> được sử dụng để nhúng mã JavaScript vào tài liệu HTML. Bạn cũng có thể liên kết các tệp JavaScript bên ngoài, kiểm soát hành vi động của trang. Sử dụng thuộc tính src để chỉ định tệp script.

Thuộc tính async và defer

Thẻ <script> hỗ trợ hai thuộc tính, async và defer, ảnh hưởng đến thời gian tải và thực thi script. Thông thường, script được trình duyệt xử lý theo thứ tự, nhưng sử dụng các thuộc tính này có thể cải thiện hiệu suất và trải nghiệm tải trang.

Thuộc tính async

1<script src="script.js" async></script>

• Sử dụng thuộc tính async cho phép script được tải không đồng bộ. Trình duyệt tải script song song với các tài nguyên khác và thực thi ngay khi việc tải hoàn tất.
• async chủ yếu phù hợp với các script độc lập và được sử dụng khi script không phụ thuộc vào việc tải các script khác hoặc DOM.

Thuộc tính defer

1<script src="script.js" defer></script>

• Sử dụng thuộc tính defer cho phép script được tải không đồng bộ nhưng được thực thi sau khi việc phân tích HTML hoàn tất. Việc thực thi script không chặn hiển thị trang, do đó nâng cao trải nghiệm người dùng.
• defer hiệu quả khi các script cần được thực thi sau khi DOM đã được tải đầy đủ. Ví dụ, nó phù hợp khi bạn muốn script chạy sau khi toàn bộ bố cục và các thành phần của trang đã được tải xong.

Chính sách CORS và thuộc tính crossorigin

Khi tải các script bên ngoài, các hạn chế về bảo mật có thể được áp dụng dựa trên Chính sách Cùng Nguồn (Same-Origin Policy). Trong các trường hợp như vậy, thuộc tính crossorigin có thể được sử dụng để cho phép chia sẻ tài nguyên.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Thuộc tính crossorigin có thể được thiết lập với hai giá trị sau:.

• anonymous: Gửi yêu cầu mà không bao gồm thông tin xác thực.
• use-credentials: Gửi yêu cầu bao gồm thông tin xác thực.

thuộc tính type

Thẻ <script> có thể sử dụng thuộc tính type để chỉ định loại script. Mặc định, JavaScript được sử dụng, nhưng bạn cũng có thể chỉ định các loại script nhất định (ví dụ: JavaScript kiểu module hoặc ngôn ngữ mẫu).

Các module JavaScript

1<script type="module" src="module.js"></script>

• Kể từ ECMAScript 2015 (ES6), các module JavaScript được giới thiệu, cho phép mã nguồn được chia thành các module, tăng khả năng tái sử dụng. Bằng cách chỉ định type="module", bạn có thể coi script là một module.

• Các module có thể được chia nhỏ thành các module khác bằng cách sử dụng import và export.

Các script không phải JavaScript

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>

• Các script khác ngoài JavaScript cũng có thể được chỉ định trong thẻ <script>. Ví dụ, sử dụng type="application/ld+json" khi mô tả dữ liệu có cấu trúc như JSON-LD. Ở đây, JSON-LD là một định dạng cấu trúc dữ liệu trên trang web, cho phép công cụ tìm kiếm và các ứng dụng khác hiểu dữ liệu sâu hơn.

Lưu ý khi sử dụng thẻ <script>

• Thứ tự của Scripts: Các thư viện mà script phụ thuộc phải được tải trước các script phụ thuộc. Ví dụ, các script sử dụng jQuery phải được tải sau chính jQuery.
• Tối ưu hóa hiệu suất: Để tránh ảnh hưởng đến tốc độ tải trang, chỉ tải các script khi cần thiết và tránh chạy các script không cần thiết.
• Biện pháp bảo mật: Khi sử dụng các script bên ngoài, đảm bảo chúng được tải từ các nguồn đáng tin cậy để ngăn ngừa việc nhúng các script độc hại.

thẻ <base>

1<base href="https://example.com/">

• Thẻ <base> thiết lập URL cơ sở cho tất cả các URL tương đối trong tài liệu. URL được chỉ định trong thuộc tính href trở thành cơ sở cho các đường dẫn tương đối trong các liên kết và hình ảnh. Nó thường chỉ được sử dụng một lần cho mỗi trang.

thẻ <noscript>

1<noscript>Your browser does not support JavaScript!</noscript>

• Thẻ <noscript> định nghĩa nội dung được hiển thị khi JavaScript bị vô hiệu hóa trong trình duyệt. Nó được sử dụng để cung cấp nội dung thay thế cho các môi trường không hỗ trợ JavaScript.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video