DEV Community: Youn

JavaScript Spread Syntax – Proper Understanding and Usage

Youn — Tue, 27 Oct 2026 01:48:51 +0000

Definition and Usage

The spread syntax in JavaScript allows you to individually expand (spread) the items of an object that can be iterated over by value—such as arrays, strings, or DOM collections.
The Spread Syntax is also known as the 'Spread Operator'.
Using the Spread Syntax allows you to easily copy or merge items from arrays or objects.
It enables you to write more concise and simpler code, making it very convenient.

Spread Syntax Format

The Spread Syntax is very simple.
It takes the form of three dots (...) followed by an object that can be iterated over by value—such as an array, string, or DOM collection.

Basic Example

The following example demonstrates how to easily merge two arrays using the Spread Syntax. As shown in the example, the Spread Syntax allows you to easily copy or merge arrays or objects, enabling you to write shorter and simpler code.

const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArr = [...arr1, ...arr2];  // Merging arrays

console.log(mergedArr);  // [1, 2, 3, 4]

Targets for Using the Spread Syntax

The spread syntax can only be used on objects that can be iterated over by value.
Objects that can be iterated over by value—that is, the targets on which the spread syntax can be used—are as follows:

Arrays, strings, Map, Set, and other objects with Iteration Protocols applied
HTMLCollection and NodeList objects, which are DOM collections
Certain array-like objects such as arguments
User-defined objects with Iteration Protocols applied

# Using the Spread Syntax with Object Literals

Plain objects, such as those created with object literals, can be iterated over by their keys, but not by their values.

This means they are not direct targets for the spread syntax. However, starting from ECMAScript 2018 (ES9), the spread syntax can be used inside object literals to expand the properties of another object literal for merging or copying.

Practical Examples

# Extending Arrays

The Spread Syntax is very convenient for merging or expanding the elements of an array. You can easily copy elements from an existing array to a new array, add new elements, or merge with another array.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Merging two arrays
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

// Expanding the array by adding new elements
const extendedArray = [...arr1, 4, 5];
console.log(extendedArray); // Output: [1, 2, 3, 4, 5]

# Passing Arguments to Functions

You can use the Spread Syntax to pass arrays or argument lists when calling functions. This allows you to pass individual arguments from an array, even when the function accepts a variable number of arguments.

function sum(a, b, c) {
    return (a + b + c);
}

const numbers = [1, 2, 3];

const result = sum(...numbers); // Equivalent to sum(1, 2, 3)
console.log(result); // Output: 6

# Handling DOM with NodeList

Using the Spread Syntax, beginners can more easily work with DOM objects like NodeList. NodeList is a collection of DOM elements that has an array-like object that has an array-like structure, but due to certain behaviors (such as not directly supporting array methods), it can be tricky for beginners.

The Spread Syntax simplifies converting a NodeList into an array or merging it with other arrays.

// Select all elements with the .item class in the HTML document
const items = document.querySelectorAll(".item");  // Returns a NodeList

// Convert the NodeList to an array using the Spread Syntax
const itemsArray = [...items];  

// Now that itemsArray is an array, you can use array methods
itemsArray.forEach(item => {
    console.log(item.textContent);  // Output text content of each .item element
});

// Merging with another array
const newItems = ["New Item 1", "New Item 2"];
const allItems = [...itemsArray, ...newItems];  // Merging the NodeList with the new array

console.log(allItems);  // NodeList + new array

References

JavaScript Spread Syntax – Proper Understanding and Usage - codingCourses

The spread syntax (also called the "spread operator") in JavaScript allows you to individually expand (spread) the items of an object that can be iterated over by value—such as arrays, strings, or DOM collections.

coding.courses

JavaScript undefined Value – Overview and Proper Understanding

Youn — Mon, 19 Oct 2026 06:19:21 +0000

Definition and Usage

The undefined value is the initial value automatically assigned by the JavaScript engine to indicate that a variable has not been assigned a value.

In other words, before a value is assigned to a variable, the JavaScript engine assigns undefined as the variable's initial value.

Therefore, referencing a variable after it has been declared but before a value is assigned returns undefined. However, if a value is assigned to the variable, the assigned value is returned instead of undefined.

# undefined in Regular Variables

let x;
console.log(x); // undefined

Assigning a value returns the assigned value.

let x;
console.log(x); // undefined

/* Assigning a value returns the assigned value. */
x = 1;
console.log(x); // 1

# undefined in Functions

In JavaScript, functions can also be treated as values.
If a function does not return a value using the return keyword after execution, it returns undefined.
If a value is returned using the return keyword, that value is returned.

function x(a, b) {
    a + b; // No value returned via the return keyword
}

console.log(x(1, 2)); // undefined

function y(a, b) {
    return a + b; // A value is returned via the return keyword
}

console.log(y(1, 2)); // 3

# undefined in Objects

Referencing a non-existent property on an object also returns undefined.

const obj = {};
console.log(obj.prop); // undefined

Creating a property and assigning a value returns the assigned value.

const obj = {};
console.log(obj.prop); // undefined

/* Create a property and assign a value */
obj.prop = 1;
console.log(obj.prop); // 1

# undefined in Arrays

Referencing a non-existent element on an array also returns undefined.

let arr = [];
console.log(arr[0]); // undefined

Assigning a value to the array returns the assigned value.

let arr = [];
console.log(arr[0]); // undefined

/* Assign a value to the array */
arr[0] = 1;
console.log(arr[0]); // 1

# Data Type of undefined

The data type of the undefined value is Undefined.
In JavaScript, you can check the data type of a variable using the typeof operator.

let x;
console.log(typeof x); // "undefined"

This means that undefined is a value with a unique data type.

# Evaluating undefined in Conditional Statements

The following example shows how the undefined value is evaluated in a conditional statement.

let x;

if (x === undefined) {
    console.log("Evaluates to true.");
} else {
    console.log("Evaluates to false.");
}
// Output: "Evaluates to true."

However, when the undefined value is evaluated as the boolean type, it is false.

let x;

if (x) {
    console.log("Evaluates to true.");
} else {
    console.log("Evaluates to false.");
}
// Output: "Evaluates to false."

// Evaluate using the Boolean() function
console.log(Boolean(x)); // false

References

JavaScript undefined Value – Overview and Proper Understanding - codingCourses

The undefined value is the initial value automatically assigned by the JavaScript engine to indicate that a variable has not been assigned a value.

coding.courses

CSS * Selector – Selects All Elements

Youn — Fri, 16 Oct 2026 06:30:35 +0000

Definition and Usage

The * selector (asterisk, also known as the universal selector) selects all elements in the document.

Basic Example

* {
    color: #222222;
}

Note

The * selector applies to actual elements in the document, and pseudo-elements generated by CSS (such as ::before and ::after) are not included. This is because pseudo-elements are not actual elements in the document.

Using with Other Selectors

---- CSS ----
section * { /* Select all descendant elements of the section element */
    background-color: gold;
}

---- HTML ----
<section>
    <h3>Section title</h3>
    <p>Section content</p>
</section>

In the example above, section * selects all elements inside the <section> element. The * selector can be used in combination with other selectors.

Common Use Cases of the * Selector

The * selector, which selects all elements in HTML, is commonly used to remove user agent styles—the default styles built into the browser—before any custom CSS is applied.

For example, elements such as <h1>~<h6> and <p> have margin-top and margin-bottom applied as default styles by the browser, even without custom CSS. The * selector is commonly used to reset these built-in browser styles.

If you do not reset these default browser styles, unexpected styling may occur because you might not account for the browser's default settings when styling the actual web page. This can make CSS styling highly inconvenient.

The following CSS example shows how to reset the default margin and padding from all elements and then apply custom styles to specific elements.

/* Reset default styles built into the browser */
* {
    padding: 0;
    margin: 0;
}

/* Apply custom styles */
p {
    margin-top: 0.5em;
    margin-bottom: 1em;
}
button {
    padding: 0.5em 1.5em;
}

References

CSS * Selector – Selects All Elements - codingCourses

The * selector (asterisk, also known as the universal selector) selects all elements in the document.

coding.courses

How to Apply and Link CSS to HTML

Youn — Wed, 14 Oct 2026 07:09:04 +0000

Two Ways to Apply CSS Directly to HTML

1. Applying CSS with an Internal Stylesheet – Using the <style> Tag

An internal stylesheet is a method of applying CSS directly to an HTML document by placing CSS rules inside the <style> tag, instead of using an external CSS file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>style Tag</title>
        <style> /* The area where CSS styles can be written */
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            The style tag represents an area where CSS styles can be
            written in an HTML document.
        </p>
    </body>
</html>

# Where to Place the <style> Tag

The <style> tag is used in an HTML document to create an area for CSS rules that specify the styles of the elements you want to style.

Unless it is an explicit exception specified by the HTML standard, there are no particular restrictions on where the <style> tag can be placed. However, because HTML documents are rendered from top to bottom, the <style> tag should be placed before the elements to be styled. Otherwise, the elements to be styled may be rendered first and then have CSS applied to them, causing their styles to suddenly change from the user's perspective, much like the screen is flickering...

However, it is very important to use structural markup in an HTML document.
The elements that are displayed on the screen, including the elements the author wants to style, are located within the <body> tag. This is the basic structure of HTML.

When the <style> tag is placed inside the <head> tag, it helps you understand the structure of the HTML document because the document's structure does not become more complex, and it is easier to recognize the location of the <style> tag. This makes it more convenient in various ways when specifying the styles of elements and working with the HTML document.

# Using Multiple <style> Tags

ultiple <style> tags can be included in an HTML document.
When styling, you can divide your CSS rules among multiple <style> tags based on convenience, readability, the elements or characteristics being styled, and other considerations.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Using Multiple style Tags</title>
        <style>
            /* Desktop */
            h1 {
                color: white;
                background-color: black;
            }
            p {
                color: gray;
            }
        </style>
        <style>
            /* Mobile */
            @media (max-width: 500px) {
                h1 {
                    font-size: 1.8em;
                }
                p {
                    font-size: 0.9em;
                }
            }
        </style>
    </head>
    <body>
        <h1>Using Multiple style Tags</h1>
        <p>
            Multiple style tags can be included in an HTML document.
        </p>
    </body>
</html>

2. Applying CSS with Inline Styles – Using the style Attribute

Inline styles refer to applying styles only to a specific element by using the style attribute within the element to which CSS is applied.

<h2 style="color: white; background-color: black;">
    style Attribute
</h2>
<p style="color: gray;">
    Inline styles refer to applying styles only to a specific element
    by using the style attribute within the element to which CSS is applied.
</p>

Inline styles, which apply styles directly to an element, are generally best avoided.

They are difficult to maintain, and you may need to use the same styles multiple times throughout the document. Also, because CSS is written directly within the elements of an HTML document, CSS information and HTML structural information are mixed together, making the code less readable and harder to understand.

In addition, because properties and values are listed directly without using CSS selectors, pseudo-classes such as :hover and :focus, or pseudo-elements such as ::before and ::after, cannot be used.

However, there are cases where inline styles must be used.
When using an HTML template to send email, only inline styles can be applied to the corresponding HTML template. This is because email does not support most other methods of applying CSS due to important security policies.

1. Applying CSS with an External Stylesheet – Using the <link> Tag

Linking an external CSS file to HTML is the most common and useful method.
You can link a single CSS file or multiple CSS files.

An external CSS file must be created as a separate file with the .css extension, and the HTML <link> tag is used to link it.

The <link> tag uses the rel attribute to specify the link relationship with an external resource, and the href attribute to specify the URL of the external resource to be linked. rel="stylesheet" is used to link a CSS stylesheet to an HTML document. CSS stylesheets are used to apply styles to HTML documents.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Depending on convenience, readability, and the elements or characteristics being styled, you can also link multiple CSS files:

<head>
    <link rel="stylesheet" href="styles1.css">
    <link rel="stylesheet" href="styles2.css">
    <link rel="stylesheet" href="styles3.css">
</head>

2. Applying CSS with an External Stylesheet – Using the `@import` Rule in a <style> Tag

The @import rule allows you to import one stylesheet into another.

The syntax of the @import rule is as follows:

@import url("URL of the external CSS file");
@import url("URL of the external CSS file") list-of-media-queries;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>style Tag</title>
        <style> /* The tag that provides an area for writing CSS rules */
            @import url("sheet.css");
        </style>
    </head>
    <body>
        ....
    </body>
</html>

Like the <link> tag, you can use the @import rule to link multiple external stylesheets.

<style>
    @import url("sheet1.css");
    @import url("sheet2.css");
    @import url(sheet3.css);
</style>

One thing to keep in mind is that when using the @import rule, it must precede all other types of rules except the @charset rule.

