How To Write Lists in Html And Block vs inline elements in Html:

·

2 min read

How To Write Lists in Html And Block vs inline elements in Html:

LISTS IN HTML:

Lists are used to maintain list of items. there are different types of lists , some lists need order and some don't.

There are three types of lists in HTML:

1. ordered list ---<ol>

2. unordered list ---<ul>

3. descriptive list /definition list----<dl>

1.ordered list <ol> :

All list items are between <ol> element and each list item annotated by <li> tag. By default ol will be 1,2,3......so on. If we want to start our ordered with alphabets or roman number we can use a properties like type=" a" or type="ii" and give where should it wants to starts like starts="f" or starts="vii"....etc.

Example:

<html>
<head>
<title>lists</title>
</head>
<body>
<h1>About ordered list</h1>
<ol type="a" starts="f">
    <li>milk</li>
     <li>coffee</li>
      <li>tea</li>
 </ol>
</body>
</html>

2.unordered list <ul> :

All list items are between <ul> element and each list item annotated by <li> tag .This list didn't give any order to the text . It display bullet points to the lists in html.

Example:

<html>
<head>
<title>lists</title>
</head>
<body>
<h1>About unordered list</h1>
<ul>
    <li>milk</li>
     <li>coffee</li>
      <li>tea</li>
 </ul>
</body>
</html>

3.descriptive list <dl> :

descriptive/definition list <dl> in html needs two things <dt> and <dd>. <dt> means descriptive term which is inside the <dl> and <dd> means descriptive data which gives the description of dt tag which mention inside the dt tag .

Example:

<html>
<head>
<title>lists</title>
</head>
<body>
<h1>About descriptive list</h1>
 <dl>
    <dt>www project</dt>
    <dd>hear we can mention the description or definition 
related to that dt tag.</dd>
 </dl>
</body>
</html>

About Block vs Inline Elements in HTML :

Block Element :-

Block elements don't allow next element to be beside them. general block element is div. ex : heading ,p , div, semantic elements etc.., are block elements.

Inline element:

Inline elements allow the next elements to appear on side or they may appear on other side. general inline element is span. ex : <span>,<a>,<input>