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