<style>
    @import url("sheet2.css"); /* @import must come first. */
    h1 {color: red;}
    p {color: blue; background-color: yellow;}
    table td, 
    table th {border: 1px solid #000000;}  
</style>

References

How to Apply and Link CSS to HTML - codingCourses

Learn about the different ways to apply and link CSS to HTML, along with the characteristics of each method.

coding.courses

CSS !important – Overriding Style Priority

Youn — Mon, 12 Oct 2026 05:26:07 +0000

!important Declaration

When defining CSS styles, certain properties may be critical enough to require precedence over others. In such cases, the !important keyword is used to indicate that a specific declaration carries more weight than a standard property: value;.

In CSS, this is known as an important declaration. It is implemented by adding !important before the semicolon (;) at the end of a declaration, as in property: value !important;.

When !important is applied to a property value, it overrides the standard cascade rules, causing the specified value to take precedence over other declarations.

Overriding Style Priority

<style>
    #myid {
        background-color: red;
    }
    .important-background {
        background-color: yellowgreen !important; /* !important declaration */
    }
</style>
<p id="myid" class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>

As shown in the demo above, although the #myid selector has higher specificity than .important-background, the value of the background-color property is applied as yellowgreen.

This occurs because the !important declaration overrides the cascade, causing the specified property value to take precedence over other declarations.

Things to Watch Out For

# Multiple !important Declarations on the Same Property

<style>
    #myid {  /* specificity = 0,1,0,0 */
        background-color: red !important;
    }
    .important-background {  /* specificity = 0,0,1,0 */
        background-color: yellowgreen !important;
    }
</style>

<p id="myid" class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>

As shown in the example above, when multiple !important declarations are applied to the same property of the same element, they are assigned equal importance. In this case, standard cascade rules apply, and the value from the selector with higher specificity is used.

# Prohibition Inside @keyframes Blocks

The !important declaration is ignored when used within @keyframes blocks.

<style>
    .important-background {
        animation: bg-animation 3s infinite both;
    }
    @keyframes bg-animation {
        0% {
            background-color: red !important;
        }
        100% {
            background-color: yellowgreen;
        }
    }
</style>

<p class="important-background">
    CSS !important Usage – Overriding Style Priority
</p>

In the example above, background-color: red !important; is defined inside a @keyframes block. In this context, the !important keyword is ignored, and the declaration behaves as a normal property assignment.

Consequently, the animation proceeds as expected, transitioning to background-color: yellowgreen; at the 100% mark.

When Should You Use !important?

Overriding inline styles that cannot be modified.
In particular, when CSS is applied via JavaScript using the style attribute, it is treated as an inline style. In such cases, using !important is useful when you want to prevent those styles from being overridden.
Overriding highly specific CSS rules when no better alternative exists.

References

CSS !important – Overriding Style Priority - codingCourses

Append the !important keyword before the semicolon (;) at the end of a CSS declaration to override the cascade, causing the specified value to take precedence over other styles.

coding.courses

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

DEV Community: Youn

JavaScript Spread Syntax – Proper Understanding and Usage

Definition and Usage

Spread Syntax Format

Basic Example

Targets for Using the Spread Syntax

# Using the Spread Syntax with Object Literals

Practical Examples

# Extending Arrays

# Passing Arguments to Functions

# Handling DOM with NodeList

References

JavaScript undefined Value – Overview and Proper Understanding

Definition and Usage

# undefined in Regular Variables

# undefined in Functions

# undefined in Objects

# undefined in Arrays

# Data Type of undefined

# Evaluating undefined in Conditional Statements

References

CSS * Selector – Selects All Elements

Definition and Usage

Basic Example

Note

Using with Other Selectors

Common Use Cases of the * Selector

References

How to Apply and Link CSS to HTML

Two Ways to Apply CSS Directly to HTML

1. Applying CSS with an Internal Stylesheet – Using the <style> Tag

# Where to Place the <style> Tag

# Using Multiple <style> Tags

2. Applying CSS with Inline Styles – Using the style Attribute

1. Applying CSS with an External Stylesheet – Using the <link> Tag

2. Applying CSS with an External Stylesheet – Using the @import Rule in a <style> Tag

References

CSS !important – Overriding Style Priority

!important Declaration

Overriding Style Priority

Things to Watch Out For

# Multiple !important Declarations on the Same Property

# Prohibition Inside @keyframes Blocks

When Should You Use !important?

References

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

2. Applying CSS with an External Stylesheet – Using the `@import` Rule in a <style> Tag