What does ul mean in Html
Web structure starts with solid HTML. Learn how What does ul mean in Html contributes to accessible and semantic web pages in the tutorial below.
The ul is a tag in Html. Html <ul> tag is used for designing the unordered list of items. The <ul> tag is a pair tag, so it is mandatory to close this tag. For defining the items in the list, we have to use <li> tag in the <ul> tag. If we want to create the ordered list of items in the Html document, then we have to use the <ol> tag .
This tag also uses the attribute type , which sets the bullet style for the list items. We can specify following values in the type attribute:
- Disc
- Circle
- Square
The comprehension of the <ul> tag can be enhanced through practical examples. Therefore, we will present a range of illustrative instances.
In this instance, the demonstration showcases the utilization of various values with the type attribute.
<!Doctype Html>
<Html>
<Head>
<Title>
Ul tag with Type attribute
</Title>
</Head>
<Body>
Hello User!.... <br>
The following list uses the Square mark in front of list items.
<ul type="square">
<li> Cars </li>
<li> bikes </li>
<li> Aeroplanes </li>
<li> Trains </li>
<li> Ships </li>
</ul>
The following list uses the Circle mark in front of list items.
<ul type="Circle">
<li> BMW </li>
<li> Audi </li>
<li> Mercedes </li>
<li> Jaguar </li>
<li> Lamborghini </li>
</ul>
The following list uses the Disc mark in front of list items.
<ul type="disc">
<li> Apache </li>
<li> KTM </li>
<li> R15 </li>
<li> Ducati </li>
<li> Harley-Davidson </li>
</ul>
</Body>
</Html>
The results of the first example are displayed in the screenshot below:
Illustration 2: This instance illustrates the process of generating a nested bulleted list in HTML:
<!Doctype Html>
<Html>
<Head>
<Title>
Nested Unordered list
</Title>
</Head>
<Body>
Hello User!.... <br>
The following list uses the Square mark in front of list items.
<ul type="square">
<li> Cars: </li>
<ul type="Circle">
<li> BMW </li>
<ul type="square">
<li> BMW X5 </li>
<li> BMW X7 </li>
<li> BMW Z4 </li>
<li> BMW M2 </li>
</ul>
<li> Audi </li>
<ul type="square">
<li> Audi Q8 </li>
<li> Audi Q7 2020 </li>
<li> Audi Q3 </li>
<li> Audi A7 </li>
</ul>
<li> Mercedes </li>
<li> Jaguar </li>
<ul type="square">
<li> Jaguar XF </li>
<li> Jaguar XE </li>
<li> Jaguar E Pace </li>
<li> Jaguar I Pace </li>
</ul>
<li> Lamborghini </li>
</ul>
<li> bikes: </li>
<ul type="disc">
<li> Apache </li>
<li> KTM </li>
<li> R15 </li>
<li> Ducati </li>
<li> Harley-Davidson </li>
</ul>
<li> Aeroplanes </li>
<ul type="circle">
<li> Air India </li>
<li> Indigo</li>
<li> Vistara </li>
<li> GoAir </li>
<li> SpiceJet </li>
</ul>
<li> Trains </li>
<li> Ships </li>
</ul>
</Body>
</Html>
The screenshot below displays the result of example 2:
