EZ

EZNotes

📋 Practical 63: HTML code for unordered list

Learn how to create bulleted lists using the <ul> (unordered list) and <li> (list item) tags with different bullet styles.

🎯 Aim

To write an HTML program that demonstrates the use of <ul> (unordered list) and <li> (list item) tags to create bulleted lists with different bullet styles.

🛠️ What You Need

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

📖 Introduction

An unordered list in HTML is used to display a list of items that are not in a specific order. The list items are marked with bullets by default.

  • <ul> — defines the unordered list container
  • <li> — defines each list item inside the list
💡 Tip: Unordered lists are perfect for listing items where the order doesn't matter — like shopping lists, features, categories, or navigation menus.

📊 Preview of the Output

🛒 Shopping List (Default Disc Bullets)
  • Milk
  • Bread
  • Eggs
  • Butter
  • Cheese
🔄 Different Bullet Styles
Disc (default):
  • Item 1
  • Item 2
  • Item 3
Circle:
  • Item 1
  • Item 2
  • Item 3
Square:
  • Item 1
  • Item 2
  • Item 3
None:
  • Item 1
  • Item 2
  • Item 3
📂 Nested Unordered List
  • Fruits
    • Apple
    • Banana
    • Orange
  • Vegetables
    • Carrot
    • Spinach
    • Tomato

📝 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 63: Demonstrating unordered lists --> <html> <head> <title>Unordered List Demo</title> </head> <body> <h1>Unordered Lists Example</h1> <!-- Basic unordered list with default disc bullets --> <h2>Shopping List (Disc Bullets)</h2> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> <li>Butter</li> <li>Cheese</li> </ul> <!-- Unordered list with circle bullets --> <h2>Circle Bullets</h2> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- Unordered list with square bullets --> <h2>Square Bullets</h2> <ul type="square"> <li>Pakistan</li> <li>India</li> <li>Bangladesh</li> </ul> <!-- Nested unordered list --> <h2>Nested Unordered List</h2> <ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </li> <li>Vegetables <ul> <li>Carrot</li> <li>Spinach</li> <li>Tomato</li> </ul> </li> </ul> <!-- Unordered list without bullets (using CSS) --> <h2>No Bullets (CSS)</h2> <ul style="list-style-type: none;"> <li>Home</li> <li>About</li> <li>Contact</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: "unordered_list.html" or "practical63.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 unordered_list.html file.
  3. It will open in your default web browser.
  4. You will see all the unordered list examples with different bullet styles.

📊 Unordered List Bullet Types

Type Attribute Bullet Style Example
type="disc" (default) Filled circle (●)
  • Item 1
  • Item 2
type="circle" Hollow circle (○)
  • Item 1
  • Item 2
type="square" Filled square (■)
  • Item 1
  • Item 2
list-style-type: none; (CSS) No bullets
  • Item 1
  • Item 2

📊 CSS Alternatives for Bullet Styles

<!-- CSS alternatives for unordered list styling --> <!-- Disc bullets (default) --> <ul style="list-style-type: disc;"> <li>Item 1</li> </ul> <!-- Circle bullets --> <ul style="list-style-type: circle;"> <li>Item 1</li> </ul> <!-- Square bullets --> <ul style="list-style-type: square;"> <li>Item 1</li> </ul> <!-- Custom image as bullet --> <ul style="list-style-image: url('bullet.png');"> <li>Item 1</li> </ul>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Forgetting the <ul> tag List items won't be grouped Wrap <li> tags inside <ul>
Using <ul> without <li> Invalid HTML structure Always use <li> for each item
Nesting incorrectly Broken list structure Nested <ul> must be inside <li>
Using type attribute in HTML5 Deprecated in HTML5 Use CSS list-style-type instead
Not closing tags Invalid HTML Always close: <ul>...</ul>

📊 Observations

  • <ul> creates a bulleted list where order doesn't matter.
  • <li> defines each list item.
  • Default bullet style is disc (filled circle).
  • You can change bullet style using type attribute (deprecated) or CSS list-style-type.
  • Lists can be nested inside each other for hierarchical content.
  • CSS provides more styling options including custom images as bullets.

✅ Result

