DEV Community: Youn

CSS @charset – Declaring Character Encoding for Stylesheets

Youn — Tue, 06 Oct 2026 02:03:28 +0000

@charset Rule

The CSS @charset syntax rule is used to declare the character encoding of the stylesheet.
It allows you to specify the desired character encoding for the stylesheet.
It is used to explicitly specify the character encoding directly within the stylesheet, rather than relying on an external environment that, for any reason, might not match the stylesheet's encoding.
It is particularly useful in environments where the default encoding of the HTML file or system is not set to the standard UTF-8, allowing you to independently set the stylesheet's internal encoding to UTF-8.

@charset "UTF-8"; /* Must be placed at the very beginning of the stylesheet */

/* CSS rules should be placed after this rule */
body {
    font-size: 18px;
}
...

Syntax

@charset "charset-name";

charset-name represents the character encoding to be specified. It must be the name of a web-safe character encoding registered in the IANA registry. It must be separated from @charset by exactly one space, enclosed in double quotes ("), and immediately followed by a semicolon (;). It is case-insensitive.

The @charset rule must be placed at the very beginning of the stylesheet, and no characters, including whitespace, may appear before it.
The @charset rule can only be used once in a stylesheet. If multiple @charset rules are used, only the first rule is applied.
The @charset rule is specific to stylesheets and cannot be replaced by the charset attribute of the <link> tag in an HTML document.
Stylesheets embedded in an HTML page, such as those within the <style> tag or the style attribute, share the character encoding of the entire document. Therefore, even if the @charset rule is used within the <style> tag, the stylesheet still uses the character encoding of the entire document.

# Valid and Invalid Syntax

---- Valid Syntax ----
@charset "ISO-8859-1";
@charset "utf-8"; /* Same as "UTF-8": case-insensitive */

---- Invalid Syntax ----
@charset 'ISO-8859-1'; /* Enclosed in single quotes */
@charset ISO-8859-1; /* Not enclosed in double quotes */
@charset    "ISO-8859-1"; /* More than one whitespace character after @charset */
    @charset "ISO-8859-1"; /* Characters, including whitespace, appear before the @charset rule */

Purpose of the @charset Rule

The @charset rule is used to explicitly specify the character encoding within a stylesheet, rather than relying on the encoding of an external environment that, for whatever reason, does not match the stylesheet's encoding.

It is recommended to use the standard encoding UTF-8 as the character encoding for stylesheets and HTML pages. Therefore, there is no need to use the @charset rule in stylesheets.

# Using the @charset Rule

Although it is ideal to always use UTF-8 as the character encoding for stylesheets and HTML documents, this is not always the case in practice. For example, existing systems may use different encodings, or specific requirements may mandate the use of another encoding.

It is used when a stylesheet contains non-ASCII characters and UTF-8 cannot always be used as the character encoding for the stylesheet and HTML documents.

- When UTF-8 Cannot Always Be Used as the Character Encoding for Stylesheets and HTML Pages

Even if a web server uses a different character encoding, such as ISO-8859-1, it is best practice to use the @charset rule to explicitly specify that a CSS file uses UTF-8 as its character encoding.
Even if a stylesheet file uses a character encoding other than UTF-8, it is best practice to use the @charset rule to explicitly specify the actual character encoding of the CSS file.

References

CSS @charset – Declaring Character Encoding for Stylesheets - codingCourses

The CSS @charset syntax rule is used to declare the character encoding of the stylesheet. It allows you to specify the desired character encoding for the stylesheet.

coding.courses

CSS rem and em Units – Relative Length Units for Font Size

Youn — Fri, 02 Oct 2026 05:40:35 +0000

rem and em Units

The rem and em units are both relative length units that specify size or length based on the font-size (the text size) of a particular element.

The rem unit is based on the font-size of the root element, the <html> element.
The em unit is based on the font-size of the element itself.
For the font-size property being set, the parent element's font-size is used as the reference.
For properties other than font-size, the current element's font size is used as the reference.

The rem Unit

rem stands for "root element," and this unit is a relative length unit based on the font-size of the root <html> element, with 1rem equal to the root element's font size.
For example, 1rem is equal to 1 times the <html> element's font size, and 1.5rem is equal to 1.5 times the font size.

html {
    font-size: 20px;
}
h1 {
    font-size: 2rem;
    /* 2rem = 2 * 20px = 40px
       1rem = font size of the html element (20px) */
}

# When the <html> Element's font-size Is Not Specified

What happens to 1rem if the root <html> element's font-size is not specified?

In this case, the font-size of the root <html> element is determined by the browser's default font size set by the user. Most users do not change the default browser font size. The default font size set by the browser is typically 16px, so in this case, 1rem equals 16px.

# When to Use the rem Unit

- Setting Global Styles

Use rem for the overall styling of a web page, especially for setting base font sizes, spacing, and other layout-related properties.

html {
    font-size: 16px;
}
body {
    font-size: 1rem; /* 1rem = 16px */
    margin: 1rem;    /* 1rem = 16px */
}
h1 {
    font-size: 2rem; /* 2rem = 2 * 16px = 32px */
}

- Using rem with Media Queries

In responsive web design, you can use rem together with media queries to adjust styles according to screen size.

html {
    font-size: 16px;
}

....

@media (min-width: 768px) {
    body {
        font-size: 1.25rem; /* 20px */
        /* 1.25rem = 1.25 * 16px = 20px
           1rem = font size of the current html element (16px) */
    }
}

The em Unit

em stands for "element," and this unit is based on the font size of the referenced element.

When applied to the font-size property, the parent element's font-size is used as the reference for 1em.
For properties other than font-size, the current element's font size is used as the reference for 1em.

# Applying em to the font-size Property

When you use em as the value of the font-size property, 1em equals the parent element's font size.

For example, font-size: 1em is equal to 1 times the parent element's font size, and font-size: 1.5em is equal to 1.5 times the parent element's font size.

h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 0.7em; /* 21px */
    /* 0.7em = 0.7 * 30px = 21px;
       1em = font size of the parent element (h1, 30px) */
}

