EZ

EZNotes

🏗️ Practical 55: HTML code showing use of html, head, body tags

Learn the essential structure of every HTML document — the <html>, <head>, and <body> tags.

🎯 Aim

To write an HTML program that demonstrates the correct use of the <html>, <head>, and <body> tags — the foundational structure of every web page.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • Basic understanding of HTML tags

📖 Introduction

Every HTML document follows a basic structure that consists of three main tags:

<!-- This is the complete structure of an HTML page --> <html> <!-- Root element: wraps all content --> <head> <!-- Contains meta-information about the page --> <title>Page Title</title> <!-- Other meta tags, CSS links, etc. --> </head> <body> <!-- Contains all visible content --> <!-- Headings, paragraphs, images, links, etc. --> <h1>Hello, World!</h1> <p>This is my first webpage.</p> </body> </html>
💡 Tip: The <html> tag is the root element of an HTML page. The <head> tag contains metadata (information about the page), and the <body> tag contains the visible content that users see.

📝 Understanding Each Tag

Tag Purpose What it Contains
<html> Root element of the HTML document All other HTML elements (head and body)
<head> Contains metadata about the document Title, character set, CSS styles, scripts, meta tags
<body> Contains the visible content of the page Headings, paragraphs, images, links, forms, etc.

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 55: Demonstrating html, head, and body tags --> <html> <head> <title>My Page with html, head, body</title> </head> <body> <h1>Welcome to My Webpage</h1> <p>This page demonstrates the use of the <html>, <head>, and <body> tags.</p> <p>Everything you see here is inside the <body> tag.</p> <hr> <p>Page structure:</p> <ul> <li><html> → Root element</li> <li><head> → Contains metadata</li> <li><body> → Contains visible content</li> </ul> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "structure.html" or "practical55.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the structure.html file.
  3. It will open in your default web browser.
  4. You will see the rendered page with the heading, paragraphs, and list.

Step 4: View the Page Source

  1. In your browser, right‑click on the page.
  2. Select View Page Source (or Inspect).
  3. You will see the exact HTML code you wrote in Notepad++.
  4. Notice how the <html>, <head>, and <body> tags structure the document.
💡 Tip: Viewing the page source is a great way to understand how browsers interpret HTML. You'll see the same code you wrote, beautifully formatted!

📊 Visual Breakdown of the HTML Structure

<html> ← the root element (starts here)
<head> ← metadata section (not visible)
<title> Page Title </title>
</head>
<body> ← visible content (starts here)
<h1> Welcome! </h1>
<p> This is a paragraph. </p>
</body>
</html> ← root element (ends here)

📊 What Goes Inside Each Tag?

Tag Common Elements Inside Purpose
<head> <title>, <meta>, <link>, <style>, <script> Sets page title, character encoding, CSS styles, and JavaScript
<body> <h1> to <h6>, <p>, <div>, <img>, <a>, <ul>, <ol>, <table>, <form> Displays all visible content on the page
<html> <head> and <body> Wraps the entire document

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Forgetting the <html> tag The browser may still render, but the structure is incomplete Always wrap your code in <html> tags
Putting visible content in <head> The <head> is for metadata only; content won't display Place all visible content inside <body>
Missing closing tags Can break the page layout or cause unexpected behavior Always close tags: <html>...</html>
Nesting tags incorrectly Invalid HTML structure Proper nesting: <html><head></head><body></body></html>

📊 Observations

  • The <html> tag is the root element — it encloses all other HTML elements.
  • The <head> tag contains metadata (information about the page) that is not displayed directly.
  • The <body> tag contains all visible content — what users see in the browser.
  • Proper nesting of these tags is essential for valid HTML and correct rendering.

✅ Result

You have successfully:

  • Written an HTML program that demonstrates the <html>, <head>, and <body> tags.
  • Saved the file and opened it in a browser to see the rendered output.
  • Understood the purpose and proper usage of each of these essential tags.
📌 Important: Every HTML document must have the <html>, <head>, and <body> tags in the correct order. This is the foundation of all web pages!
💡 Next Steps: Try adding more elements inside the <body> — like images, links, tables, or forms. Explore what goes inside the <head> — like CSS styles and JavaScript — to make your pages more interactive and beautiful!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <html>، <head>، اور <body> ٹیگز کے صحیح استعمال کو ظاہر کرتا ہے — ہر ویب صفحے کی بنیادی ساخت۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • HTML ٹیگز کی بنیادی معلومات

📖 تعارف

ہر HTML دستاویز ایک بنیادی ڈھانچے پر مشتمل ہوتی ہے جس میں تین اہم ٹیگز ہوتے ہیں:

<!-- یہ HTML صفحے کا مکمل ڈھانچہ ہے --> <html> <!-- روٹ عنصر: تمام مواد کو گھیرتا ہے --> <head> <!-- صفحے کے بارے میں میٹا معلومات --> <title>صفحہ کا عنوان</title> <!-- دوسرے میٹا ٹیگز، CSS لنکس وغیرہ --> </head> <body> <!-- تمام ظاہر مواد --> <!-- سرخیاں، پیراگراف، تصاویر، لنکس وغیرہ --> <h1>ہیلو، دنیا!</h1> <p>یہ میرا پہلا ویب صفحہ ہے۔</p> </body> </html>
💡 مشورہ: <html> ٹیگ HTML صفحے کا روٹ عنصر ہے۔ <head> ٹیگ میٹا ڈیٹا (صفحے کے بارے میں معلومات) رکھتا ہے، اور <body> ٹیگ ظاہر ہونے والا مواد رکھتا ہے جو صارفین دیکھتے ہیں۔

📝 ہر ٹیگ کو سمجھنا

