Tags used in the head section

This article explains the tags used in the head section.

It explains the tags used in the head section, such as <link>, <script>, <style>.

YouTube Video

Tags used in the head section

<title> tag

1<title>Document Title</title>

• The <title> tag defines the title of the document. This title is displayed in the browser's tab and is used in bookmarks and search results.

<link> tag

• The <link> tag is used to link external resources to the current document. It is commonly used to link external CSS files but can also be used for icons and other external resources.

The rel Attribute of the <link> Tag

The rel attribute is used to specify the relationship between the resource being linked and the current document in the <link> tag. There are many types of values for the rel attribute, but here we will explain the particularly important and frequently used ones.

stylesheet

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

• stylesheet is used to link an external stylesheet.

icon

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

• rel="icon" defines the icon displayed in the browser's tab or bookmark. By specifying the correct favicon, the site's branding and visual recognition are enhanced.

preload

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

• preload is used to load resources in advance before the page rendering begins. It is especially useful for resources where timing is important, such as fonts or large images. This improves performance and enhances the user experience.

canonical

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

• canonical is used to inform search engines about the canonical version of a page. In the case of duplicate content, indicating the canonical URL helps consolidate search engine ranking from an SEO perspective and ensures content is correctly indexed.

alternate

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

• alternate is used to indicate pages of different languages or formats to search engines and browsers. In multilingual sites, you can specify the URL for each language version in combination with the hreflang attribute to provide users with pages in the appropriate language.

manifest

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

• The manifest provides the browser with a manifest file containing configuration information for a PWA (Progressive Web App). This file contains information such as the app icon, theme color, and display mode, which helps in installing and running the PWA on mobile devices.

dns-prefetch

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

• When referencing external resources, performing DNS resolution of the domain in advance can improve page loading speed. This is especially effective for pages with many external resources or where a fast user experience is desired.

<style> tag

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

• The <style> tag is used to define internal style sheets. It is used to apply CSS styles to elements on the page, allowing you to write CSS without using external files.

<script> tag

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

• The <script> tag is used to embed JavaScript code in an HTML document. You can also link external JavaScript files, controlling the dynamic behavior of the page. Use the src attribute to specify the script file.

The async and defer Attributes

The <script> tag supports two attributes, async and defer, which affect the timing of script loading and execution. Normally, scripts are processed sequentially by the browser, but using these attributes can improve page performance and loading experience.

The async Attribute

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

• Using the async attribute allows the script to be loaded asynchronously. The browser loads the script in parallel with other resources and executes it immediately when loading is complete.
• async is mainly suitable for independent scripts and is used when the script does not depend on the loading of other scripts or the DOM.

The defer Attribute

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

• Using the defer attribute allows the script to be loaded asynchronously but executed after HTML parsing is complete. The execution of the script does not block the page display, thus enhancing the user experience.
• defer is effective when scripts need to be executed after the DOM has fully loaded. For example, it is suitable when you want the script to run after the entire layout and elements of the page have loaded.

CORS Policy and the crossorigin Attribute

When loading external scripts, security restrictions may be imposed based on the Same-Origin Policy. In such cases, the crossorigin attribute can be used to allow resource sharing.

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

The crossorigin attribute can be set with the following two values:.

• anonymous: Sends requests without including credentials.
• use-credentials: Sends requests including credentials.

type attribute

The <script> tag can use the type attribute to specify the type of script. By default, JavaScript is used, but you can also specify certain types of scripts (e.g., module type JavaScript or template language).

JavaScript Modules

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

• Since ECMAScript 2015 (ES6), JavaScript modules have been introduced, allowing code to be split across modules, enhancing reusability. By specifying type="module", you can treat the script as a module.

• Modules can be split into other modules using import and export.

Non-JavaScript Scripts

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>

• Scripts other than JavaScript can also be specified within the <script> tag. For example, use type="application/ld+json" when describing structured data such as JSON-LD. Here, JSON-LD is a format that structures data on a web page, allowing search engines and other applications to understand the data more deeply.

Notes on Using the <script> Tag

• Order of Scripts: Libraries that scripts depend on must be loaded before the dependent scripts. For example, scripts using jQuery must be loaded after jQuery itself.
• Performance Optimization: To avoid affecting page load speed, only load scripts when necessary and avoid running unnecessary scripts.
• Security Measures: When using external scripts, ensure they are loaded from trusted sources to prevent the embedding of malicious scripts.

<base> tag

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

• The <base> tag sets the base URL for all relative URLs in the document. The URL specified in the href attribute becomes the base for relative paths in links and images. It is usually used only once per page.

<noscript> tag

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

• The <noscript> tag defines content that is displayed when JavaScript is disabled in the browser. It is used to provide alternative content for environments where JavaScript is not supported.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video