Lists In HTML:

Lists are used to maintain list of items.

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 numbers ex 1,2... If we want to start our ordered list with alphabets or roman number we can use a properties like type=" a" or type="i" and give where should it wants to starts like start="f" or starts="v"....etc.

Example:

<html>
<head>
<title>lists</title>
</head>
<body>
<h1>About ordered list</h1>
<ol type="1" start="100">
        <li>raj</li>
        <li>vani</li>
        <li>shekhar</li>
    </ol>
<h3>Fruits list</h3>
          <ol type="a" start="16">
            <li>apple</li>
            <li>mango</li>
            <li>banana</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>
    <h3>Grocery list</h3>
          <ul>
            <li>Lays</li>
            <li>chocolate</li>
            <li>potato</li>
          </ul>
 </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>
 <h3>HTML History</h3>
          <dl>
             <dt>1993</dt>
             <dd>HTML started</dd>
            <dt>1995</dt>
            <dd>HTML2 started</dd>
            <dt>1999</dt>
            <dd>HTML4- HTML4.1 started</dd>
            <dt>2014</dt>
            <dd>HTML5 started</dd>
          </dl>

</body>
</html>

About Block vs Inline Elements in HTML :

Block Element :-

Block elements don't allow next element to be beside them.

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

General block element is div. ex : heading ,p , div, semantic elements etc.., are block elements.

Here are the block-level elements in HTML:

<!DOCTYPE html>
<html>
<body>

<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>

<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

</body>
</html>

Inline element:

In line elements allow the next elem ents to appear on side or t hey may a ppea r on oth er side.

An inl ine elemen t does n ot sta rt on a new line.

An inl ine e l ement only ta ke s up as mu c h widt h as necess ary.

T his is a <span> element inside a paragraph. General inline element is span.

ex : <span>,<a>,<input>

<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

</body>
</html>

Here are the inline elements in HTML:

N ote: A n in li n e elem ent ca nn ot c on tai n a blo ck -level el emen t!

<body>
  <h1>Hi</h1><p>Bye</p>
 <a href=""><img src="./images/pexels-anjana-c-674010.jpg" 
   alt="" height="20"></a><a href="https://www.google.co.n">
   Click me</a>
 <span><p><a href="">Hi</a></p></span>
 <!-- general block element is div  and general inline element is 
      span-->


<div>
    <p>Lorem ipsum dolor sit amet consectetur <span>adipisicing</span> elit. Porro nulla neque quaerat? Porro cum dolorem cupiditate dolorum, ipsum quibusdam enim!</p>
    <a href="">ancho1</a>
</div>
<
    <a href="">anchor2</a>
    <p>hkdfj</p>
</div>



</body>

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold;">
blue</span> eyes and my father has <span style="color:darkolivegreen;
font-weight:bold;">dark green</span> eyes.</p>

</body>
</html>

Day-5 Lists in HTML and Block and Inline elements

Table of contents

Lists In HTML:

1.ordered list <ol> :

2.unordered list <ul> :

3.descriptive list <dl> :

About Block vs Inline Elements in HTML :

Block Element :-

Inline element:

The <div> Element

The <span> Element

Subscribe to my newsletter

Garima sharma

Garima sharma