EZ

EZNotes

📐 Practical 56: HTML code for using header tags h1, h2, ... , h6

Learn how to use all six heading tags (<h1> to <h6>) to structure your web page content.

🎯 Aim

To write an HTML program that demonstrates the use of all six heading tags — <h1> through <h6> — and understand their hierarchy and styling.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result

📖 Introduction

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings are used to structure content, create hierarchy, and improve accessibility and SEO.

💡 Tip: Search engines use headings to understand the structure and importance of your content. Use <h1> for the main title, <h2> for major sections, and so on.

📊 Visual Demo of All Heading Tags

<h1>

This is Heading 1 (Largest)

<h2>

This is Heading 2

<h3>

This is Heading 3

<h4>

This is Heading 4

<h5>
This is Heading 5
<h6>
This is Heading 6 (Smallest)

📝 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 56: Demonstrating heading tags h1 to h6 --> <html> <head> <title>Heading Tags Demo</title> </head> <body> <h1>This is Heading 1 - Main Title</h1> <h2>This is Heading 2 - Section Title</h2> <h3>This is Heading 3 - Subsection Title</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <h6>This is Heading 6</h6> <p>Headings help organize content. h1 is the most important, h6 is the least.</p> </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: "headings.html" or "practical56.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 headings.html file.
  3. It will open in your default web browser.
  4. You will see all six heading levels displayed with decreasing font sizes.

📊 Heading Hierarchy and Usage

Tag Default Font Size Purpose Example Usage
<h1> 2.2em (largest) Main page title / Most important Page title, article title
<h2> 1.8em Major sections Chapter headings, main sections
<h3> 1.5em Subsections Subtopics within sections
<h4> 1.2em Sub‑subsections Detailed breakdowns
<h5> 1.0em Minor headings Less important headings
<h6> 0.85em (smallest) Least important Footnotes, fine print

📊 Best Practices for Using Headings

Practice Why It Matters
Use <h1> only once per page It represents the main topic of the page
Follow proper hierarchy (h1 → h2 → h3) Creates a logical structure for readers and search engines
Don't skip heading levels Going from h1 to h3 without h2 breaks the structure
Use headings for structure, not just for styling Headings convey semantic meaning, not just visual appearance
Keep headings descriptive and concise Helps users and search engines understand the content
⚠️ Common Mistake: Using headings for bold text or larger font size. Headings are for structure and hierarchy. Use CSS for styling, and headings for content organization.

📊 Observations

  • <h1> is the largest and most important heading.
  • <h6> is the smallest and least important.
  • Headings are displayed in bold by default.
  • Each heading has its own line (block-level element).
  • Proper heading hierarchy improves SEO and accessibility.

✅ Result

You have successfully:

  • Written an HTML program that uses all six heading tags (<h1> to <h6>).
  • Viewed the output in a browser to see the different sizes and hierarchy.
  • Understood the purpose and best practices for using headings.
📌 Important: Headings are essential for creating well‑structured, accessible, and SEO‑friendly web pages. Always use them to organize your content logically!
💡 Next Steps: Try creating a complete web page with a proper heading hierarchy — h1 for the main title, h2 for major sections, h3 for subsections, and so on. Add paragraphs under each heading to see how content flows!

🎯 مقصد

ایک HTML پروگرام لکھنا جو تمام چھ ہیڈنگ ٹیگز — <h1> سے <h6> — کے استعمال کو ظاہر کرتا ہے اور ان کے درجہ بندی اور اسٹائل کو سمجھتا ہے۔

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

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

📖 تعارف

HTML ہیڈنگ کی چھ سطحیں فراہم کرتا ہے، <h1> (سب سے اہم) سے <h6> (سب سے کم اہم) تک۔ ہیڈنگز کا استعمال مواد کو ساخت دینے، درجہ بندی بنانے، اور رسائی اور SEO کو بہتر بنانے کے لیے کیا جاتا ہے۔

💡 مشورہ: سرچ انجن ہیڈنگز کا استعمال آپ کے مواد کی ساخت اور اہمیت کو سمجھنے کے لیے کرتے ہیں۔ مرکزی عنوان کے لیے <h1>، بڑے حصوں کے لیے <h2>، اور اسی طرح استعمال کریں۔

📊 تمام ہیڈنگ ٹیگز کا بصری نمونہ

<h1>

یہ ہیڈنگ 1 ہے (سب سے بڑی)

<h2>

یہ ہیڈنگ 2 ہے

<h3>

یہ ہیڈنگ 3 ہے

<h4>

یہ ہیڈنگ 4 ہے

