DEV Community: Youn

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

HTML

Youn — Fri, 28 Aug 2026 03:23:33 +0000

Definition and Usage

The rel="prefetch" 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. It is used to prefetch and cache pages that the user is likely to navigate to next from the current page, or resources loaded after the page has finished loading (such as scripts, images, and CSS files).

<link rel="prefetch" href="/app/module.css">

By doing this, resources expected to be used in the future are cached in advance.
When these resources are used later after the web page has loaded, there is no need to load them over the network from scratch, which saves loading time.

Usage Notes

# Prefetch

Understanding the term "prefetch" makes it easier to understand <link rel="prefetch"> and helps you better figure out how to use it.

"prefetch" refers to caching necessary data (or resources) in advance before they are needed, and then immediately using the cached version when needed. This helps speed up the loading and use of data and resources.

The <link rel="prefetch"> is the way this prefetching concept is applied in HTML.

# How to Implement

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

Specify the resource path as the value of the href attribute.

<head>
    ...
    <link rel="prefetch" href="/app/module.js">
    <link rel="prefetch" href="/app/module.css">
    ...
</head>

You can use multiple <link> tags with rel="prefetch" in a single document.

# Important Considerations

There are several important considerations when using the rel="prefetch" attribute of the <link> tag.

- Apply Only to Resources Needed Later

Instead, <link rel="prefetch"> fetches pages that the user is likely to visit later, or resources needed after the page has finished loading, and stores them in the browser's cache. This can potentially speed up page loading when those resources are needed later, since they are already stored in the local cache.

- Distinguishing Between Same-Origin and Cross-Origin Resources

For example, assume that the URL of a web page is https://example.com/page-1.html.

In addition to https://example.com/styles.css from the same domain, resources from an external domain, such as https://other-domain.com/image.png, can also be prefetched using . However, when fetching resources from an external domain, appropriate CORS configuration is required depending on the browser's security policies.

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

The rel="prefetch" attribute can only be used with the <link> tag.
Using this attribute with tags other than the <link> tag, such as <a>, <img>, <video>, and <meta> tags, has no effect.

- Avoid Using Multiple <link rel="prefetch"> Tags for the Same Resource

Using multiple <link rel="prefetch"> tags for the same resource is not efficient and may put an unnecessary burden on the browser. If multiple prefetch requests occur at the same time, they can result in unnecessary network traffic and inefficient use of the browser's cache memory.

- <link rel="prefetch"> Does Not Affect JavaScript's onload Event

The JavaScript onload event occurs after all page resources have been loaded and the DOM tree has been fully constructed. The onload event is designed to occur after the DOM tree has been fully constructed and all resources have been loaded.

Resources prefetched using <link rel="prefetch"> do not affect DOM tree construction or the loading of other resources, so they do not affect when the onload event is triggered.

Therefore, when using the onload event to determine whether page loading has completed, there is no need to consider resources prefetched using <link rel="prefetch">.

- <link rel="prefetch"> Does Not Work Recursively

Practical Examples

# Prefetching the Next Page

While the user is visiting the current page, required resources for the next page can be prefetched to minimize the time required to navigate to that page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Prefetching the Next Page</title>
        <link rel="prefetch" href="next-page.html">
    </head>
    <body>
        <h1>Current Page</h1>
        <a href="next-page.html">Go to the next page</a>
    </body>
</html>

# Optimizing Asynchronous Component Loading

In web applications, asynchronously loaded components can be prefetched to minimize loading delays when users request those features.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Optimizing Asynchronous Component Loading</title>
        <!-- Prefetch an asynchronously loaded component -->
        <link rel="prefetch" href="async-component.js">
    </head>
    <body>
        <h1>Current Page</h1>
        <p>
            To load the asynchronous component,
            click <button id="load-component">here</button>.
        </p>
        <script>
            const btn = document.getElementById("load-component");

            btn.addEventListener("click", () => {
                // Load the component asynchronously
                import("async-component.js").then(module => {
                    // Use the loaded component
                });
            });
        </script>
    </body>
