Head and meta tags

Learn the role of meta tags like charset, viewport and description.

What is the head section?

The <head> section carries information about the page; the user does not see it. The tags written here tell the browser, search engines and other tools what the page is like.

The most common ones are: charset which declares the character set, viewport which sets the mobile view, and description which gives a short summary of the page. All of them use the <meta> tag.

Character set

The <meta charset="utf-8"> tag tells which encoding is used to read the page's characters. UTF-8 shows Turkish letters (ç, ğ, ı, ö, ş, ü) and all the world's characters correctly.

This tag goes inside <head>, ideally first. Without UTF-8, Turkish letters may look broken; so adding it to every page is a good habit.

Exercise Add a viewport meta tag

Add a <meta name="viewport" content="width=device-width, initial-scale=1"> tag to head. The charset meta tag is already given.

Show example solution

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Test yourself

Which tag belongs in the head section?
- <body>
- <meta>
- <html>
- <head>
Show answer

<meta> — Correct. The <meta> tag goes inside head; it carries page information.

Write the charset meta tag

<head>
  ____
</head>

Show answer

<head>
  <meta charset="utf-8">
</head>

Match each meta term to its role

charset

Character encoding
viewport

Mobile view setting
description

Page summary

Next lesson: Title and language

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies