HTML માં List નાં પ્રકાર જણાવી સમજાવો| State types of list in HTML and explain.

HTML (HyperText Markup Language) માં લિસ્ટ (Lists) એ વેબ પેજ પર માહિતીને સુઘડ અને ક્રમબદ્ધ રીતે રજૂ કરવાનું એક મહત્વનું સાધન છે. HTML માં મુખ્યત્વે ત્રણ પ્રકારના લીસ્ટ (List) છે, જેનો ઉપયોગ વેબપેજ પર માહિતીને સુવ્યવસ્થિત રીતે દર્શાવવા માટે થાય છે.

 

આ ત્રણ પ્રકારો નીચે મુજબ છે:

1. Ordered List (નંબરવાળી લિસ્ટ)
2. Unordered List (બુલેટવાળી લિસ્ટ)
3. Definition List (વ્યાખ્યા લિસ્ટ)

 

નીચે આ ત્રણેય પ્રકારની લિસ્ટને વિગતવાર સમજીએ

1. અનઓર્ડર્ડ લીસ્ટ (Unordered List)

અનઓર્ડર્ડ લીસ્ટને બુલેટ પોઈન્ટ્સ (Bullet Points) દ્વારા દર્શાવવામાં આવે છે. આ પ્રકારના લીસ્ટમાં ક્રમનું કોઈ મહત્વ નથી હોતું.

·         તેને <ul> ટેગથી શરૂ કરવામાં આવે છે.

·         લીસ્ટની દરેક આઇટમ માટે <li> (લીસ્ટ આઇટમ) ટેગનો ઉપયોગ થાય છે.

ઉદાહરણ:

HTML

<ul>

  <li>સફરજન</li>

  <li>કેળા</li>

  <li>નારંગી</li>

</ul>

ઉપરના કોડનું આઉટપુટ નીચે મુજબ દેખાશે:

·         સફરજન

·         કેળા

·         નારંગી

 

2. ઓર્ડર્ડ લીસ્ટ (Ordered List)

ઓર્ડર્ડ લીસ્ટને સંખ્યાઓ (Numbers) અથવા અક્ષરો (Letters) દ્વારા ક્રમબદ્ધ રીતે દર્શાવવામાં આવે છે. આ પ્રકારના લીસ્ટમાં ક્રમનું મહત્વ હોય છે.

·         તેને <ol> ટેગથી શરૂ કરવામાં આવે છે.

·         લીસ્ટની દરેક આઇટમ માટે <li> ટેગનો ઉપયોગ થાય છે.

ઉદાહરણ:

HTML

<ol>

  <li>પ્રથમ પગલું</li>

  <li>બીજું પગલું</li>

  <li>ત્રીજું પગલું</li>

</ol>

ઉપરના કોડનું આઉટપુટ નીચે મુજબ દેખાશે:

1.      પ્રથમ પગલું

2.      બીજું પગલું

3.      ત્રીજું પગલું

<ol> ટેગમાં type એટ્રિબ્યુટનો ઉપયોગ કરીને ક્રમનો પ્રકાર બદલી શકાય છે, જેમ કે:

·         type="1" (ડિફોલ્ટ): 1, 2, 3...

·         type="A": A, B, C...

·         type="a": a, b, c...

·         type="I": I, II, III...

·         type="i": i, ii, iii...

 

3. ડેફિનીશન લીસ્ટ (Description/Definition List)

ડેફિનીશન લીસ્ટનો ઉપયોગ કોઈ શબ્દ અને તેની વ્યાખ્યા (Description) દર્શાવવા માટે થાય છે. આ લીસ્ટમાં દરેક પદ અને તેની સમજૂતીને જોડીમાં દર્શાવવામાં આવે છે.

·         તેને <dl> ટેગથી શરૂ કરવામાં આવે છે.

·         શબ્દ (પદ) માટે <dt> (ડેફિનીશન ટર્મ) ટેગનો ઉપયોગ થાય છે.

·         વ્યાખ્યા (સમજૂતી) માટે <dd> (ડેફિનીશન ડિસ્ક્રિપ્શન) ટેગનો ઉપયોગ થાય છે.

ઉદાહરણ:

HTML

<dl>

  <dt>HTML</dt>

  <dd>HyperText Markup Language - વેબપેજની રચના માટે વપરાતી માર્કઅપ ભાષા.</dd>

  <dt>CSS</dt>

  <dd>Cascading Style Sheets - વેબપેજના દેખાવને સુધારવા માટે વપરાતી સ્ટાઇલશીટ ભાષા.</dd>

</dl>

ઉપરના કોડનું આઉટપુટ નીચે મુજબ દેખાશે:

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language - વેબપેજની રચના માટે વપરાતી માર્કઅપ ભાષા.</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets - વેબપેજના દેખાવને સુધારવા માટે વપરાતી સ્ટાઇલશીટ ભાષા.</dd>

</dl>