</html>

References

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

The rel="prefetch" 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.

coding.courses

HTML hidden Attribute

Youn — Mon, 24 Aug 2026 05:34:37 +0000

Definition and Usage

The hidden attribute indicates that an element is hidden, meaning it is not visually rendered and is not accessible to screen readers.
Use this attribute when the element's content should not be presented to the user.

The hidden attribute is a global attribute that can be used on any HTML element.
It is a Boolean attribute, meaning you only need to include the attribute name without specifying a value.

Basic Example

<style>
    p {
        padding: 1em;
        border: 1px solid #cdcd4c;
        border-radius: 0.5em;
        background-color: beige;
    }
</style>
<p>
    This content is important and should be read right away.
    <br>
    I'm really glad you found it! 😃
</p>

<!--
    As a Boolean attribute,
    only the attribute name is included
    without specifying a value.
-->
<p hidden>
    This content is not currently relevant to this page and should not be displayed.
    <br>
    There's nothing to see here. 😥
</p>

Features

They are not displayed on the screen.
They do not take up any space in the layout.
They are hidden from all forms of presentation, including screen readers and other assistive technologies.

The Difference Between Using the HTML hidden Attribute and CSS display: none

# HTML hidden

Used to explicitly define in the HTML that the content is currently irrelevant and should not be presented to the user.
(Semantic Importance)

# CSS display: none

Used primarily to hide an element visually as a matter of styling.
(Presentational Importance)

References

HTML hidden Attribute – Proper Understanding and Usage - codingCourses

The hidden attribute indicates that an element is hidden, meaning it is not visually rendered and is not accessible to screen readers. Use this attribute when the element's content should not be presented to the user.

coding.courses

HTML title Attribute

Youn — Fri, 21 Aug 2026 03:58:31 +0000

Definition and Usage

The title attribute represents advisory information about the element, such as guidance or descriptive notes.
In some desktop browsers, this information is displayed as a tooltip. The value of the attribute is text.
The title attribute is a global attribute that can be applied to any HTML element.

Features

On links, it can serve as a title or provide a description of the target resource.
On images, it can provide image credits or supplementary information about the image.
On paragraphs, it can serve as a footnote or commentary on the text.
On interactive content, it can provide a label or instructions for using the element.
It provides advisory information to enhance accessibility of other web content.

Practical Examples

# Usage on Links

On links, the title attribute can provide additional description or a title for the target resource.

<a href="https://www.example.com" title="Go to the official website">Example Website</a>

# Usage on Images

For images represented with the <img> tag, the title attribute can provide important supplementary information or image credits.

<img src="example.jpg" alt="Example image" title="Additional information about this example image">

# Usage on Paragraphs

On paragraphs, the title attribute can provide footnotes or commentary on the text.

<p>Let's learn <abbr title="Hypertext Markup Language">HTML</abbr> in a fun and easy way!</p>

# Usage on Interactive Content

For interactive elements, the title attribute can provide a label or instructions for using the element.

<button title="Click this button to confirm.">Confirm</button>

# Advisory Information for Accessible Content

It also provides advisory information to enhance accessibility, helping users understand and interact with web content via screen readers or other assistive technologies.

<div title="This section is important.">
    <p>This part of the page contains key content.</p>
</div>

<iframe title="Wikipedia page about HTML language" src="https://en.wikipedia.org/wiki/HTML"></iframe>

Purpose of the title Attribute

# Using Tooltips

The title attribute is often used to provide a tooltip for an element. When a user hovers their mouse over the element, the browser displays the text specified in the title attribute as a tooltip, providing additional information or explanation about the element.

# Improving Web Accessibility

The title attribute can help improve the accessibility of a web page. Users with visual or functional limitations, particularly those using screen readers, can obtain information about elements through the title attribute.

# Providing Additional Information

The title attribute can provide supplementary information for various elements, such as image credits, link destinations, paragraph footnotes, citation sources, or button actions.

References

