HTML <link rel="preload">

#html #link #preload

😄 This post is based on the content from coding.courses.

Definition and Usage

The rel="preload" attribute of the <link> tag specifies that the browser should preemptively fetch the resource specified by the href attribute and store it in the cache to preload it. It is used within the <head> tag and is mainly used to preload resources needed by the current page, such as web fonts, images, and CSS files.
This tag must be the first child element of the root <html> element, and the second child element of <html> is the <body> element.

Basic Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> <!-- Character encoding -->
        <title>The title of this page</title> <!-- Document title -->
        <meta name="description" content="A short description of this page."> <!-- Document description -->
        <link rel="stylesheet" href="style.css"> <!-- Stylesheet -->
        <script src="script.js"></script> <!-- Script -->
    </head>
    <body>
        <!-- The document's content -->
    </body>
</html>

<!DOCTYPE html>: This part declares the document type and serves to ensure that the browser follows the latest web standards and renders the document correctly. It is not an HTML element.
<html>: The root element, which is the top-level element of an HTML document. All HTML elements must be contained within the <html> element.
<head>: This part defines the metadata and header information of the HTML document. It provides information about the document to the browser and can be used to link external stylesheets, JavaScript files, and more.
<body>: This part defines the body content of the HTML document. The content that is actually displayed on the web page is written in this section, and various elements such as text, images, links, tables, and forms can be included.

Technical Summary

The <head> tag is a required tag that is essential for the basic structure of HTML.
A standards-compliant HTML document must contain only one <head> tag.
The <head> tag must be the first child element of the <html> element.
The <head> tag must have the <body> element as a sibling element. In this structure, the <body> element must be positioned second.
The <head> tag must contain a <title> element as a child element, unless the title information is provided by a parent document (such as an <iframe>) or by a higher-level protocol (such as the subject line of an HTML email). This element provides the title of the HTML document.

References

HTML <link rel="preload"> – Proper Understanding and Usage - codingCourses

The rel="preload" attribute of the link tag specifies that the browser should preemptively fetch the resource specified by the href attribute and store it in the cache to preload it.

coding.courses

DEV Community