EZ

EZNotes

✒️ Practical 59: HTML code for a webpage using bold, italic and underline tags

Learn how to apply text formatting in HTML using the <b>, <i>, <u> tags and their semantic alternatives.

🎯 Aim

To write an HTML program that demonstrates the use of <b> (bold), <i> (italic), and <u> (underline) tags, along with their semantic alternatives.

🛠️ What You Need

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

📖 Introduction

HTML provides several tags for text formatting:

  • <b> — makes text bold (visual emphasis)
  • <strong> — makes text strong (semantic importance)
  • <i> — makes text italic (visual emphasis)
  • <em> — makes text emphasized (semantic emphasis)
  • <u> — makes text underlined
  • <ins> — represents inserted text (semantic)
💡 Tip: In modern HTML, it's better to use <strong> instead of <b>, and <em> instead of <i> because they add semantic meaning to your content, which helps with accessibility and SEO.

📊 Preview of the Output

Bold (<b>): This text is bold
Strong (<strong>): This text is strong (semantic)
Italic (<i>): This text is italic
Emphasis (<em>): This text is emphasized (semantic)
Underline (<u>): This text is underlined
Inserted (<ins>): This text is inserted (semantic)
Bold + Italic: This text is bold and italic
Bold + Underline: This text is bold and underlined
Italic + Underline: This text is italic and underlined
All Three: This text is bold, italic and underlined

📝 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 59: Demonstrating Bold, Italic, and Underline tags --> <html> <head> <title>Bold, Italic & Underline</title> </head> <body> <h1>Text Formatting in HTML</h1> <!-- Bold tags --> <p><b>This is bold text</b> using <b> tag.</p> <p><strong>This is strong text</strong> using <strong> tag (semantic).</p> <!-- Italic tags --> <p><i>This is italic text</i> using <i> tag.</p> <p><em>This is emphasized text</em> using <em> tag (semantic).</p> <!-- Underline tags --> <p><u>This is underlined text</u> using <u> tag.</p> <p><ins>This is inserted text</ins> using <ins> tag (semantic).</p> <!-- Combined formatting --> <p><b><i>Bold and Italic</i></b> (nested tags)</p> <p><b><u>Bold and Underline</u></b></p> <p><i><u>Italic and Underline</u></i></p> <p><b><i><u>Bold, Italic and Underline</u></i></b></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: "formatting.html" or "practical59.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 formatting.html file.
  3. It will open in your default web browser.
  4. You will see all the formatted text examples.

📊 Comparison: Visual vs Semantic Tags

Visual Tag Semantic Tag Purpose When to Use
<b> <strong> Bold text Use <strong> for important content
<i> <em> Italic text Use <em> for emphasized content
<u> <ins> Underlined text Use <ins> for inserted text

📊 CSS Alternatives for Text Formatting

<!-- Using CSS instead of HTML tags --> <p style="font-weight: bold;">Bold text using CSS</p> <p style="font-style: italic;">Italic text using CSS</p> <p style="text-decoration: underline;">Underlined text using CSS</p> <p style="font-weight: bold; font-style: italic; text-decoration: underline;">All three using CSS</p>
💡 Tip: CSS gives you more control and is the recommended way to style text. However, HTML tags like <strong> and <em> are still important for semantic meaning.

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <b> for all bold text Lacks semantic meaning Use <strong> for important content
Using <i> for all italic text Lacks semantic meaning Use <em> for emphasized content
Nesting tags incorrectly Can break the page structure Proper nesting: <b><i>text</i></b>
Forgetting to close tags Invalid HTML Always close tags: <b>...</b>

📊 Observations

  • <b> and <strong> both make text bold, but <strong> adds semantic importance.
  • <i> and <em> both make text italic, but <em> adds semantic emphasis.
  • <u> and <ins> both underline text, but <ins> indicates inserted content.
  • You can nest these tags to combine multiple formatting styles.
  • Semantic tags are better for accessibility and SEO.

✅ Result

You have successfully:

  • Created an HTML page that uses <b>, <i>, and <u> tags.
  • Learned about semantic alternatives: <strong>, <em>, and <ins>.
  • Combined multiple tags to create more complex formatting.
  • Viewed the formatted text in a browser.
📌 Important: While <b>, <i>, and <u> still work, it's recommended to use <strong>, <em>, and <ins> for semantic meaning. For purely visual styling, use CSS instead!
💡 Next Steps: Try creating a paragraph that uses all three formatting styles. Experiment with nesting tags in different orders. Also try using CSS to achieve the same formatting effects!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <b> (بولڈ)، <i> (اطالوی)، اور <u> (انڈر لائن) ٹیگز کے استعمال کو ظاہر کرتا ہے، ان کے سیمینٹک متبادل کے ساتھ۔

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

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

📖 تعارف

HTML ٹیکسٹ فارمیٹنگ کے لیے کئی ٹیگز فراہم کرتا ہے:

  • <b> — ٹیکسٹ کو بولڈ کرتا ہے (بصری زور)
  • <strong> — ٹیکسٹ کو مضبوط کرتا ہے (سیمینٹک اہمیت)
  • <i> — ٹیکسٹ کو اطالوی کرتا ہے (بصری زور)
  • <em> — ٹیکسٹ کو زور دیا گیا (سیمینٹک زور)
  • <u> — ٹیکسٹ کو انڈر لائن کرتا ہے
  • <ins> — ڈالا گیا ٹیکسٹ (سیمینٹک)
💡 مشورہ: جدید HTML میں، <b> کی بجائے <strong> اور <i> کی بجائے <em> استعمال کرنا بہتر ہے کیونکہ یہ آپ کے مواد میں سیمینٹک معنی شامل کرتے ہیں، جو رسائی اور SEO میں مدد کرتا ہے۔

📊 آؤٹ پٹ کا پیش منظر

Bold (<b>): یہ ٹیکسٹ بولڈ ہے
Strong (<strong>): یہ ٹیکسٹ مضبوط ہے (سیمینٹک)
Italic (<i>): یہ ٹیکسٹ اطالوی ہے
Emphasis (<em>): یہ ٹیکسٹ زور دیا گیا ہے (سیمینٹک)
Underline (<u>): یہ ٹیکسٹ انڈر لائن ہے
Inserted (<ins>): یہ ٹیکسٹ ڈالا گیا ہے (سیمینٹک)
Bold + Italic: یہ ٹیکسٹ بولڈ اور اطالوی ہے
Bold + Underline: یہ ٹیکسٹ بولڈ اور انڈر لائن ہے
Italic + Underline: یہ ٹیکسٹ اطالوی اور انڈر لائن ہے
All Three: یہ ٹیکسٹ بولڈ، اطالوی اور انڈر لائن ہے

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 59: Demonstrating Bold, Italic, and Underline tags --> <html> <head> <title>Bold, Italic & Underline</title> </head> <body> <h1>HTML میں ٹیکسٹ فارمیٹنگ</h1> <!-- Bold tags --> <p><b>یہ بولڈ ٹیکسٹ ہے</b> <b> ٹیگ کا استعمال کرتے ہوئے۔</p> <p><strong>یہ مضبوط ٹیکسٹ ہے</strong> <strong> ٹیگ کا استعمال کرتے ہوئے (سیمینٹک)۔</p> <!-- Italic tags --> <p><i>یہ اطالوی ٹیکسٹ ہے</i> <i> ٹیگ کا استعمال کرتے ہوئے۔</p> <p><em>یہ زور دیا گیا ٹیکسٹ ہے</em> <em> ٹیگ کا استعمال کرتے ہوئے (سیمینٹک)۔</p> <!-- Underline tags --> <p><u>یہ انڈر لائن ٹیکسٹ ہے</u> <u> ٹیگ کا استعمال کرتے ہوئے۔</p> <p><ins>یہ ڈالا گیا ٹیکسٹ ہے</ins> <ins> ٹیگ کا استعمال کرتے ہوئے (سیمینٹک)۔</p> <!-- Combined formatting --> <p><b><i>بولڈ اور اطالوی</i></b> (نیسٹڈ ٹیگز)</p> <p><b><u>بولڈ اور انڈر لائن</u></b></p> <p><i><u>اطالوی اور انڈر لائن</u></i></p> <p><b><i><u>بولڈ، اطالوی اور انڈر لائن</u></i></b></p> </body> </html>

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

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

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

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

📊 موازنہ: بصری بمقابلہ سیمینٹک ٹیگز