HTML title Attribute – Proper Understanding and Usage - codingCourses

The title attribute represents advisory information about the element, such as guidance or descriptive notes.

coding.courses

HTML contenteditable Attribute

Youn — Fri, 21 Aug 2026 03:16:19 +0000

Definition and Usage

The contenteditable attribute specifies whether the content of an element is editable.
When set to true, the content of the element can be edited. When set to false, the content cannot be edited.
The contenteditable attribute is one of the global HTML attributes that allows users to directly edit the text or content inside the element.
Using this attribute enables simple text editing on a web page. Combined with JavaScript, it is possible to build inline text editors.

Basic Example

<div contenteditable="true" style="padding: 15px; background: #eee; border-radius: 5px;">
    Try editing this content directly.
</div>

Syntax

<element contenteditable="true|false|plaintext-only">

Values

true : Enables the content of the element to be editable by the user. When the user clicks or focuses on the element, they can modify the text.
"" (empty string) : Treated the same as true. An empty string value makes the content editable.
false : Disables editing of the element's content. The user cannot click or modify the text inside the element.
plaintext-only : Editing is limited to plain text. Formatting such as HTML tags, CSS styles, and JavaScript code will not take effect.

Things to Keep in Mind

As you can see from the allowed values, the contenteditable attribute is not a boolean attribute. It is an enumerated attribute.
If no value is provided, it is treated as an empty string (""), which is equivalent to true.

Elements Where the contenteditable Attribute Does Not Apply

<input>
<textarea>

References

HTML contenteditable Attribute – Making HTML Elements Editable - codingCourses

The contenteditable attribute specifies whether the content of an element is editable. When set to true, the content becomes editable. When set to false, editing is disabled.

coding.courses

Most Commonly Used Kaomoji List

Youn — Wed, 19 Aug 2026 06:58:07 +0000

Kaomoji List by Emotion and Situation

Here is a list of the most commonly used kaomojis (Japanese text emoticons), organized by emotion and situation.

# Retro and Minimalist