# Applying em to Properties Other Than font-size

When you use em for properties other than font-size, 1em equals the current element's font size.

For example, line-height: 1em is equal to 1 times the current element's font size, and line-height: 1.5em is equal to 1.5 times the current element's font size.

h1 {
    font-size: 30px;
    line-height: 1.5em; /* 45px */
    /* 1.5em = 1.5 * 30px = 45px
       1em = font size of this element (30px) */
}

# When to Use the em Unit

- Typography-related Styles

em is useful for setting sizes or lengths based on the current element's font size. This allows you to scale values proportionally, even if you do not know the exact font size of the element.

For example, properties such as line-height and letter-spacing often use em to scale according to the current element's font size.

h1 {
    font-size: 30px;
    line-height: 1.5em; /* 45px */
    /* 1.5em = 1.5 * 30px = 45px
       1em = font size of this element (30px) */
    letter-spacing: -0.1em; /* -3px */
    /* -0.1em = -0.1 * 30px = -3px
       1em = font size of this element (30px) */
}

- Layout and Spacing Relative to Current Font Size

Using em for layout and spacing allows you to scale dimensions proportionally to the current font size. This is especially useful when the font size changes due to responsive design, as margins, padding, and other layout values will adjust automatically according to the font size.

div {
    font-size: 30px;
    padding: 1.5em;
    margin-left: 1em;
}

References

CSS rem and em Units – Relative Length Units for Font Size - codingCourses

The rem and em units are both relative length units that specify size or length based on the font-size (the text size) of a particular element.

coding.courses

HTML id Attribute – Proper Understanding and Usage

Youn — Wed, 30 Sep 2026 05:52:36 +0000

Definition and Usage

The id attribute specifies a unique identifier (ID) for an element.
The value of this attribute must be unique and distinct within the document (web page).

Basic Example

<a href="#section2">Go to Section 2</a>

<!-- Click the link above to scroll down to this element -->
<div id="section2">
  <h2>Section 2 Content</h2>
</div>

Practical Uses

The id attribute is a global attribute.
The unique identifier assigned to an element through this attribute can be used for various purposes.

1. Using a Unique CSS Selector to Style an Element

---- CSS ----
#css-selector { /* Select by id attribute value: #id-value selector */
    background-color: yellowgreen;
}

