HTML fundamentals / 04
What belongs in the head?
A guide to title, style, link, meta, and script elements, including external stylesheets and script loading.
On this page
What is the head element?
Think of <head> as a container for metadata—information about the document. It sits inside <html>, before <body>, and commonly defines the document title, character encoding, styles, scripts, and other metadata.
This information is not displayed as the page's body content, though it affects how the browser and other tools interpret the page.
title
As its name suggests, <title> defines the document's title. In the original example, the text NAVER in the browser tab comes from this element:
The title of the NAVER website.
Write the document's title between <title> and </title>. It does not appear as a heading in the page body, but it appears in the browser's tab or title bar and helps search engines understand the page.
Editorial note: a useful title supports search presentation; it does not guarantee a high search ranking, as the original wording might suggest.
style
Use <style> to include CSS inside an HTML document. Write the CSS between the opening and closing tags. For a small document with only a few rules, this can be convenient. As the document grows, separating HTML and CSS into different files is often easier to read and maintain.
Open the original style-element example on CodePen.
link
The <link> element describes a relationship between the document and an external resource. It can load a stylesheet, including CSS supplied by libraries or font services. The original article mentions Swiper and Google Fonts as examples of resources used this way.
Here is an external stylesheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
</body>
</html>
meta
The <meta> element can describe the character encoding, page description, author, keywords, and viewport. The following examples translate the original description into English while retaining the other sample values:
<meta charset="UTF-8">
<meta name="description" content="HTML tutorial">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Bill Gay">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
script
Use <script> to include JavaScript. For an inline script, write the statements between <script> and </script>:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
console.log("ong");
</script>
</head>
<body>
<h1>ong</h1>
</body>
</html>
As with CSS, keeping longer JavaScript code in a separate file can make the document easier to manage. Reference that file with the src attribute. The original article compares these three forms:
<script defer src = "./main.js"></script>
or
<script async src = "/js/main.js"></script>
or
<script src = "/js/main.js"></script>
Although they look similar, their loading behavior differs. The original text recommends using defer or async rather than relying on a script placed at the bottom of the page, and previews a later lesson on synchronous and asynchronous execution.
Editorial clarification: for classic external scripts,
deferdownloads alongside HTML parsing and executes after parsing, in document order.asyncalso downloads alongside parsing but executes as soon as it is ready, without guaranteeing order or waiting for the DOM. A script with neither attribute normally blocks parsing when encountered. Use the mode that matches the script's dependencies;asyncis not automatically suitable for DOM-dependent code.
Moved here from Tistory
I migrated this post from my Korean Tistory blog, I am Jason Lee, to this website and translated it into English. My writing and projects now live together in one place.
The original publication date, code examples, and screenshots are preserved. Editorial notes clarify known issues in the original material.
Original post on Tistory English edition · Aug 30, 2026