;)
^_~
;-)
:)
^_^
^_____^
:-)
:D
^0^
:-D
:(
:-(
U_U
OwO
O.O
^o^
^3^
X_X
T_T
+_+
O_O
¬_¬
=.=
^_+
^.^
*_*
^^;
^_-
-_-

# Happiness

ヾ(≧▽≦*)o
φ(*￣0￣)
q(≧▽≦q)
ψ(｀∇´)ψ
（￣︶￣）↗
*^____^*
(～￣▽￣)～
( •̀ ω •́ )✧
[]~(￣▽￣)~*
φ(゜▽゜*)♪
o(*^＠^*)o
O(∩_∩)O
(✿◡‿◡)
(*^▽^*)
（*＾-＾*）
(*^_^*)
(❁´◡`❁)
(≧∇≦)ﾉ
(●ˇ∀ˇ●)
\^o^/
(‾◡◝)
╰(*°▽°*)╯
o(*￣▽￣*)ブ
(^_-)db(-_^)
♪(^∇^*)
(≧∀≦)ゞ
o(*￣︶￣*)o
( $ _ $ )
(☆▽☆)
ㄟ(≧◇≦)ㄏ
( *︾▽︾)
ƪ(˘⌣˘)ʃ
o(*￣▽￣*)o
♪(´▽｀)
(^0^* )
(≧∇≦)/
ヽ(○･▽･○)ﾉ♪
♪(´▽｀)ノ
\(^o^)/
(ﾉ^o^)ﾉ
ヽ(°〇°)ﾉ

# Greetings

ヾ(•ω•`)o
\(￣︶￣*\))
(* ￣3)(ε￣ *)
－O－
(*￣3￣)╭
( ´･･)ﾉ(._.`)
(｡･∀･)ﾉﾞ
o(*￣▽￣*)ブ
(_　_)。゜zｚＺ
(ToT)/~~~
(∪.∪ )...zzz
!(*￣(￣　*)
(￣o￣) . z Z
(づ￣ 3￣)づ
（＾∀＾●）ﾉｼ
（づ￣3￣）づ╭❤～
\(@^0^@)/
ヾ(^▽^*)))
(～﹃～)~zZ
☆⌒(*＾-゜)v
(￣o￣) . z Z
(*￣;(￣ *)
||ヽ(*￣▽￣*)ノミ|Ю
☆⌒(*＾-゜)v
(＾Ｕ＾)ノ~ＹＯ
o(*°▽°*)o
ヾ(￣▽￣) Bye~Bye~
( ﾟдﾟ)つ Bye
(๑•̀ㅂ•́)و✧
(o゜▽゜)o☆
(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
(∩^o^)⊃━☆
✪ ω ✪
d=====(￣▽￣*)b
o(*￣▽￣*)o
(╹ڡ╹ )
(u‿ฺu✿ฺ)
♪(´▽｀)
(╯▽╰ )
ヽ(✿ﾟ▽ﾟ)ノ
( •̀ .̫ •́ )✧
Ψ(￣∀￣)Ψ
o(≧∀≦)o
b(￣▽￣)d
o(^▽^)o
(¬‿¬)
(•_•)
(⌐■_■)
( ﾉ ﾟｰﾟ)ﾉ
(^◡^)
( ´ ▽ ` )ﾉ

# Acting Cute

(￣y▽,￣)╭
(o|o)
(^人^)
§(*￣▽￣*)§
ψ(._. )>
(/▽＼)
(o′┏▽┓｀o)
(*≧︶≦))(￣▽￣* )ゞ
(　o=^•ェ•)o　┏━┓
◑﹏◐
(○｀ 3′○)
(ಥ _ ಥ)
(⓿_⓿)
(❤´艸｀❤)
(ง •_•)ง
ผ(•̀_•́ผ)
（〃｀ 3′〃）
(●'◡'●)
(. ❛ ᴗ ❛.)
ლ(╹◡╹ლ)
o(〃＾▽＾〃)o
(。・ω・。)
(✿◠‿◠)
(ﾉ*ФωФ)ﾉ
ˋ( ° ▽、° )
(*/ω＼*)
=￣ω￣=
ο(=•ω＜=)ρ⌒☆
(✿◕‿◕✿)
(◔◡◔)
(★‿★)
╰(￣ω￣ｏ)
~(￣▽￣)~*
〜(￣▽￣〜)
(〜￣▽￣)〜
(～o￣3￣)～
(っ´Ι`)っ
ԅ(¯﹃¯ԅ)
(￣﹃￣)
(❤ ω ❤)
(°°)～
（￣。。￣）
( ఠൠఠ )ﾉ
ฅʕ•̫͡•ʔฅ
(￣(工)￣)
(ʘ ͟ʖ ʘ)
( ͡~ ͜ʖ ͡°)
¯\_( ͡° ͜ʖ ͡°)_/¯
(ʘᴥʘ)
¯\_(ツ)_/¯
(▰˘◡˘▰)
₍ᐢ.ˬ.ᐢ₎
(≧◡≦)

# Sadness

/_ \
（；´д｀）ゞ
(￣ ‘i ￣;)
( *^-^)ρ(*╯^╰)
(ノへ￣、)
（＞人＜；）
(#｀-_ゝ-)
≡(▔﹏▔)≡
⊙﹏⊙∥
╯︿╰
(┬┬﹏┬┬)
(´。＿。｀)
(˘･_･˘)
(；′⌒`)
〒▽〒
(T_T)
(≧﹏ ≦)
o(TヘTo)
X﹏X
( ͡o╭╮ ͡o)
(╯︵╰,)o)
(╥ᆺ╥；)
o(╥﹏╥)o
(╥_╥)
(╥╯θ╰╥)
(｡╯︵╰｡)
(╯︵╰)
(◞‸◟)
(个_个)
(×﹏×)

Things to Keep in Mind When Using Kaomoji

The key considerations when using Kaomoji are text encoding issues (character corruption) and automatic line breaks.

