The <head> element holds information about the page. Nothing inside
it is displayed to the visitor.
Example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scolar — Books in Nepal</title>
<meta name="description" content="Buy textbooks and novels online in Nepal.">
<link rel="stylesheet" href="styles.css">
</head>The title Element
Required on every page. It appears in the browser tab, in bookmarks, and as the clickable headline in search results.
Example
<title>Palpasa Cafe — Buy Online | Scolar</title>Keep it under about 60 characters, and make every page's title unique.
The charset Meta Tag
Declares the character encoding. Without UTF-8, Devanagari text and
emoji turn into garbled symbols.
Example
<meta charset="UTF-8">Always put it as the first thing inside <head>.
The viewport Meta Tag
Required for a site to work properly on phones. Without it, mobile browsers pretend to be a desktop and zoom out.
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">The description Meta Tag
Search engines often show this text under your page title in results.
Example
<meta name="description" content="Buy textbooks, novels and stationery online in Nepal. Delivery to all 77 districts.">Aim for 150–160 characters, and write it for humans, not robots.
Open Graph Tags
These control how your page looks when shared on Facebook, WhatsApp, Viber or LinkedIn.
Example
<meta property="og:title" content="Palpasa Cafe — Scolar">
<meta property="og:description" content="Buy Palpasa Cafe online in Nepal.">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/books/palpasa-cafe">
<meta property="og:type" content="website">Without og:image, shared links appear as a bare grey box.
The canonical Link
Tells search engines which URL is the "real" one when the same content is reachable at several addresses.
Example
<link rel="canonical" href="https://www.scolarnepal.com/books/palpasa-cafe">Favicon
The little icon in the browser tab.
Example
<link rel="icon" type="image/png" href="/favicon.png">Linking CSS and JavaScript
Example
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>defer lets the page finish parsing before running the script — almost
always what you want.
A Complete Head
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scolar — Books in Nepal</title>
<meta name="description" content="Buy textbooks and novels online in Nepal.">
<link rel="canonical" href="https://www.scolarnepal.com/">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/styles.css">
<script src="/script.js" defer></script>
</head>
<body>
...
</body>
</html>