HTML <ul> Tag

124    Share

Horizontal List with CSS


HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:


Live Demo & Try it yourself! Read More » »

Nested HTML Lists


ਨੈਸਟਿਡ ਲਿਸਟਾਂ (Nesting of Lists): Lists can be nested (list inside list):

ਇੱਕ ਨੈਸਟਡ ਲਿਸਟ ਨੂੰ ਸਬ-ਲਿਸਟ (Sub-list) ਵਜੋਂ ਵੀ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ HTML ਵਿੱਚ ਕਈ ਨਵੀਂ ਕਿਸਮ ਦੀ ਲਿਸਟ ਨਹੀਂ ਹੈ ਅਤੇ ਨਾ ਹੀ ਇਹਨਾਂ ਲਿਸਟਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸਾਧਾਰਣ ਸ਼ਬਦਾਂ ਵਿੱਚ ਅਸੀਂ ਇਹ ਵੀ ਕਹਿ ਸਕਦੇ ਹਾਂ ਕਿ ਇਹ ਇੱਕ ਲਿਸਟ ਦੇ ਅੰਦਰ ਇੱਕ ਹੋਰ ਲਿਸਟ ਹੁੰਦੀ ਹੈ। ਸਬ-ਲਿਸਟ ਨੂੰ <> ਟੈਗ ਦੇ ਚਾਈਲਡ ਐਲੀਮੈਂਟ (Child Element) ਵੱਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਵੱਖ- ਵੱਖਰੀਆਂ ਕਿਸਮਾਂ ਦੀਆਂ ਲਿਸਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਵੀ ਨੈਸਟਿਡ ਲਿਸਟਾਂ ਤਿਆਰ ਕਰ ਸਕਦੇ ਹਾਂ। HTML ਡਾਕੂਮੈਂਟਸ ਵਿੱਚ ਨੇਸਟਿਡ ਲਿਸਟਾਂ ਬਣਾਉਣ ਲਈ ਹੇਠ ਲਿਖੀ ਪ੍ਰਕਿਰਿਆ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ


Live Demo & Try it yourself! Read More » »

Circle Unordered List


