Title, meta, link, style and script in the head.
✍️ 3 exercises + code challenge in this lessonThe <head> element holds metadata: information about the page that is not shown directly.
<title>: the page title.<meta charset="UTF-8">: the character encoding.<meta name="description" content="...">: a summary used by search engines.<meta name="viewport" content="width=device-width, initial-scale=1.0">: makes the page display correctly on phones.<link>: stylesheets and icons.<style> and <script>: internal CSS and JavaScript.Mastering HTML Head helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free HTML tutorials for beginners">
<title>HTML Head Example</title>
<style> body { font-family: sans-serif; } </style>
</head>
<body>
<h1>Everything in the head is invisible metadata.</h1>
</body>
</html>Check what you learned in “HTML Head”.
Add the viewport meta tag for mobile devices.
<meta name="" content="width=device-width, initial-scale=1.0">
Which tag sets the character encoding of the page?
Add a meta description with the content "Free coding lessons".
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services