Learn web development 03 - HTML List tags and Img tag, Html video tag
Tags: html, css, beginners, webdev
Published: 2021-07-25 09:28:30

Hello, Welcome. My name is kunaal. This is a part of learn web development series.

In today's article, you'll learn about lists and images, video, audio tags in HTML. So, let's start.

#List tags
So till now we have see heading tags, para tags. But, how we can create lists in HTML. For lists we have

###Ordered list

`<ol></ol>`This is ordered list. This is used to create a list with numbers, or alphabets like that. But in order to create lists we need one more tag it's `<li></li>`. This is called list item. We define list item with this. Let's take an example.

```HTML
<ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>
```
######Output
![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eebh8a3n8g3ih5rbvpg2.PNG)

But, What if we want roman numbers, or alphabets. We can use `type=""` type atrribute. Remember we have learnt about attributes in the previous article.

Example of `type` attribute

```HTML
<ol type="i">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>
```
> Value for `type` attribute can be `1` - Number, `A` - Capital letters, `a` - small letters, `i` - roman numbers, `I` - Capital roman number.

######Output
![Capture-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bkem9iulyp1v30vltvf.PNG)

We have some more attribute that you can use with `ol`.

<table>
<th>Attributes</th>
<th>value</th>
<th>description</th>
<tr>
<td>
start
</td>
<td>
numbers(1,4,50..)
</td>
<td>
Specifies the start value of an ordered list
</td>
</tr>
<tr>
<td>
reversed
</td>
<td>
------
</td>
<td>
Specifies that the list order should be reversed(3,2,1)
</td>
</tr>
</table> 

###Unordered List

Now, what if we want un ordered list. Well, for that case, we have `<ul></ul>` unordered list tag. This work same as ordered list. The only difference is this don't add number.

For example
```HTML
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>React</li>
    <li>Node.js</li>
    <li>Psql</li>
</ul>
```
######Output
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96uk2x4nq32mfarlg461.PNG)

###Nested Lists
Nested lists refer to list inside another list inside another. Like nesting a list inside another.

Example for nested list.
```HTML
<ol>
    <li>Car</li>
    <li>Bike
        <ul>
            <li>Electric Bike</li>
            <li>Super Bike</li>
            <li>Bike</li>
        </ul>
    </li>
    <li>Plane
        <ul>
            <li>Fighter Plane</li>
            <li>Commercial Plane</li>
            <li>Private Plane</li>
        </ul>
    </li>
    <li>Helicopter</li>
</ol>
```
######Output
![Capture-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcfdsa2hijpzpai2g335.PNG)
That's sit about Lists in HTML.

#Image Tag
`<img>` Image tag. 
This tag is used to add image on the page. Notice we don't close image tag. `img` tag work with some attributes.
1.`src` - stands for source. It is used to locate image path.
2.`alt` - stands for alternate text. If the image for some reason cannot be displayed.

Let's see an example.

```HTML
<img src="cat.png" alt="cat">
```

######Output
![Capture-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rfbphf97xhczai5wpay.PNG)

###Video Tag

`<video></video>` Video tag is used to add Video in web page.With this tag you have to you `<source>` tag also. And `<source>` tag is non closing tag. Like you define `img` path using `src` attributes. The same attribute we use to locate video.

Let's take an example

```HTML
<video controls autoplay muted loop>
    <source src="video.mp4">
</video>
```
######Output
![Capture-6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u07axixxyeciwdfzgvxi.PNG)

Attributes used in above code.

<table>
<th>attribute</th>
<th>description</th>
<tr>
<td>
Controls
</td>
<td>
show controls button for the video.
</td>
</tr>
<tr>
<td>
autoplay
</td>
<td>
autoplay the video on page load
</td>
<tr>
<td>
muted
</td>
<td>
mute the video
</td>
</tr>
<tr>
<td>
loop
</td>
<td>
play the video in loop
</td>
</tr>
</tr>
</table>

###Audio tag.

And the last but not least. `<audio>` Audio tag.
This is used to add audio on the page. And it is very easy to understand by the code.
```HTML
<audio src="audio.mp3" controls></audio>
```
######Output
![Capture-7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woy23enxzy6m7n7r063d.PNG)

So, that's it for today. I hope you understood each and everything. In the next article we'll learn about forms and tables in HTML. So make sure you follow me.

#Homework
I appreciate, If you do homework as well for you better practice. Today's homework is.
1. Try all the above example on your own
2. Try adding video attributes to audio, and image tags to see what attributes work with them.
3. Make a page which contains a para, heading, list, nested lists, two images and one video or audio. Add some links also.

If you want, you can tag your homework to my [Instagram](https://www.instagram.com/modern_web_channel/). I'll be glad to see you developing web pages.

So, that's sit, if I missed something or you have any doubt feel free to ask me in discussion.

If you like, you can subscribe my [youtube channel](https://www.youtube.com/c/modern_web?sub_confirmation=1).I create awesome web development tutorials. You can also watch tutorial on [Gradient Infinity loading animation](https://www.youtube.com/watch?v=89IFrt_Unj0)

Thanks For reading.