Read!!! Learn!!! Practice!!! HTML!!!

Day-5 Lists in HTML and Block and Inline elements

Garima sharma's photo
Garima sharma
·

4 min read

Table of contents

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:

<address> <article> <aside> <blockquote> <canvas\> <dd> <div> <dl><dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr\> <li> <main> <nav> <noscript> <ol\> <p> <pre> <section><table> <tfoot> <ul> <video>

<!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:

Inline elements allow the next elements to appear on side or they may appear on other side.

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This 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:

<a> <abbr> <acronym> <b> <bdo> <big> <br\> <button> <cite> <code><dfn> <em> <i\> <img> <input\> <kbd\> <label\> <map\> <object> <output> <q> <samp\> <script\> <select> <small> <span> <strong\><sub\> <sup> <textarea\> <time\> <tt\> <var\>

Note: An inline element cannot contain a block-level element!

<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>
Html lists