<h5>
یہ ہیڈنگ 5 ہے
<h6>
یہ ہیڈنگ 6 ہے (سب سے چھوٹی)

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 56: Demonstrating heading tags h1 to h6 --> <html> <head> <title>Heading Tags Demo</title> </head> <body> <h1>یہ ہیڈنگ 1 ہے - مرکزی عنوان</h1> <h2>یہ ہیڈنگ 2 ہے - حصے کا عنوان</h2> <h3>یہ ہیڈنگ 3 ہے - ذیلی حصے کا عنوان</h3> <h4>یہ ہیڈنگ 4 ہے</h4> <h5>یہ ہیڈنگ 5 ہے</h5> <h6>یہ ہیڈنگ 6 ہے</h6> <p>ہیڈنگز مواد کو منظم کرنے میں مدد کرتی ہیں۔ h1 سب سے اہم ہے، h6 سب سے کم اہم۔</p> </body> </html>

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

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

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

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

📊 ہیڈنگ کا درجہ بندی اور استعمال

ٹیگ ڈیفالٹ فونٹ سائز مقصد استعمال کی مثال
<h1> 2.2em (سب سے بڑا) مرکزی صفحہ کا عنوان / سب سے اہم صفحہ کا عنوان، مضمون کا عنوان
<h2> 1.8em بڑے حصے باب کے عنوان، اہم حصے
<h3> 1.5em ذیلی حصے حصوں کے اندر ذیلی موضوعات
<h4> 1.2em ذیلی‑ذیلی حصے تفصیلی تقسیم
<h5> 1.0em معمولی ہیڈنگز کم اہم ہیڈنگز
<h6> 0.85em (سب سے چھوٹا) سب سے کم اہم فوٹ نوٹ، چھوٹی تحریر

📊 ہیڈنگز کے استعمال کے بہترین طریقے

طریقہ یہ کیوں اہم ہے
فی صفحہ صرف ایک <h1> استعمال کریں یہ صفحہ کے مرکزی موضوع کی نمائندگی کرتا ہے
صحیح درجہ بندی کی پیروی کریں (h1 → h2 → h3) قارئین اور سرچ انجن کے لیے منطقی ڈھانچہ بناتا ہے
ہیڈنگ لیولز کو نہ چھوڑیں h1 سے h3 پر جانا بغیر h2 کے ڈھانچہ کو توڑتا ہے
ہیڈنگز کو ساخت کے لیے استعمال کریں، صرف اسٹائل کے لیے نہیں ہیڈنگز معنوی معنی رکھتی ہیں، صرف بصری شکل نہیں
ہیڈنگز کو وضاحتی اور مختصر رکھیں صارفین اور سرچ انجن کو مواد سمجھنے میں مدد کرتا ہے
⚠️ عام غلطی: بولڈ ٹیکسٹ یا بڑے فونٹ سائز کے لیے ہیڈنگز کا استعمال کرنا۔ ہیڈنگز ساخت اور درجہ بندی کے لیے ہیں۔ اسٹائل کے لیے CSS استعمال کریں، اور مواد کی تنظیم کے لیے ہیڈنگز استعمال کریں۔

📊 مشاہدات

  • <h1> سب سے بڑی اور سب سے اہم ہیڈنگ ہے۔
  • <h6> سب سے چھوٹی اور سب سے کم اہم ہیڈنگ ہے۔
  • ہیڈنگز ڈیفالٹ طور پر بولڈ میں ظاہر ہوتی ہیں۔
  • ہر ہیڈنگ کی اپنی لائن ہوتی ہے (block‑level عنصر)۔
  • صحیح ہیڈنگ درجہ بندی SEO اور رسائی کو بہتر بناتی ہے۔

✅ نتیجہ

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

  • ایک HTML پروگرام لکھا جو تمام چھ ہیڈنگ ٹیگز (<h1> سے <h6>) استعمال کرتا ہے۔
  • آؤٹ پٹ کو براؤزر میں دیکھا تاکہ مختلف سائز اور درجہ بندی دیکھ سکیں۔
  • ہیڈنگز کے مقصد اور بہترین طریقوں کو سمجھا۔
📌 اہم: ہیڈنگز اچھی ساختہ، قابل رسائی، اور SEO‑دوستانہ ویب صفحات بنانے کے لیے ضروری ہیں۔ ہمیشہ اپنے مواد کو منطقی طور پر منظم کرنے کے لیے ان کا استعمال کریں!
💡 اگلے اقدامات: مناسب ہیڈنگ درجہ بندی کے ساتھ ایک مکمل ویب صفحہ بنانے کی کوشش کریں — مرکزی عنوان کے لیے h1، بڑے حصوں کے لیے h2، ذیلی حصوں کے لیے h3، اور اسی طرح۔ ہر ہیڈنگ کے نیچے پیراگراف شامل کریں تاکہ مواد کا بہاؤ دیکھ سکیں!
⬅ Back to Practical Notebooks