HTML Head

HTML में <head> टैग का इस्तेमाल वेबपेज की जानकारी (metadata) देने के लिए किया जाता है। यह जानकारी सीधे वेबपेज पर दिखाई नहीं देती, लेकिन यह browser और search engine के लिए बहुत जरूरी होती है। यानी <head> वो जगह है जहाँ आप अपने पेज का title, CSS, JavaScript, SEO meta tags, favicon, आदि define करते हैं।

Basic Structure of HTML Document

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

ऊपर के कोड में <head> टैग के अंदर page का title है, जो browser के tab में दिखता है।

Head के अंदर क्या-क्या आता है?

Element (तत्व)	उपयोग (Usage)
`<title>`	पेज का नाम (browser tab में दिखाई देता है)
`<meta>`	पेज की जानकारी (description, keywords, charset आदि)
`<link>`	CSS या favicon जैसी external files जोड़ने के लिए
`<style>`	Internal CSS लिखने के लिए
`<script>`	JavaScript जोड़ने के लिए
`<base>`	सभी relative URLs का base URL तय करता है

<title> टैग

यह टैग आपके webpage का नाम define करता है। Example:

<head>
  <title>Learn HTML in Hindi</title>
</head>

Output: Browser tab में — Learn HTML in Hindi SEO के लिए <title> बहुत ज़रूरी होता है, क्योंकि यही सर्च रिजल्ट में हेडलाइन के रूप में दिखता है।

<meta> टैग — Meta Information

<meta charset="UTF-8">
<meta name="description" content="HTML Course in Hindi with Easy Examples">
<meta name="keywords" content="HTML, HTML Tutorial, Learn HTML, Hindi">
<meta name="author" content="CodeKeet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

इनका उपयोग —

charset → text encoding के लिए (UTF-8 सबसे common)
viewport → responsive design के लिए
description और keywords → SEO में मदद करते हैं
author → page के creator का नाम

<style> टैग — Internal CSS

अगर आप अपने HTML पेज में direct CSS लिखना चाहते हैं तो <style> टैग का उपयोग करें। Example:

<head>
  <style>
    body {
      background-color: #f0f2f5;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #4caf50;
    }
  </style>
</head>

Output: Background हल्का grey और heading हरे रंग में दिखाई देगी।

<link> टैग — External CSS जोड़ना

अगर आपकी CSS किसी दूसरी file में है (जैसे style.css) तो आप उसे <link> से जोड़ते हैं। Example:

<head>
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet" बताता है कि यह file styling के लिए है। href में file का path दिया जाता है।

<script> टैग — JavaScript जोड़ना

आप JavaScript को head में भी include कर सकते हैं (या body के end में)। Example:

<head>
  <script src="main.js"></script>
</head>

यह external JavaScript file को load करेगा। Tip: Performance के लिए script को body के नीचे रखना बेहतर होता है।

<base> टैग — Base URL Set करना

अगर आपके पेज में कई relative URLs हैं, तो आप base URL define कर सकते हैं। Example:

<head>
  <base href="https://www.example.com/">
</head>
<body>
  <a href="about.html">About Us</a>
</body>

अब लिंक “https://www.example.com/about.html” खुलेगा।

<link> से Favicon जोड़ना

आपका site icon (favicon) browser tab में दिखाने के लिए भी <link> का उपयोग होता है। Example:

<link rel="icon" type="image/png" href="favicon.png">

Output: Browser tab में आपकी site का छोटा icon दिखाई देगा।

<meta> — Open Graph & Social Share Tags

जब कोई आपका page Facebook, WhatsApp या Twitter पर share करता है, तो ये tags preview image और title सेट करने में मदद करते हैं। Example:

<meta property="og:title" content="Learn HTML in Hindi">
<meta property="og:description" content="Best HTML tutorial for beginners">
<meta property="og:image" content="https://example.com/html-thumbnail.jpg">
<meta property="og:url" content="https://example.com/html-course">

Complete Example – HTML Head का Full Setup

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML in Hindi with simple and clear examples.">
  <meta name="author" content="CodeKeet">

  <title>HTML Head Element Explained</title>
  
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="style.css">
  
  <style>
    body { background: #f8f8f8; font-family: 'Segoe UI', sans-serif; }
    h1 { color: #2c3e50; }
  </style>
  
  <script src="main.js"></script>
</head>
<body>
  <h1>Welcome to HTML Head Lesson</h1>
</body>
</html>

Summary

HTML `` Elements और उनके कार्य
Element (तत्व)	काम (Function)
<title>	Page का नाम (ब्राउज़र टैब पर प्रदर्शित)
<meta>	Metadata (जैसे: SEO जानकारी, वर्ण सेट, व्यूपोर्ट सेटिंग्स)
<link>	External CSS फ़ाइल या favicon जोड़ना
<style>	Internal CSS स्टाइलिंग को परिभाषित करना
<script>	JavaScript कोड या External JavaScript फ़ाइल जोड़ना
<base>	डॉक्यूमेंट के सभी Relative URLs के लिए Base URL/Target तय करना

Practice Task

एक HTML page बनाइए जिसमें —

Page का title “My Portfolio” हो
Description, keywords और author के meta tags हों
External CSS “style.css” जुड़ा हो
एक favicon दिखे
और body में “Welcome to My Portfolio” heading हो