HTML Head: What Every Tag Does
A beginner's guide to the HTML <head> — title, meta, link, script, and base tags explained.
Published:
Tags: HTML head tags explained, HTML head elements guide, meta tags beginner
HTML Head: What Every Tag Does The HTML element is invisible to users but read by browsers, search engines, and social platforms before any page content loads. Understanding each tag helps you control how pages appear in search results, on social media, and in browser tabs. --- What is the difference between The Head and The Body? Everything in is for machines. Everything in is for users. Confusing the two causes rendering errors or missing SEO data. --- How do I use Character Encoding? This must be the first element inside , before any other content. It tells the browser how to interpret the bytes in the file. UTF-8 supports all characters in all languages plus emoji. If it's missing or set incorrectly, special characters (accents, Chinese, Arabic, emoji) appear as or garbled text. ---…
Frequently Asked Questions
What goes inside the HTML head?
The `<head>` section contains machine-readable metadata about the page: character encoding (`<meta charset>`), viewport settings, page title, CSS links, meta descriptions, Open Graph tags, JavaScript references, and structured data scripts. None of this content is visible directly on the page.
What is the difference between head and body?
`<head>` contains metadata — information about the page that browsers, crawlers, and social platforms read but don't render visibly. `<body>` contains the visible content — text, images, links, forms, and media that users see.
What does the viewport meta tag do?
`<meta name='viewport' content='width=device-width, initial-scale=1.0'>` tells browsers to match the page width to the device screen and set the initial zoom level to 1. Without it, mobile browsers render pages at desktop width (typically 980px) and scale them down, making text unreadably small.
What is a favicon and how do I add one?
A favicon is the small icon shown in browser tabs, bookmarks, and browser history. Add it with `<link rel='icon' href='/favicon.ico'>` in `<head>`. Modern browsers also support PNG, SVG, and `<link rel='apple-touch-icon'>` for iOS home screens.
What is the charset meta tag?
`<meta charset='UTF-8'>` declares the character encoding for the page. UTF-8 supports virtually all characters and emoji across all languages. Place it as the first element in `<head>` before any content that might contain special characters.
All articles · theproductguy.in