# HTML - Lists, Images, Interlinking, Audio, video.

**Images** are a common element of web design, and they serve a number of different purposes on websites.

* Some of the main uses of images on websites include:
    
    1. Visual appeal
        
    2. Branding
        
    3. Illustration
        
    4. Navigation.
        

```xml
<img src="" alt="" height="" width=" " title="">
```

**Audio**

HTML provides a way to play audio on web pages through the &lt;audio&gt; element. The &lt;audio&gt; element is a self-closing tag, meaning it does not have a closing tag, and it is used to embed audio files in web pages.

* Attributes
    
    ● src.
    
    ● controls.
    
    ● muted.
    
    ● autoplay.
    

```xml
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Audio</title>
</head>
<body>
    <audio src="SONG.mp3" controls autoplay></audio>
    
    <audio controls autoplay>
        <source src="SONG.mp3">
    </audio>
</body>
</html>
```

```xml
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video Page</title>
</head>
<body>
    <img src="https://images.pexels.com/photos/13766882/pexels-photo-13766882.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="" height="500px" width="500px" title="Image">
    <video src="https://player.vimeo.com/external/463902394.sd.mp4?s=e51f3979e6629a9309d6299f46e94957bd5a647d&profile_id=164&oauth2_token_id=57447761" autoplay  height="500px" width="500px" muted ></video>
    <video autoplay>
        <source src="https://player.vimeo.com/external/427710919.sd.mp4?s=a6f4a02af947baa4185f77f80d1539401a298ccc&profile_id=164&oauth2_token_id=57447761" >
    </video>
</body>
</html>
```

### List

Types of Lists in HTML

1. **Unordered List.**
    
2. **Ordered List.**
    
3. **Description List.**
    

An unordered list in HTML is a list of items that are displayed in no specific order. Unordered lists are created using the &lt;ul&gt; element in HTML, and each item in the list is represented by an &lt;li&gt; element.

An ordered list in HTML is a list of items that are displayed in a specific numerical or alphabetical order. Ordered lists are created using the &lt;ol&gt; element in HTML, and each item in the list is represented by an &lt;li&gt; element.

There can be 4 kinds of markers for unordered lists:

● disc ● circle ● square ● None.

```xml
<ol>
    <li type="I">one</li>
    <li type="A">two</li>
    <li>three</li>
    <li type="I">four</li>
    <li>five</li>
    
</ol>
```

```xml
<ul>
    <li type="square">one</li>
    <li type="disc">two</li>
    <li type="none">three</li>
    <li>four</li>
    <li>five</li>
</ul>
```

A **description list** in HTML is a way to display a list of terms and their corresponding descriptions. It is similar to a dictionary, where each term is followed by its definition. Description lists are created using the &lt;dl&gt; element, with each term represented by an &lt;dt&gt; element and each description represented by an &lt;dd&gt; element.

The &lt;a&gt; element, also known as the anchor tag, is used in HTML to create a hyperlink. The &lt;a&gt; element allows you to specify the destination of the link using the attribute.

```xml
<dl>
    <dt>Iphone dsdsds</dt>
    <dd>kidney</dd>
    <dd>paisa</dd>
    <dt>agshashajhan</dt>
    <dd>hasb</dd>
    <dd>jasbkja</dd>
</dl>
```

### Interlinking

The &lt;a&gt; element, also known as the anchor tag, is used in HTML to create a hyperlink. The &lt;a&gt; element allows you to specify the destination of the link using the href attribute.

```xml
<a href="https://pwskills.com/" target="NEWTAB"> PWSKILL </a>
```

***EXAMPLE.***

```xml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<ol>
    <li type="I">one</li>
    <li type="A">two</li>
    <li>three</li>
    <li type="I">four</li>
    <li>five</li>
    
</ol>

<ul>
    <li type="square">one</li>
    <li type="disc">two</li>
    <li type="none">three</li>
    <li>four</li>
    <li>five</li>
</ul>

<dl>
    <dt>Iphone dsdsds</dt>
    <dd>kidney</dd>
    <dd>paisa</dd>
    <dt>agshashajhan</dt>
    <dd>hasb</dd>
    <dd>jasbkja</dd>
</dl>

</body>
</html>
```

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/f1c443a0-7f59-4072-b396-4ab527a7c6e0/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230128%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230128T150427Z&X-Amz-Expires=86400&X-Amz-Signature=e27297d792b07678daa3b51c081a4978d4b1fb95266d75dd1d843c45b35c9c47&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject align="center")