ٹیگ مقصد اس میں کیا ہوتا ہے
<html> HTML دستاویز کا روٹ عنصر تمام دوسرے HTML عناصر (head اور body)
<head> دستاویز کے بارے میں میٹا ڈیٹا رکھتا ہے عنوان، کریکٹر سیٹ، CSS اسٹائل، اسکرپٹس، میٹا ٹیگز
<body> صفحے کا ظاہر ہونے والا مواد رکھتا ہے سرخیاں، پیراگراف، تصاویر، لنکس، فارمز وغیرہ

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 55: Demonstrating html, head, and body tags --> <html> <head> <title>My Page with html, head, body</title> </head> <body> <h1>Welcome to My Webpage</h1> <p>This page demonstrates the use of the <html>, <head>, and <body> tags.</p> <p>Everything you see here is inside the <body> tag.</p> <hr> <p>Page structure:</p> <ul> <li><html> → Root element</li> <li><head> → Contains metadata</li> <li><body> → Contains visible content</li> </ul> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "structure.html" یا "practical55.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. structure.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو سرخی، پیراگراف اور لسٹ کے ساتھ رینڈر شدہ صفحہ نظر آئے گا۔

چوتھا قدم: صفحہ کا سورس دیکھیں

  1. براؤزر میں صفحے پر دائیں کلک کریں۔
  2. View Page Source (یا Inspect) منتخب کریں۔
  3. آپ کو وہی HTML کوڈ نظر آئے گا جو آپ نے Notepad++ میں لکھا تھا۔
  4. غور کریں کہ کس طرح <html>، <head>، اور <body> ٹیگز دستاویز کو ڈھانچہ دیتے ہیں۔
💡 مشورہ: صفحہ کا سورس دیکھنا یہ سمجھنے کا بہترین طریقہ ہے کہ براؤزر HTML کی تشریح کیسے کرتے ہیں۔ آپ کو وہی کوڈ نظر آئے گا جو آپ نے لکھا، خوبصورتی سے فارمیٹ شدہ!

📊 HTML ڈھانچے کا بصری خاکہ

<html> ← روٹ عنصر (یہاں شروع ہوتا ہے)
<head> ← میٹا ڈیٹا سیکشن (ظاہر نہیں)
<title> صفحہ کا عنوان </title>
</head>
<body> ← ظاہر مواد (یہاں شروع ہوتا ہے)
<h1> خوش آمدید! </h1>
<p> یہ ایک پیراگراف ہے۔ </p>
</body>
</html> ← روٹ عنصر (یہاں ختم ہوتا ہے)

📊 ہر ٹیگ کے اندر کیا آتا ہے؟

ٹیگ اندر عام عناصر مقصد
<head> <title>، <meta>، <link>، <style>، <script> صفحہ کا عنوان، کریکٹر انکوڈنگ، CSS اسٹائلز، اور JavaScript سیٹ کرتا ہے
<body> <h1> سے <h6>، <p>، <div>، <img>، <a>، <ul>، <ol>، <table>، <form> صفحے پر تمام ظاہر مواد دکھاتا ہے
<html> <head> اور <body> پوری دستاویز کو گھیرتا ہے

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
<html> ٹیگ بھول جانا براؤزر اب بھی رینڈر کر سکتا ہے، لیکن ڈھانچہ نامکمل ہے اپنے کوڈ کو ہمیشہ <html> ٹیگز میں لپیٹیں
ظاہر مواد کو <head> میں ڈالنا <head> صرف میٹا ڈیٹا کے لیے ہے؛ مواد ظاہر نہیں ہوگا تمام ظاہر مواد کو <body> کے اندر رکھیں
اختتامی ٹیگ غائب صفحہ کی ترتیب کو توڑ سکتا ہے یا غیر متوقع رویہ کا باعث بن سکتا ہے ہمیشہ ٹیگز بند کریں: <html>...</html>
ٹیگز کو غلط طریقے سے نیسٹ کرنا غلط HTML ڈھانچہ صحیح نیسٹنگ: <html><head></head><body></body></html>

📊 مشاہدات

  • <html> ٹیگ روٹ عنصر ہے — یہ تمام دوسرے HTML عناصر کو گھیرتا ہے۔
  • <head> ٹیگ میٹا ڈیٹا (صفحے کے بارے میں معلومات) رکھتا ہے جو براہ راست ظاہر نہیں ہوتا۔
  • <body> ٹیگ تمام ظاہر مواد رکھتا ہے — جو صارفین براؤزر میں دیکھتے ہیں۔
  • ان ٹیگز کی صحیح نیسٹنگ درست HTML اور صحیح رینڈرنگ کے لیے ضروری ہے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • ایک HTML پروگرام لکھا جو <html>، <head>، اور <body> ٹیگز کو ظاہر کرتا ہے۔
  • فائل محفوظ کی اور اسے براؤزر میں کھول کر رینڈر شدہ آؤٹ پٹ دیکھا۔
  • ان ضروری ٹیگز میں سے ہر ایک کے مقصد اور صحیح استعمال کو سمجھا۔
📌 اہم: ہر HTML دستاویز میں <html>، <head>، اور <body> ٹیگز صحیح ترتیب میں ہونے چاہئیں۔ یہ تمام ویب صفحات کی بنیاد ہے!
💡 اگلے اقدامات: <body> کے اندر مزید عناصر شامل کرنے کی کوشش کریں — جیسے تصاویر، لنکس، ٹیبلز، یا فارمز۔ <head> کے اندر کیا آتا ہے دریافت کریں — جیسے CSS اسٹائلز اور JavaScript — تاکہ آپ کے صفحات مزید انٹرایکٹو اور خوبصورت بن سکیں!
⬅ Back to Practical Notebooks