You have successfully:

  • Created an HTML page with <ul> and <li> tags.
  • Used different bullet styles: disc, circle, and square.
  • Created nested unordered lists.
  • Learned about CSS alternatives for list styling.
  • Viewed all examples in a browser.
📌 Important: The type attribute on <ul> is deprecated in HTML5. Use CSS list-style-type for modern web development!
💡 Next Steps: Try creating a nested list with 3 levels of nesting. Experiment with CSS list-style-image to use custom images as bullets. Create a navigation menu using unordered lists styled with CSS!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <ul> (غیر ترتیب شدہ فہرست) اور <li> (فہرست کا آئٹم) ٹیگز کے استعمال کو مختلف بلٹ اسٹائلز کے ساتھ ظاہر کرتا ہے۔

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

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

📖 تعارف

HTML میں غیر ترتیب شدہ فہرست کا استعمال ان آئٹمز کی فہرست ظاہر کرنے کے لیے کیا جاتا ہے جو کسی مخصوص ترتیب میں نہیں ہیں۔ فہرست کے آئٹمز ڈیفالٹ طور پر بلٹس کے ساتھ نشان زد ہوتے ہیں۔

  • <ul> — غیر ترتیب شدہ فہرست کا کنٹینر مخصوص کرتا ہے
  • <li> — فہرست کے اندر ہر آئٹم کی وضاحت کرتا ہے
💡 مشورہ: غیر ترتیب شدہ فہرستیں ان آئٹمز کی فہرست کے لیے بہترین ہیں جہاں ترتیب کی کوئی اہمیت نہیں ہوتی — جیسے شاپنگ لسٹ، خصوصیات، زمرہ جات، یا نیویگیشن مینو۔

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

🛒 شاپنگ لسٹ (ڈیفالٹ ڈسک بلٹس)
  • دودھ
  • روٹی
  • انڈے
  • مکھن
  • پنیر
🔄 مختلف بلٹ اسٹائلز
ڈسک (ڈیفالٹ):
  • آئٹم 1
  • آئٹم 2
  • آئٹم 3
سرکل:
  • آئٹم 1
  • آئٹم 2
  • آئٹم 3
اسکوائر:
  • آئٹم 1
  • آئٹم 2
  • آئٹم 3
کوئی نہیں:
  • آئٹم 1
  • آئٹم 2
  • آئٹم 3
📂 نیسٹڈ غیر ترتیب شدہ فہرست
  • پھل
    • سیب
    • کیلا
    • سنترہ
  • سبزیاں
    • گاجر
    • پالک
    • ٹماٹر

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 63: Demonstrating unordered lists --> <html> <head> <title>Unordered List Demo</title> </head> <body> <h1>غیر ترتیب شدہ فہرست کی مثالیں</h1> <!-- ڈیفالٹ ڈسک بلٹس کے ساتھ بنیادی غیر ترتیب شدہ فہرست --> <h2>شاپنگ لسٹ (ڈسک بلٹس)</h2> <ul> <li>دودھ</li> <li>روٹی</li> <li>انڈے</li> <li>مکھن</li> <li>پنیر</li> </ul> <!-- سرکل بلٹس کے ساتھ غیر ترتیب شدہ فہرست --> <h2>سرکل بلٹس</h2> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- اسکوائر بلٹس کے ساتھ غیر ترتیب شدہ فہرست --> <h2>اسکوائر بلٹس</h2> <ul type="square"> <li>پاکستان</li> <li>بھارت</li> <li>بنگلہ دیش</li> </ul> <!-- نیسٹڈ غیر ترتیب شدہ فہرست --> <h2>نیسٹڈ غیر ترتیب شدہ فہرست</h2> <ul> <li>پھل <ul> <li>سیب</li> <li>کیلا</li> <li>سنترہ</li> </ul> </li> <li>سبزیاں <ul> <li>گاجر</li> <li>پالک</li> <li>ٹماٹر</li> </ul> </li> </ul> <!-- بلٹس کے بغیر غیر ترتیب شدہ فہرست (CSS کا استعمال) --> <h2>بلٹس کے بغیر (CSS)</h2> <ul style="list-style-type: none;"> <li>ہوم</li> <li>تعارف</li> <li>رابطہ</li> </ul> </body> </html>

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

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

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

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

