DEV Community

loading...
Cover image for Learn web development 03 - HTML List tags and Img tag, Html video tag

Learn web development 03 - HTML List tags and Img tag, Html video tag

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
・4 min read

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.

<ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
Output

Capture

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

<ol type="i">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Value for type attribute can be 1 - Number, A - Capital letters, a - small letters, i - roman numbers, I - Capital roman number.

Output

Capture-2

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

Attributes value description
start numbers(1,4,50..) Specifies the start value of an ordered list
reversed ------ Specifies that the list order should be reversed(3,2,1)

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

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>React</li>
    <li>Node.js</li>
    <li>Psql</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-3

Nested Lists

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

Example for nested list.

<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>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-4
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.

<img src="cat.png" alt="cat">
Enter fullscreen mode Exit fullscreen mode
Output

Capture-5

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

<video controls autoplay muted loop>
    <source src="video.mp4">
</video>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-6

Attributes used in above code.

attribute description
Controls show controls button for the video.
autoplay autoplay the video on page load
muted mute the video
loop play the video in loop

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.

<audio src="audio.mp3" controls></audio>
Enter fullscreen mode Exit fullscreen mode
Output

Capture-7

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. 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.I create awesome web development tutorials. You can also watch tutorial on Gradient Infinity loading animation

Thanks For reading.

Discussion (0)