Everything you see on a page lives in the <body>, but everything search engines and browsers care about starts in the <head>.
The <head> element contains metadata — information about your webpage, not on your webpage.
It helps browsers, search engines, and social media platforms understand your site.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Hello, World!</h1> <p>Welcome to my first HTML page.</p> </body> </html>
Appears in the browser tab and search engine results.
<title>Learn HTML in 30 Days - Day 13</title>
Metadata includes SEO, description, keywords, and author info.
<meta name="description" content="Learn what goes inside the HTML head — titles, meta tags, and more."> <meta name="author" content="Tech Swami"> <meta name="keywords" content="HTML, meta tags, SEO, web development">
Ensures your site scales correctly on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Small icon shown in the browser tab.
<link rel="icon" href="favicon.png" type="image/png">
Link CSS or external resources.
<link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Include scripts to add interactivity or analytics.
<script src="script.js" defer></script>
Make your pages look great when shared online.
<meta property="og:title" content="Learn HTML Head Elements"> <meta property="og:description" content="Master HTML head, meta tags, and favicons."> <meta property="og:image" content="thumbnail.jpg"> <meta name="twitter:card" content="summary_large_image">