بصری ٹیگ سیمینٹک ٹیگ مقصد کب استعمال کریں
<b> <strong> بولڈ ٹیکسٹ اہم مواد کے لیے <strong> استعمال کریں
<i> <em> اطالوی ٹیکسٹ زور دیے گئے مواد کے لیے <em> استعمال کریں
<u> <ins> انڈر لائن ٹیکسٹ ڈالے گئے مواد کے لیے <ins> استعمال کریں

📊 ٹیکسٹ فارمیٹنگ کے لیے CSS متبادل

<!-- HTML ٹیگز کی بجائے CSS کا استعمال --> <p style="font-weight: bold;">CSS کا استعمال کرتے ہوئے بولڈ ٹیکسٹ</p> <p style="font-style: italic;">CSS کا استعمال کرتے ہوئے اطالوی ٹیکسٹ</p> <p style="text-decoration: underline;">CSS کا استعمال کرتے ہوئے انڈر لائن ٹیکسٹ</p> <p style="font-weight: bold; font-style: italic; text-decoration: underline;">CSS کا استعمال کرتے ہوئے تینوں</p>
💡 مشورہ: CSS آپ کو زیادہ کنٹرول دیتا ہے اور ٹیکسٹ اسٹائل کرنے کا تجویز کردہ طریقہ ہے۔ تاہم، <strong> اور <em> جیسے HTML ٹیگز سیمینٹک معنی کے لیے اب بھی اہم ہیں۔

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
تمام بولڈ ٹیکسٹ کے لیے <b> کا استعمال سیمینٹک معنی کی کمی اہم مواد کے لیے <strong> استعمال کریں
تمام اطالوی ٹیکسٹ کے لیے <i> کا استعمال سیمینٹک معنی کی کمی زور دیے گئے مواد کے لیے <em> استعمال کریں
ٹیگز کو غلط طریقے سے نیسٹ کرنا صفحہ کی ساخت کو توڑ سکتا ہے صحیح نیسٹنگ: <b><i>text</i></b>
ٹیگز بند کرنا بھول جانا غلط HTML ہمیشہ ٹیگز بند کریں: <b>...</b>

📊 مشاہدات

  • <b> اور <strong> دونوں ٹیکسٹ کو بولڈ کرتے ہیں، لیکن <strong> سیمینٹک اہمیت شامل کرتا ہے۔
  • <i> اور <em> دونوں ٹیکسٹ کو اطالوی کرتے ہیں، لیکن <em> سیمینٹک زور شامل کرتا ہے۔
  • <u> اور <ins> دونوں ٹیکسٹ کو انڈر لائن کرتے ہیں، لیکن <ins> ڈالے گئے مواد کی نشاندہی کرتا ہے۔
  • آپ متعدد فارمیٹنگ اسٹائلز کو یکجا کرنے کے لیے ان ٹیگز کو نیسٹ کر سکتے ہیں۔
  • سیمینٹک ٹیگز رسائی اور SEO کے لیے بہتر ہیں۔

✅ نتیجہ

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

  • ایک HTML صفحہ بنایا جو <b>، <i>، اور <u> ٹیگز استعمال کرتا ہے۔
  • سیمینٹک متبادل کے بارے میں سیکھا: <strong>، <em>، اور <ins>۔
  • مزید پیچیدہ فارمیٹنگ بنانے کے لیے متعدد ٹیگز کو یکجا کیا۔
  • فارمیٹ شدہ ٹیکسٹ کو براؤزر میں دیکھا۔
📌 اہم: اگرچہ <b>، <i>، اور <u> اب بھی کام کرتے ہیں، سیمینٹک معنی کے لیے <strong>، <em>، اور <ins> استعمال کرنے کی سفارش کی جاتی ہے۔ خالص بصری اسٹائلنگ کے لیے، اس کی بجائے CSS استعمال کریں!
💡 اگلے اقدامات: ایک پیراگراف بنانے کی کوشش کریں جو تینوں فارمیٹنگ اسٹائلز استعمال کرتا ہو۔ مختلف ترتیبوں میں ٹیگز نیسٹ کرنے کا تجربہ کریں۔ نیز اسی فارمیٹنگ اثرات کو حاصل کرنے کے لیے CSS استعمال کرنے کی کوشش کریں!
⬅ Back to Practical Notebooks