ਅਨਆਰਟਰ ਲਿਸਟ ਦੇ ਐਡੀਊਟਰ (Atributes of Urdered t ਜੇ ਅਸੀਂ ਅਨਆਰਡਰਡ ਲਿਸਟ ਲਈ ਬੁਲੇਟ ਦੀ ਕਿਸਮ ਨੂੰ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ <ul> ਰੋਗ ਦੀ Type ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। Type ਐਂਟਰੀਬਿਊਟ ਲਈ ਆਪਸ਼ਨਾਂ ਹੇਠਾਂ ਵਿਚ ਅਨੁਸਾਰ ਹੋ ਸਕਦੀਆਂ ਹਨ।

<ul type="square">

<ul type="disc">

<ul type = "circle">

ਮੂਲ ਰੂਪ (by default) ਵਿੱਚ ਡਿਸਕ (Disc) ਕਿਸਮ ਦੀਆਂ ਬੁਲੇਟਸ ਦੀ ਵਰਤੋਂ <ul> ਟੈਗ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਸ ਤਰ੍ਹਾਂ ਅਸੀਂ HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਅਨਆਰਡਰਡ ਲਿਸਟ ਦੇ Type ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬੁਲੇਟ ਸਟਾਈਲ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਾਂ


Live Demo & Try it yourself! Read More » »

Unordered HTML List


Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

 

HTML ਲਿਸਟਾਂ ਦੀ ਵਰਤੋਂ ਵੱਖ - ਵੱਖ ਆਈਟਮਾਂ ਦੀ ਸੂਚੀ ਨੂੰ ਵਧੀਆ ਢੰਗ ਨਾਲ ਪੇਸ਼ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸਾਡੇ ਰੋਜ਼ਾਨਾ ਜੀਵਨ  ਵਿੱਚ ਅਸੀ ਬਹੁਤ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਦੀਆਂ ਲਿਸਟਾਂ (ਸੂਚੀਆਂ) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜਿਵੇਂ ਕਿ ਖਰੀਦਦਾਰੀ ਸੰਬੰਧੀ ਸੂਚੀ, ਵੱਖ - ਵੱਖ ਕੰਮਾ ਨੂੰ ਕਰਨ ਸੰਬੰਧੀ ਸੂਚੀ ਆਦਿ। ਸਾਰੀਆਂ ਲਿਸਟਾਂ ਵਿੱਚ ਇੱਕ ਜਾਂ ਵਧੇਰੇ ਆਈਟਮਾਂ ਸ਼ਾਮਿਲ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਆਰਟੀਕਲਜ, ਵੈਬਸਾਈਟਾਂ ਦੇ ਨੇਵੀਗੇਸ਼ਨ ਮੀਨੂੰਜ਼ ਅਤੇ ਈ - ਕਾਮਰਸ ਵੈਬਸਾਈਟਾਂ ਤੇ ਉਤਪਾਦਾਂ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਆਦਿ ਲਈ ਸੂਚੀਆਂ ਦੀ ਨਿਰੰਤਰ ਵਰਤੋ ਹੁੰਦੀ ਰਹਿੰਦੀ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਇਹ ਲਿਸਟਾਂ ਕਿਸੇ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਨੂੰ ਕੁੱਝ ਲਾਈਨਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਵਿੱਚ ਮਹਤੱਵਪੂਰਨ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੇ ਹਨ। 


1. ਅਨਆਰਡਰ ਲਿਸਟ ਜਾਂ ਬੁਲੇਟਿਡ ਲਿਸਟ 
2. ਆਰਡਰਡ ਲਿਸਟ ਜਾਂ ਨੰਬਰਡ ਲਿਸਟ
3. ਡੇਫੀਨੇਸ਼ਨ ਲਿਸਟ ਜਾਂ ਡਿਸਕ੍ਰਿਪਸ਼ਨ ਲਿਸਟ

 

ਅਨਆਰਡਰਡ ਲਿਸਟ: ਅਨ-ਆਰਡਰਡ ਲਿਸਟ ਉਹ ਲਿਸਟ ਹੁੰਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਲਿਸਟ - ਆਈਟਮਾਂ ਦਾ ਕ੍ਰਮ ਕੋਈ ਮਹੱਤਵ ਨਹੀਂ ਰੱਖਦਾ। ਇਸ ਲਿਸਟ ਵਿੱਚ ਸਾਰੀਆਂ ਲਿਸਟ - ਆਈਟਮਾਂ ਨੂੰ ਬੁਲੇਟਸ ਨਾਲ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਹੀ ਕਾਰਨ ਹੈ ਕਿ ਅਨਆਰਡਰਡ ਲਿਸਟ ਨੂੰ ਬੁਲੇਟਿਡ ਲਿਸਟ ਵਜੋਂ ਵੀ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ। HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਇਹ ਲਿਸਟਾਂ ਬਣਾਉਣ ਲਈ <UL> ਟੈਗ ਦੀ ਵਰਤੋ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ UL ਦਾ ਅਰਥ ਹੈ ਅਨਆਰਡਰਡ ਲਿਸਟ। <UL> ਟੈਗ ਇਕ ਪੇਅਰਡ ਟੈਗ ਹੈ। ‌ਲਿਸਟਾਂ ਦੀਆਂ ਸਾਰੀਆਂ ਆਈਟਮਾਂ <UL> ਅਤੇ </UL> ਟੈਗਜ ਵਿਚਕਾਰ ਰੱਖੀਆ ਜਾਂਦੀਆਂ ਹਨ। ਇਸ ਲਿਸਟ ਦੀ ਹਰ ਆਈਟਮ <LI> ਟੈਗ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ, ਜਿਸਦਾ ਅਰਥ ਹੈ ਕਿ ਲਿਸਟ ਆਈਟਮ। ਅਸੀ <UL> ਟੈਗ ਦੇ Type ਐਟਰੀਬਿਊਟਜ਼ ਦੀ ਮਦਦ ਨਾਲ ਬੁਲੈਟਸ ਦੀ ਕਿਸਮ ਵੀ ਬਦਲ ਸਕਦੇ ਹਾਂ।


Live Demo & Try it yourself! Read More » »