📊 غیر ترتیب شدہ فہرست کی بلٹ اقسام

type صفت بلٹ اسٹائل مثال
type="disc" (ڈیفالٹ) بھرا ہوا دائرہ (●)
  • آئٹم 1
  • آئٹم 2
type="circle" کھوکھلا دائرہ (○)
  • آئٹم 1
  • آئٹم 2
type="square" بھرا ہوا مربع (■)
  • آئٹم 1
  • آئٹم 2
list-style-type: none; (CSS) کوئی بلٹ نہیں
  • آئٹم 1
  • آئٹم 2

📊 بلٹ اسٹائلز کے لیے CSS متبادل

<!-- غیر ترتیب شدہ فہرست اسٹائلنگ کے لیے CSS متبادل --> <!-- ڈسک بلٹس (ڈیفالٹ) --> <ul style="list-style-type: disc;"> <li>آئٹم 1</li> </ul> <!-- سرکل بلٹس --> <ul style="list-style-type: circle;"> <li>آئٹم 1</li> </ul> <!-- اسکوائر بلٹس --> <ul style="list-style-type: square;"> <li>آئٹم 1</li> </ul> <!-- حسب ضرورت تصویر بطور بلٹ --> <ul style="list-style-image: url('bullet.png');"> <li>آئٹم 1</li> </ul>

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
<ul> ٹیگ بھول جانا فہرست کے آئٹمز گروپ نہیں ہوں گے <li> ٹیگز کو <ul> کے اندر لپیٹیں
<li> کے بغیر <ul> کا استعمال غلط HTML ڈھانچہ ہر آئٹم کے لیے ہمیشہ <li> استعمال کریں
غلط طریقے سے نیسٹ کرنا ٹوٹی ہوئی فہرست کا ڈھانچہ نیسٹڈ <ul> <li> کے اندر ہونا چاہیے
HTML5 میں type صفت کا استعمال HTML5 میں متروک اس کی بجائے CSS list-style-type استعمال کریں
ٹیگز بند نہ کرنا غلط HTML ہمیشہ بند کریں: <ul>...</ul>

📊 مشاہدات

  • <ul> ایک بلٹڈ فہرست بناتا ہے جہاں ترتیب کی کوئی اہمیت نہیں ہوتی۔
  • <li> ہر فہرست آئٹم کی وضاحت کرتا ہے۔
  • ڈیفالٹ بلٹ اسٹائل ڈسک (بھرا ہوا دائرہ) ہے۔
  • آپ type صفت (متروک) یا CSS list-style-type کا استعمال کرکے بلٹ اسٹائل تبدیل کر سکتے ہیں۔
  • فہرستوں کو درجہ بندی کے مواد کے لیے ایک دوسرے کے اندر نیسٹ کیا جا سکتا ہے۔
  • CSS بلٹس کے طور پر حسب ضرورت تصاویر سمیت مزید اسٹائلنگ آپشنز فراہم کرتا ہے۔

✅ نتیجہ

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

  • <ul> اور <li> ٹیگز کے ساتھ ایک HTML صفحہ بنایا۔
  • مختلف بلٹ اسٹائلز کا استعمال کیا: ڈسک، سرکل، اور اسکوائر۔
  • نیسٹڈ غیر ترتیب شدہ فہرستیں بنائیں۔
  • فہرست اسٹائلنگ کے لیے CSS متبادل کے بارے میں سیکھا۔
  • تمام مثالیں براؤزر میں دیکھیں۔
📌 اہم: <ul> پر type صفت HTML5 میں متروک ہے۔ جدید ویب ڈیولپمنٹ کے لیے CSS list-style-type استعمال کریں!
💡 اگلے اقدامات: 3 سطحوں کی نیسٹنگ کے ساتھ ایک نیسٹڈ فہرست بنانے کی کوشش کریں۔ بلٹس کے طور پر حسب ضرورت تصاویر استعمال کرنے کے لیے CSS list-style-image کے ساتھ تجربہ کریں۔ CSS کے ساتھ اسٹائل کردہ غیر ترتیب شدہ فہرستوں کا استعمال کرتے ہوئے نیویگیشن مینو بنائیں!
⬅ Back to Practical Notebooks