---- HTML ----
<p>Paragraph element.</p>
<p id="css-selector">Paragraph element.</p>
<p>Paragraph element.</p>
<p>Paragraph element.</p>

CSS can apply styles by selecting HTML elements in various ways.

Among these methods, you can also select an element using the value specified in the id attribute. As shown in the example above, enter the ID value after the hash symbol (#) (#css-selector).

This allows you to apply styles specifically to the element whose ID value is css-selector. In the actual result, the background color of the element is styled with yellowgreen.

2. Identifying an Element with JavaScript

<p id="txt">Welcome.</p>
<button type="button" id="btn">Click to change the text</button>

<script>
    const txt = document.getElementById("txt"); // Identify id="txt"
    const btn = document.getElementById("btn"); // Identify id="btn"

    btn.addEventListener("click", () => {
        txt.innerHTML = "Nice to meet you.";
    });
</script>

In the code example above, clicking the element with id="btn" changes the text of the element with id="txt" from "Welcome." to "Nice to meet you.".

At this point, when JavaScript identifies the

element with id="btn" or the element with id="txt", both elements are identified using the values specified in their id attributes.

3. Identifying an Element with a URL Fragment

First, let's look at what a fragment in a URL (or URI) is. A URL consists of parts such as a domain and the path commonly used to access a web page. Here is an example of a URL that includes a hash symbol (#) at the end of a typical URL.

https://www.example.com#example

Here, it refers to the #example portion highlighted in red. This is called a fragment or a hash URL.

In a URL, the fragment is the string that follows the hash symbol (#), and it corresponds to the value specified in the id attribute within the web page of that URL. When a web page with a fragment in its URL is loaded, the browser finds the element whose id attribute value matches the fragment and scrolls the page so that the element appears at the top of the visible area of the screen (called the viewport).

<a href="#section2">Go to Section 2</a>

<!-- Click the link above to scroll down to this element -->
<div id="section2">
  <h2>Section 2 Content</h2>
</div>

Naming Rules for the id Attribute Value

The value of this attribute must be unique and distinct within the document (web page).
The id attribute value must contain one or more characters with no whitespace characters (such as spaces or tabs).
It can consist entirely of numbers, start with a number, start with an underscore (_), or consist solely of punctuation marks (.). There are no other specific restrictions.
It is case-sensitive.

Things to Keep in Mind

It must be unique and distinct within the document (web page).
If there are duplicate id attribute values, unexpected errors may occur across all CSS, JavaScript, and other applications built on the assumption that the id attribute value is a unique identifier, such as when using it as a unique CSS selector to style the element, identifying it via JavaScript, or targeting it as a URL fragment identifier.

References

HTML id Attribute – Proper Understanding and Usage - codingCourses

The id attribute specifies a unique identifier (ID) for an element. The value of this attribute must be unique and distinct within the document (web page).

coding.courses

HTML class Attribute

Youn — Mon, 28 Sep 2026 05:06:07 +0000

Definition and Usage

The class attribute specifies one or more class names for an element.
Multiple elements can share the same class names, which are used by CSS and JavaScript to classify, identify, select, style, and manipulate elements.

Basic Example

<p class="alert">This is an announcement.</p>
<p class="alert caution">Proceed with caution.</p>

Practical Uses

To specify multiple class names for a single element, separate the class names with spaces in the value of the class attribute.

<p class="alert caution">Proceed with caution.</p>

In addition, multiple elements can share the same class names.

The class attribute is used for the following purposes.

In CSS, class names are used as selectors to classify, identify, select, style, and manipulate elements.
Like CSS, in JavaScript, class names are also used to classify, identify, select, style, and manipulate elements.

#Using Class in CSS

---- HTML ----
<p class="alert">This is an announcement.</p>
<p>Paragraph element.</p>
<p class="alert caution">Proceed with caution.</p>
<p>Paragraph element.</p>

---- CSS ----
.alert { /* Selects the alert class: .class selector */
    padding: 0.5em;
    background-color: gold;
}
.caution { /* Selects the caution class: .class selector */
    color: orangered;
}

The CSS .alert selector targets and styles elements whose class name is alert. In addition, the CSS .caution selector targets and styles elements whose class name is caution.

The <p class="alert caution">Proceed with caution. </p> element has two class names: alert and caution.
Because this element matches both the .alert and .caution selectors, the styles defined by both selectors are applied.

# Using Class in JavaScript

The following example contains ten <div> elements. Seven of those <div> elements have the class name box.

When the button is clicked, JavaScript identifies only the elements with the class name box and changes their text from "box class" to "Hello from the box class."

HTML
<style>
    div { /* Styles all div elements */
        padding: 0.5em;
        border: 1px solid red;
        margin-bottom: 0.5em;
    }
    .box { /* Adds a background color only to div elements with the box class */
        background-color: gold;
    }
</style>

<div class="box">box class</div>
<div class="box">box class</div>
<div class="box">box class</div>
<div class="box">box class</div>
<div>div</div>
<div>div</div>
<div class="box">box class</div>
<div class="box">box class</div>
<div>div</div>
<div class="box">box class</div>
<button id="highlight-button" type="button">Click to Change Text</button>

<script>
    const highlightButton = document.getElementById("highlight-button");

    highlightButton.addEventListener("click", () => {
        // document.querySelectorAll(".box") : Selects all elements with the class name "box"
        const boxes = document.querySelectorAll(".box");

        boxes.forEach(box => {
            box.innerHTML = "Hello from the box class.";
        });
    });
</script>

As shown in this example, JavaScript uses class names to identify, select, style, and manipulate elements.

References

HTML class Attribute – Proper Understanding and Usage - codingCourses

The class attribute specifies one or more class names for an element. Multiple elements can share the same class names, which are used by CSS and JavaScript to classify, identify, select, style, and manipulate elements.

coding.courses

HTML lang Attribute

Youn — Wed, 23 Sep 2026 02:43:45 +0000

Definition and Usage

The lang attribute specifies the primary language of an element's content and of any text-containing attributes.
Using this attribute provides language information for human-readable content that can be used by screen readers, browsers, and search engines.

Features

This is a global attribute that can be applied to any HTML element.
The lang attribute value is inherited by child elements.
The default value of the lang attribute is unknown, so it is recommended to always set this attribute to an appropriate value.
If the attribute value is an empty string (lang=""), the language is set to unknown.

Using the lang attribute provides the following benefits:

Allows screen readers to recognize the language of a web page and provide speech output in the appropriate language.
Enables browsers, such as Chrome, to automatically detect the page language for translation features.
Helps search engines identify the language of the web page and deliver search results in the corresponding language.

Examples

# Specifying the Primary Language for a Page

To set the primary language of the page text, always use the lang attribute on the root <html> tag.

<html lang="en">

# When a Page Contains Content in Another Language

If a page contains content in a different language, add the lang attribute to the tag wrapping that content.

<p>The title is "<span lang="fr">Le Bon Usage</span>".</p>

Things to Keep in Mind

# Applies to Text-Containing Attributes as Well

The lang attribute specifies the primary language not only for a tag's content but also for all text-containing attributes.

<a title="Spanish" href="qa-html-language-declarations.es">
    <span lang="es">Español</span>
</a>

# When There Is No Appropriate Markup Around the Content

<p>This content is in Chinese: <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>

References

HTML lang Attribute – Proper Understanding and Usage - codingCourses

The lang attribute specifies the primary language of an element's content and of any text-containing attributes.

coding.courses

JavaScript String slice() Function – Slice a String by Index Range

Youn — Tue, 22 Sep 2026 03:21:40 +0000

Definition and Usage

The slice() function for strings slices a string by a specified index range and returns a new string.
Using this function, you can easily slice and extract a string within the desired range.

Features

The string sliced by the specified index range is returned as a new string.
The index range is determined by the start and end parameters you specify (the end index is not included).
With this behavior, the original string remains unchanged.

Basic Example

/**
 * A function that slices a specific range of a string
 * and returns the result as a new string.
 *
 * str.slice(beginIndex[, endIndex])
 *
 * @param {number} beginIndex - The starting index of the substring to extract.
 * @param {number} endIndex - The ending index of the substring to extract (not included).
 * @returns {string} - The extracted substring.
 */

/*
 * Note:
 * In strings, indexes start at 0.
 * The first character has an index of 0, and the second character has an index of 1.
 */

const greeting = "Welcome. This is codingCourses.";

const welcome = greeting.slice(0, 7);
console.log(welcome); // Output: "Welcome"

const courseName = greeting.slice(17, 31);
console.log(courseName); // Output: "codingCourses"

/* 👇 The original string remains unchanged. */
console.log(greeting); // Output: "Welcome. This is codingCourses."

Syntax

str.slice(beginIndex[, endIndex])

str is the string to which the slice() function is applied.

Parameters

# beginIndex

If omitted, the default value is 0.
If omitted, the default value is 0.
Negative values can be used, counting backward from the end of the string.
If greater than or equal to the length of the string (str.length), no characters are extracted.

# endIndex

Optional. Specifies the index at which to end extraction.
slice() extracts characters up to, but not including this endIndex index.
If omitted, extraction continues to the end of the string.
Negative values can be used, counting backward from the end of the string.
If greater than or equal to the length of the string (str.length), extraction continues to the end of the string.

Return Value

The slice() function for strings extracts characters from the original string within the specified index range and returns them as a new string. The returned string is a copy of the selected characters, so the original string remains unchanged.

# Parameter and Return Value Examples

let str1 = "Welcome!", // The length of str1 is 8
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -1),
    str4 = str1.slice(),
    str5 = str1.slice(30);

console.log(str2); // Output: "elcome!"
console.log(str3); // Output: "ome"
console.log(str4); // Output: "Welcome!"
console.log(str5); // Output: ""

References

JavaScript String slice() Function – Slice a String by Index Range - codingCourses

The slice() function for strings slices a string by an index range and returns a new string without modifying the original string.

coding.courses

HTML cite Attribute – Referencing the Source URL

Youn — Thu, 17 Sep 2026 05:36:34 +0000

Definition and Usage

The cite attribute specifies a URL that references the source of a quote or change.

This attribute is used with tags such as <q>, <blockquote>, <ins>, and <del>.
It enhances information credibility by providing source details for quotes or changes, enabling authors and search engines to utilize this information.

Basic Example

<p>
    Tim Berners-Lee said:
    <q cite="https://example.com/example">
        The internet is a human right.
    </q>
</p>

Examples

# Using the cite Attribute with <q>

<p>
    Here is a famous quote:
    <q cite="https://www.brainyquote.com/quotes/albert_einstein_100134">
        Imagination is limitless. Knowledge is limited.
    </q>
</p>

# Using the cite Attribute with <blockquote>

<p>The following is a quotation from Wikipedia.</p>
<blockquote cite="https://en.wikipedia.org/wiki/Romeo_and_Juliet">
    <p>
        The Tragedy of Romeo and Juliet, often shortened to Romeo and Juliet,
        is a tragedy written by William Shakespeare about the romance
        between two young Italians from feuding families.
        It was among Shakespeare's most popular plays during his lifetime and,
        along with Hamlet, is one of his most frequently performed. Today,
        the title characters are regarded as archetypal young lovers.
    </p>
</blockquote>

# Using the cite Attribute with <ins>

<p>
    Here is a description of the latest update:
    <ins cite="https://example.com/changelog">
        Latest update details...
    </ins>
</p>

# Using the cite Attribute with <del>

<p>
    The following feature has been removed:
    <del cite="https://example.com/changelog">
        Details about the removed feature...
    </del>
</p>

References

HTML cite Attribute – Referencing the Source URL - codingCourses

The cite attribute specifies the source URL of a quote or change, and is used in q, blockquote, ins, and del tags. It helps authors and search engines understand the source of the quoted or modified content.

coding.courses

HTML data-* Attributes

Youn — Tue, 15 Sep 2026 05:49:13 +0000

Definition and Usage

The data-* attributes are standard HTML 'custom data attributes' beyond those predefined by HTML.
They are created by combining the data- prefix with a custom name, allowing you to store custom data in the attribute's value.

Custom data attributes are used to store custom 'data,' 'state,' 'annotations,' and similar information for a page or application.
They are standardized HTML attributes used when no other appropriate standard attribute or element exists.
As global attributes, they can be applied to any HTML element.

They are primarily used in JavaScript and CSS to add dynamic functionality or apply styling.

Basic Example

This example demonstrates how to use custom data attributes with JavaScript to display basic product information. Clicking the 'View Product Details' button displays an alert showing the product's details.

---- HTML ----
<!-- The data-* attributes are used to store product information.
     Each attribute represents:
     product name (data-name),
     price (data-price),
     stock (data-stock),
     and color (data-color).
-->
<div 
    id="product-12345"
    data-name="Sneakers"
    data-price="10000"
    data-stock="5"
    data-color="red">
    Sneakers
</div>

<!-- The button includes a data-product-id attribute
     that identifies the corresponding product ID.
-->
<button
    type="button"
    id="product-details"
    data-product-id="product-12345">
    View Product Details
</button>

---- JavaScript ----
const viewDetails = document.getElementById("product-details");

viewDetails.addEventListener("click", function() {
    const productId = this.dataset.productId;
    const product = document.getElementById(productId);

    /* Retrieves product name, price, stock, and color
       using data attributes from the product element. */
    const productName = product.dataset.name;
    const price = product.dataset.price;
    const stock = product.dataset.stock;
    const color = product.dataset.color;

    /* Combines the retrieved product information into a string
       and displays it in an alert dialog. */
    const msg = "Product Name: " + productName +
                "\nPrice: " + price + " USD" +
                "\nStock: " + stock + " pcs" + 
                "\nColor: " + color;          
    alert(msg);
});

Purpose of Use

The data-* attributes are designed to allow custom data to be added to HTML elements in a standardized way, without the need for non-standard elements, semantically inappropriate attributes, or unnecessary workarounds.
By using these attributes, developers can easily attach their own data to HTML elements in a consistent manner.

Using Data Attributes in CSS

---- HTML ----
<div 
    id="product-12345"
    data-name="Sneakers"
    data-price="10000"
    data-stock="5"
    data-color="red">
    Sneakers
</div>

---- CSS ----
[data-name] { /* Targeted using a CSS attribute selector */
    padding: 1em;
    background-color: yellowgreen;
}
[data-color="red"] { /* Targeted using a CSS attribute selector */
    color: red;
}

References

HTML data-* Attributes – Standard Custom Data Attributes - codingCourses

The data-* attributes are standard HTML 'custom data attributes' beyond those predefined by HTML. They are created by combining the data- prefix with a custom name, allowing you to store custom data in the attribute's value.

coding.courses

HTML
Tag

Youn — Thu, 10 Sep 2026 01:59:42 +0000

Definition and Usage

The <details> tag defines content that users can choose to open or close.
It is typically used to provide additional information or details. According to the specification, it represents a disclosure widget that allows users to access extra information or controls.
The <details> tag is commonly used to create interactive widgets, such as accordions, that users can expand or collapse.

Basic Example

<details>
    <summary>Summary content</summary>
    Additional information or details.
</details>

Usage Notes

To use the <details> tag effectively, you need to understand the <summary> tag.
By default, the <summary> tag displays a marker shaped like a ► arrow.

Syntax

You can include any type of content inside the <details> tag, but using the <summary> tag indicates the title (summary content). If the <summary> tag is omitted, the user agent (such as a browser) provides its own default title (e.g., "Details").

Example with the <summary> Tag

<details>
    <summary>Summary content</summary> <!-- The <summary> tag represents the title -->
    Additional information or details.
</details>

Example without the <summary> Tag

<details>
    Additional information or details.
</details>

The open Attribute

The open attribute is a boolean attribute.
When this attribute is present, both the summary and the additional content are visible to the user. If the attribute is omitted, only the summary is shown.
By default, the widget is collapsed. When it is expanded, the content becomes visible. If desired, the open attribute can be used to keep the widget open by default.

<details open> <!-- The widget is open by default when the open attribute is present -->
    <summary>Summary content</summary>
    Additional information or details.
</details>

References

HTML <details> Tag – The Details Disclosure Element - codingCourses

The details tag defines content that users can choose to open or close. It is commonly used to provide additional or detailed information. This article also covers the open attribute used with the details tag.

coding.courses

HTML

Youn — Tue, 08 Sep 2026 05:07:09 +0000

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

HTML

Youn — Thu, 03 Sep 2026 03:10:29 +0000

Definition and Usage

The rel="preconnect" attribute of the <link> tag specifies that the browser should preemptively establish a connection to the external domain specified by the href attribute.

<link rel="preconnect" href="https://another-domain.com">

This allows the browser to reduce the time required to establish a connection to an external domain, making it faster to load resources from that domain (such as images, scripts, and fonts).

Before requesting resources from an external domain, the browser performs several connection steps:

It looks up the domain name to find the server's IP address. This is called a DNS (Domain Name System) lookup.
After confirming the IP address, it establishes a connection to exchange data with the server. This is called a TCP (Transmission Control Protocol) connection.
If a secure connection such as HTTPS is required, the browser establishes a secure connection via a TLS (Transport Layer Security) handshake.

These connection processes can vary depending on network conditions and may introduce a certain amount of latency when the browser first requests resources from an external domain.

Preconnecting to External Domains

The <link> tag's rel="preconnect" attribute allows the browser to establish a connection in advance to the external domain specified by the href attribute. This allows the browser to reduce the time required to establish a connection to an external domain, making it faster to load resources from that domain.

The simplest way to preconnect to an external domain is to add the <link> tag to the document's <head> tag.

<head>
    ...
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">
    ...
</head>

The example above connects a stylesheet provided by Google to use Google Web Fonts.

The URL (https://fonts.googleapis.com) of the stylesheet provided by Google is an external domain. In the example above, the rel="preconnect" attribute of the <link> tag is used to specify that the browser should establish a connection in advance to the https://fonts.googleapis.com domain.

By specifying the external domain to preconnect to with the rel="preconnect" attribute of the <link> tag before requesting external resources, the browser prepares a connection to that domain in advance, reducing the time required to load resources afterward. You can repeat the above code for each external domain you want to preconnect to.

Important Considerations

# Apply Only to Necessary External Domains

The rel="preconnect" attribute of the <link> tag is quite useful, but applying it to every external domain can be counterproductive. This is because it can create unnecessary overhead for the browser and reduce the actual benefits of preconnecting. Be careful not to preconnect to too many external domains.

If you need to preconnect to many external domains, using the rel="dns-prefetch" attribute of the <link> tag is recommended.

The rel="dns-prefetch" attribute of the <link> tag can reduce DNS lookup time by allowing the browser to perform the DNS lookup, which is the first step in connecting to an external domain, in advance. Therefore, compared to the rel="preconnect" attribute of the <link> tag, it requires fewer connection-related tasks from the browser and can reduce the negative impact (such as performance degradation) on initial loading performance when used for multiple external domains.

# No Effect on the Same Domain

The rel="preconnect" attribute of the <link> tag saves the time required to establish a connection to an external domain. Because the same domain is already connected, preconnecting to it has no effect.

References

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

The rel="preconnect" attribute of the link tag specifies that the browser should preemptively establish a connection to the external domain specified by the href attribute.

coding.courses

HTML

Youn — Tue, 01 Sep 2026 02:13:33 +0000

Definition and Usage

The rel="dns-prefetch" attribute of the <link> tag specifies that the browser should preemptively perform DNS resolution for the external domain specified by the href attribute and cache IP address and other information required for connection.
This reduces latency when the browser connects to that domain, thereby improving connection speed.

<link rel="dns-prefetch" href="https://another-domain.com">

The rel="dns-prefetch" attribute of the <link> tag is used to improve connection speed when the current web page needs to connect to external domains.
There are many cases where a web page needs to connect to external domains.

When connecting to Google's service domain to use web fonts provided by Google
When connecting to the corresponding domain to add external libraries or scripts to a web page
When using externally hosted images or media on a web page

In these cases, using <link rel="dns-prefetch">
can improve page loading speed by allowing the page to connect to the corresponding external domains more quickly.

Usage Notes

# DNS Resolution for a Domain

Users remember websites by domain names, but servers identify them by IP addresses.
This is why DNS (Domain Name System) exists.
Browsers use DNS to convert a domain name into its corresponding IP address. This process is performed first when connecting to a domain. For example, suppose you link a CSS file provided by Google to use web fonts on your page. This file is located at an external domain path, https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap.

<head>
    ...
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">
    ...
</head>

Using <link rel="dns-prefetch">
performs DNS resolution for the linked domain in advance and caches IP address and other information required for connection, saving DNS resolution time for the domain.

# How to Implement

The simplest way to implement rel="dns-prefetch" with the <link> tag is to add the <link> tag to the document's <head> tag.

<head>
    ...
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">
    ...
</head>

This allows the browser to perform DNS resolution required to load Google web fonts in advance, which can improve page loading speed.
You can repeat the above code for each external domain you want to connect to.

# Important Considerations

- Not Supported by All Browser

The rel="dns-prefetch" attribute of the <link> tag is supported by many modern browsers, but it may not be supported by older browsers or some browsers.

- Do Not Overuse

Using the rel="dns-prefetch" attribute of the <link> tag for all external domains is not recommended. It should only be used when necessary. Excessive DNS lookups can consume unnecessary resources. This unnecessary resource consumption can cause the browser to operate inefficiently. In general, you should try not to perform more than 10 DNS lookups.

- Do Not Apply to Unused External Domains

Do not use it for external domains that are not even used on the current page.
This is simply wasteful and only causes unnecessary resource consumption by performing DNS lookups for domains that are not actually needed. This can cause the browser to operate inefficiently.

- rel="dns-prefetch" Can Only Be Used With the <link> Tag

The rel="dns-prefetch" attribute can only be used with the <link> tag.

- Performance Improvement May Be Minimal.

The rel="dns-prefetch" attribute of the <link> tag can help improve web page loading speed, but the actual perceived speed improvement may be minimal. In particular, the effect may not be significant when the user's internet connection speed is slow or when the web page size is large.

References

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

The rel="dns-prefetch" attribute of the link tag specifies that the browser should preemptively perform DNS resolution for the external domain specified by the href attribute and cache IP address and other information required for connection.

coding.courses

DEV Community: Youn

CSS @charset – Declaring Character Encoding for Stylesheets

@charset Rule

Syntax

# Valid and Invalid Syntax

Purpose of the @charset Rule

# Using the @charset Rule

- When UTF-8 Cannot Always Be Used as the Character Encoding for Stylesheets and HTML Pages

References

CSS rem and em Units – Relative Length Units for Font Size

rem and em Units

The rem Unit

# When the <html> Element's font-size Is Not Specified

# When to Use the rem Unit

- Setting Global Styles

- Using rem with Media Queries

The em Unit

# Applying em to the font-size Property

# Applying em to Properties Other Than font-size

# When to Use the em Unit

- Typography-related Styles

- Layout and Spacing Relative to Current Font Size

References

HTML id Attribute – Proper Understanding and Usage

Definition and Usage

Basic Example

Practical Uses

1. Using a Unique CSS Selector to Style an Element

2. Identifying an Element with JavaScript

3. Identifying an Element with a URL Fragment

Naming Rules for the id Attribute Value

Things to Keep in Mind

References

HTML class Attribute

Definition and Usage

Basic Example

Practical Uses

#Using Class in CSS

# Using Class in JavaScript

References

HTML lang Attribute

Definition and Usage

Features

Using the lang attribute provides the following benefits:

Examples

# Specifying the Primary Language for a Page

# When a Page Contains Content in Another Language

Things to Keep in Mind

# Applies to Text-Containing Attributes as Well

# When There Is No Appropriate Markup Around the Content

References

JavaScript String slice() Function – Slice a String by Index Range

Definition and Usage

Features

Basic Example

Syntax

Parameters

# beginIndex

# endIndex

Return Value

# Parameter and Return Value Examples

References

HTML cite Attribute – Referencing the Source URL

Definition and Usage

Basic Example

Examples

# Using the cite Attribute with <q>

# Using the cite Attribute with <blockquote>

# Using the cite Attribute with <ins>

# Using the cite Attribute with <del>

References

HTML data-* Attributes

Definition and Usage

Basic Example

Purpose of Use

Using Data Attributes in CSS

References

HTML Tag

Definition and Usage

Basic Example

HTML
Tag