# Text Corruption and Automatic Line Breaks

Kaomoji often include uncommon special characters, such as Greek letters, Cyrillic characters, and Chinese character radicals.
To prevent characters from missing or text from becoming corrupted, you should choose Kaomoji that use only Unicode characters, which are the globally standardized character set.

The Kaomoji introduced here are selected with this in mind whenever possible. If you plan to use them on a web page, double-check that the font specified in the CSS font-family property supports those Kaomoji characters.

In addition, on narrow smartphone screens or when text wraps automatically, parts of a Kaomoji may be split across lines due to font size or line-width constraints, making the shape difficult to recognize.

References

よく使われる人気の顔文字（Kaomoji）一覧：感情・シーン別まとめ - codingEverybody

よく使われる人気の顔文字を、感情やシーン別にまとめました。気になる顔文字を見つけて、そのままコピーしてご活用ください。

codingeverybody.jp

HTML crossorigin Attribute : CORS Request Modes

Youn — Wed, 19 Aug 2026 06:51:30 +0000

Definition and Usage

The crossorigin attribute specifies the CORS (Cross-Origin Resource Sharing) request mode used when fetching resources linked to an element from an external origin.

Using the crossorigin attribute allows you to safely use external resources (e.g., external images, fonts, and scripts) according to web standards by specifying the CORS request mode.

Usage Notes

# Understanding the Interaction Between Resources from External Origins and the Current Web Page

- Same-Origin Policy (SOP)

Browsers implement a core security mechanism called the Same-Origin Policy (SOP). This policy restricts how documents or scripts loaded from the current origin can interact with resources from an external origin.

When resources from an external origin are linked to a web page, browsers restrict interactions with those resources for security reasons. This security rule is called the Same-Origin Policy (SOP).

- Cases Where the Same-Origin Policy Allows Access to Resources from an External Origin

The Same-Origin Policy does not unconditionally restrict access to resources from an external origin.
It allows limited access to resources from external origins. A prime example is when resources are simply embedded into the current web page.

External script files embedded using <script src="…"></script>
External CSS files linked using <link rel="stylesheet" href="…">
Media played using <video>and <audio>
Images displayed using <img> and <picture>
Content embedded using <iframe>
External resources embedded using <object> and <embed>
Fonts applied using the CSS @font-face rule (some browsers may require the same origin)

- Cases Where the Same-Origin Policy Restricts Access to Resources from an External Origin

Simply embedding resources from an external origin does not generally restrict access.
However, when the current web page interacts with resources from an external origin, access is restricted because it may affect security.

Data communication: When the current web page communicates with resources from an external origin (e.g., fetching data through an AJAX request)
Access to cookies and stored information: When resources from an external origin attempt to access information from the current web page (e.g., attempting to access user cookies)
External origin resources within simply embedded resources from an external origin: When resources from an external origin exist within simply embedded resources from another external origin, access may be restricted to maintain security.
Script execution: When attempting to execute scripts from external origin resources on the current web page, or when external origin resources attempt to call script APIs of the current web page (certain specific APIs may be allowed).

# CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) is a web standard mechanism that allows interactions between the current origin, which is restricted by the Same-Origin Policy, and resources from an external origin.

This mechanism can be broadly divided into two approaches: specifying the CORS request mode using the HTML crossorigin attribute, and configuring CORS policies on the server to allow interactions with resources from an external origin.

This article covers how to specify the CORS request mode applied when fetching resources from an external origin using the crossorigin attribute.

Specifying CORS Request Modes for External Origin Resources Using the crossorigin Attribute

The crossorigin attribute is used for requests to resources from an external origin, such as those made by the <link>, <img>, <script>, <video>, and <audio> elements. It specifies the CORS request mode applied when fetching external origin resources linked to the element.

The crossorigin attribute value specifies the CORS request mode applied when fetching resources from an external origin. This value determines how the CORS request is processed.

# Things to Keep in Mind

Unlike general resources, web fonts are loaded into web pages using the CSS @font-face rule. During this process, browsers may perform CORS requests in the background. Therefore, even for same-origin web font resources, when preloading them using <link> with rel="preload", it is recommended to use crossorigin="anonymous" as well to ensure that the same CORS request mode is used as the actual font loading request.

References

HTML crossorigin Attribute – Specifying CORS Request Modes - codingCourses

The crossorigin attribute specifies the CORS (Cross-Origin Resource Sharing) request mode used when fetching resources linked to an element from an external origin.

coding.courses

JavaScript getElementById() Function

Youn — Wed, 19 Aug 2026 03:35:57 +0000

Definition and Usage

The getElementById() function returns the Element object whose HTML id attribute value matches the specified string. If no matching element exists, it returns null.

Basic Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>getElementById() Example</title>
    </head>
    <body>
        <p id="hello">Welcome! Nice to meet you!</p>
        <script>
            const changeColor = newColor => {
                const element = document.getElementById("hello"); // Finds the element with id="hello".
                element.style.color = newColor;
            }
        </script>
        <button type="button" onclick="changeColor('red');">Change to Red</button>
        <button type="button" onclick="changeColor('blue');">Change to Blue</button>
    </body>
</html>

Syntax

document.getElementById(id);

Return Value

Returns the element (Element) object whose HTML id attribute value matches the specified string.
Returns null if no matching element exists.

Things to Keep in Mind

# Preventing Errors When the Target Element Does Not Exist

The getElementById() function returns null if the element to find does not exist.

# The Value of the Target Element's id Attribute Is Case-Sensitive

The id parameter of the getElementById(id) function is a case-sensitive string.

# getElementById() Is Only a Method of the document Object

The getElementById() function is a document-only method used to find elements based on the entire HTML document.
Therefore, it cannot be used on Element objects accessed through properties such as parentNode and parentElement.

References

JavaScript getElementById() Function – A Complete Guide - codingCourses

The getElementById() function returns the Element object whose HTML id attribute value matches the specified string. If no matching element exists, it returns null.

coding.courses

DEV Community: Youn

HTML Tag

Definition and Usage

Basic Example

Usage Notes

Syntax

Example with the <summary> Tag

Example without the <summary> Tag

The open Attribute

References

HTML

Definition and Usage

Basic Example

Technical Summary

References

HTML

Definition and Usage

Preconnecting to External Domains

Important Considerations

# Apply Only to Necessary External Domains

# No Effect on the Same Domain

References

HTML

Definition and Usage

Usage Notes

# DNS Resolution for a Domain

# How to Implement

# Important Considerations

- Not Supported by All Browser

- Do Not Overuse

- Do Not Apply to Unused External Domains

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

- Performance Improvement May Be Minimal.

References

HTML

Definition and Usage

Usage Notes

# Prefetch

# How to Implement

# Important Considerations

- Apply Only to Resources Needed Later

- Distinguishing Between Same-Origin and Cross-Origin Resources

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

- Avoid Using Multiple <link rel="prefetch"> Tags for the Same Resource

- <link rel="prefetch"> Does Not Affect JavaScript's onload Event

- <link rel="prefetch"> Does Not Work Recursively

Practical Examples

# Prefetching the Next Page

# Optimizing Asynchronous Component Loading

References

HTML hidden Attribute

Definition and Usage

Basic Example

Features

The Difference Between Using the HTML hidden Attribute and CSS display: none

# HTML hidden

# CSS display: none

References

HTML title Attribute

Definition and Usage

Features

Practical Examples

# Usage on Links

# Usage on Images

# Usage on Paragraphs

# Usage on Interactive Content

# Advisory Information for Accessible Content

Purpose of the title Attribute

# Using Tooltips

# Improving Web Accessibility

# Providing Additional Information

References

HTML contenteditable Attribute

Definition and Usage

Basic Example

Syntax

Values

Things to Keep in Mind

Elements Where the contenteditable Attribute Does Not Apply

References

HTML
Tag