HSL color values define colors using three parameters: hue (color type), saturation (color intensity), and lightness (brightness). HSLA extends HSL by adding an alpha parameter, which specifies the opacity level of the color.
HSL Color Codes
HTML supports the HSL color model, which stands for Hue, Saturation, and Lightness. It provides a flexible and intuitive way to define colors. The HSL representation allows developers to specify hues, adjust saturation, and control lightness, offering a wider range of color choices.
Hue: It is a degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue.
Saturation: It is a percentage value that indicates how intense or vivid the color is, where 0% means a shade of gray, and 100% is the full color.
Lightness: This is also a percentage value that indicates how bright or dark the color is, where 0% is black, 50% is neither light nor dark, and 100% is white.
Creating HSL Color
To create HSL color, use the hsl() function and pass the values for hue, saturation, and lightness. Following is the syntax to use the hsl() function:
hsl(hue, saturation%, lightness%)
Example
Here’s an example demonstrating the use of HSL color in HTML:
<!DOCTYPE html><html lang="en"><head><title>HTML HSL Color Example</title><style>
This box has an HSL color background
</p></div></body></html></pre>
In this example, the background-color property of the .hsl-color-box class is set using the HSL color representation. The values are as follows:
Hue (H): 120 degrees (green)
Saturation (S): 50%
Lightness (L): 50%
Adjust these values to experiment with different colors. The HSL model offers a more flexible way to work with colors, making it easier to fine-tune and control the appearance of elements on a webpage.
HSLA Color Codes
In HTML, HSLA stands for hue, saturation, lightness, and alpha. It is an extension of the HSL color code with an optional alpha parameter for transparency. This alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0. Here, 0.0 means fully transparent and 1.0 means no transparency.
Creating HSLA Color
To create HSLA colors, use the hsla() function by passing values for hue, saturation, lightness, and alpha for transparency. The hsla() function can be used in CSS files or inside the style attribute in HTML. The following is the syntax to use the hsla() function to create HSLA color:
hsla(hue, saturation%, lightness%, alpha)
Example
In this example, we have set the background color and text color using HSLA color code:
Hexadecimal (Hex) colors are specified by combining the hexadecimal values (#RRGGBB) of red (RR), green (GG), and blue (BB) colors, with each value ranging from 00 to FF, where 00 represents the lowest intensity and FF represents the highest intensity of each color.
HEX Color Values
Each HEX color value starts with a hash sign (#) and includes six digits (#RRGGBB). The first two digits (RR) specify the red component, the next two (GG) specify the green component, and the final two (BB) specify the blue component. This method allows precise color customization for web design.
Example
Here is the example to create Red, Green, and Blue colors using the hex values:
<!DOCTYPE html><html><head><title>Example Hex Color Values</title></head><body><!-- Red color --><div style="background-color: #FF0000; width: 100px; height: 100px;">
RED Color
</div><!-- Green color --><div style="background-color: #00FF00; width: 100px; height: 100px;">
GREEN Color
</div><!-- Blue color --><div style="background-color: #0000FF; width: 100px; height: 100px;">
BLUE Color
</div></body></html></pre>
Using Hex Colors in HTML
To use hex colors in HTML, we can either assign them directly to an element using the style attribute, or define them in a style tag or sheet using the color property.
Example 1: Using style Attribute
Here is an example to assign a hex color to an HTML element using the style attribute:
<body><p style="color: #FF0000;">This text is red.</p></body>
Example 2: Using a style Tag
Here is an example to assign a hex color to an HTML element using the style tag:
<head><style>
p {
color: #FF0000;
}
</style></head><body><p>This text is red.</p></body>
Hex Color Codes for Common Colors
The following table has a few colors represented using hexadecimal color codes:
Color
Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Examples of Hex Colors
Here are some examples that show how to use hexadecimal colors in HTML:
Setting Background Color for Body
In the following example, we are defining the background color of the HTML page using the hex color code:
The text color of the paragraph is
styled using HEX code.
</td></tr></table></body></html></pre>
Selecting the right colors for designing a webpage is difficult. Even if you have a color in your mind, you need to make a computer understand the hexadecimal value of the color. To make your job easier, we suggest using our HTML color picker tool.
HTML RGB and RGBA colors are supported by all browsers. RGB color value represents the intensity of RED, GREEN, and BLUE in a color. RGBA is an extension of RGB that also specifies an alpha channel for opacity of color.
We can make any colors using combinations of RED, GREEN, and BLUE. If you set the maximum intensity of all three colors, then the resulting color will be white. Similarly, if we give zero intensity for all RGB values, we will get black color.
HTML RGB Colors
In HTML, RGB stands for Red, Green, and Blue, and it is a way of specifying colors by their intensity values. These colors can be used in HTML elements, such as backgrounds, borders, and fonts. To use RGB colors in HTML, we need to use the rgb() function inside the style attribute of an element.
The rgb() Function
The rgb() function takes three parameters, namely the red value, the green value, and the blue value. Each value is specified using an integer that can range from 0 to 255, where 0 means no color and 255 means full color intensity. Mixing these values will create other different colors.
Syntax
rgb(red, green, blue)
Example
Here is an example to set background of HTML tags by color code using rgb() values.
<!DOCTYPE html><html><head><title>HTML Colors by RGB code</title></head><body style = "background-color: rgb(255,255,0);"><p>Use different color code for body and table and see the result. </p><table style = "background-color: rgb(0,0,0);"><tr><td><p style = "color: rgb(255,255,255);">This text will appear white on black background.</p></td></tr></table></body></html>
On the executing the above HTML code, it will produce a result with texts on different backgrounds.
HTML RGBA Colors
In HTML, RGBA stands for Red, Green, Blue, and Alpha, which is an extension of RGB with an additional channel for opacity. The alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0.
For example, rgba(255, 0, 0, 1.0) is fully opaque red, rgba(255, 0, 0, 0.5) is semi-transparent red, and rgba(255, 0, 0, 0.0) is fully transparent red.
To specify the RGBA color values in HTML, the rgba() function is used inside the style attribute or CSS file.
The rgba() Function
The rgba() function takes four parameters. The parameter alpha accepts a decimal value between 0 and 1 to determine opacity of a RGB color. The value 0 indicates that the color is not visible and value 1 indicates color is fully visible.
Syntax
rgba(red, green, blue, alpha)
For example, rgba(255, 0, 0, 1.0) is fully opaque red, rgba(255, 0, 0, 0.5) is semi-transparent red, and rgba(255, 0, 0, 0.0) is fully transparent red.
Example
In this example, we have set the background color and text color using RGBA color code:
<!DOCTYPE html><html><head><title>HTML Colors by RGBA code</title></head><body style = "width:300px; height:100px;"><h2 style = "background-color: rgba(128 ,128 ,128 ,1.0);">Setting the Background using rgba()</h2><table style = "background-color: rgba(255, 0 ,0 ,0.8);"><tr><td><p style = "color: gba(255, 255, 255, 1.0);">The text color of the paragraph is styled using rgba()</p></td></tr></table></body></html>
On execution, the above HTML code will generate one heading and a paragraph with different background colors.
Comparison of RGB and RGBA Colors
The following table shows the comparison of the RGB and RGBA colors using RGB values and their opacity-reduced form using the rgba() function:
RGB Color
RGB function
RGBA Color
RGBA function
rgb(0, 0, 0)
rgba(0, 0, 0, 0.7)
rgb(255, 0, 0)
rgba(255, 0, 0, 0.7)
rgb(0,255,0)
rgba(0, 255, 0, 0.7)
rgb(0, 0, 255)
rgba(0, 0, 255, 0.7)
rgb(255, 255, 0)
rgba(255, 255, 0, 0.7)
rgb(0, 255, 255)
rgba(0, 255, 255, 0.7)
rgb(255, 0, 255)
rgba(255, 0, 255, 0.7)
rgb(192, 192, 192)
rgba(192, 192, 192, 0.7)
rgb(255, 255, 255)
rgba(255, 255, 255, 0.7)
RGB vs RGBA Colors
RGB color defines a color using only three color components (red, green, and blue) with values ranging from 0 to 255. RGB color does not support transparency. Whereas the RGBA color defines a color similar to RGB but also adds an alpha value for transparency, where 0 is for the fully transparent color and 1 is for the fully opaque. In short, RGB is used for solid colors, while RGBA is used when transparency is required.
HTML color names are the simplest way to define the color for the HTML elements, as they are predefined names for the colors, such as red, green, blue, etc. By using these HTML color names, you can apply colors without having knowledge of RGB and hexadecimal color codes.
Standard Color Names
The table below lists the 16 color names introduced in HTML 3.2, along with their hex codes and color samples:
Color Name
Hex Value
Color
aqua
#00ffff
black
#000000
blue
#0000ff
fuchsia
#ff00ff
green
#008000
gray
#808080
lime
#00ff00
maroon
#800000
navy
#000080
olive
#808000
purple
#800080
red
#ff0000
silver
#c0c0c0
teal
#008080
white
#ffffff
yellow
#ffff00
Extended Color Names
The following table lists colors, known as extended colors, that are not part of the HTML or XHTML specifications but are supported by most major browsers, along with their hex codes and color samples:
HTML email links allow users to click on a link and automatically open their default email client with a new message composed to the specified email address.
This is done using the mailto: protocol in the href attribute of an <a> (anchor) tag.
You can also predefine the subject and body of the email using the mailto: protocol. This is done by appending ?subject= and &body= to the email address. Spaces and special characters in the subject and body should be URL-encoded. For example, spaces are encoded as %20.
Syntax
The following HTML code creates a clickable email link that opens the user’s default email client to send an email to the specified address:
Adding an HTML email link to your webpage is straightforward, but it can expose your email address to spam. Automated programs, known as email harvesters, can scan web pages for email addresses and add them to spam lists. This can result in a significant increase in unwanted emails.
Images can also be used as links in HTML, which means by clicking the images we can navigate to other web pages or resources. HTML image links are very useful in creating websites like photo galleries, portfolios, online stores, and so on. In this article, we will learn how to use images to create hyperlinks. It is similar to the HTML – Text Link.
Creating Image Links
To create an HTML image link, we need an <img> tag and an anchor element. The image element is used to display the image on the web page, and the anchor element is used to specify the destination URL of the link.
Here, the href attribute of <a> element contains the destination link and src attribute of <img> tag contains the path of image.
Syntax
Here, the href attribute of the <a> element contains the destination link, and the src attribute of the <img> tag contains the path of the image.
Here are some example codes that explain the usage of image links in HTML:
Create Hyperlink for an Image
Image Link with Tooltip
Mouse-Sensitive Images
Server-Side Image Maps
Client-Side Image Maps
Create Hyperlink for an Image
In the following example, we are using an image as a hyperlink. If you execute the below code, an image will be displayed, and if we click on it, the page will redirect to the home page of Tutorials Point.
You can also define a tooltip for an image link; when someone moves the mouse over the linked image, it will display a tooltip. To set the tooltip, you can set the title attribute of the <a> tag.
Example
The following example demonstrates a tooltip to an image link:
<!DOCTYPE html><html><head><title>Image Hyperlink Example</title></head><body><a href="https://www.tutorialspoint.com" title="Go to TutorialsPoint"><img src="/html/images/logo.png"
In the above example, hovering over the logo will display the tooltip " Go to TutorialsPoint".
Mouse-Sensitive Images
The HTML and XHTML standards provide a feature that lets us embed several different links inside a single image. We can create different links on the single image based on different coordinates available on the image.
Once the links are attached to all coordinates, clicking on the different parts of the image redirects us to target documents. Such mouse-sensitive images are known as image maps.
There are two ways to create image maps:
Server-side image maps: This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
Client-side image maps: This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.
Server-Side Image Maps
In the server-side image maps, we simply put the image inside a hyperlink and use the ismap attribute, which makes it a special image, and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse pointer coordinates to determine which document to deliver back to the browser.
When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a CGI or PHP script to process the incoming request based on the passed coordinates.
The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.
Example
The following code snippet demonstrates the use of server-side image maps.
On executing the above code, tutorialspoint logo will be displayed. When we click on the logo, the address bar will display the respective coordinates, as shown below:
This way we can assign distinct links to different coordinates of the image, and when those coordinates are clicked, we will be redirected to the linked documents. To learn more about the ismap attribute, check HTML ismap Attribute
Client-Side Image Maps
Client-side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags. The <map> along with <area> tags define all the image coordinates and corresponding links. The <area> tag inside the map tag specifies the shape and the coordinates to define the boundaries of each clickable hotspot available on the image.
The image that is going to form the map is inserted into the page using the <img /> tag as a normal image, except it carries an extra attribute called usemap.
On running the below code, an image with clickable areas will be displayed. If you click on one of the area, you will be redirected to the tutorial of that part.
To know how the value of the coords attribute is calculated, you can visit the explanation of coords attribute.
Example
<!DOCTYPE html><html lang="en"><body><h1>Welcome to our interactive map!</h1><p>
Click on a region to visit the
respective language page:
The actual value of coordinates is totally dependent on the shape of the clickable area. Let us understand the coordinates of different shapes.
Shape
Coordinates
Description
Rectangle
x1 , y1 , x2 , y2
Where x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and y2 are the coordinates of the lower right corner.
Circle
xc , yc , radius
Where xc and yc are the coordinates of the center of the circle, and radius is the circle's radius. A circle centred at 200,50 with a radius of 25 would have the attribute coords="200,50,25".
Polygon
x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute coords="20,20,40,40,20,60,0,40".
Note: All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL. You can use any image software to know the coordinates of different positions. For example, the paint in Windows
HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to that linked page when clicked.
HTML Hyperlinks
A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create hyperlinks using text or images available on a webpage. A hyperlink is created using the HTML Anchor Tag (</a>).
The Anchor (<a>) Tag
An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages. Anything which is written between the opening <a> and the closing </a> tags become clickable and when someone clicks on it, the linked page will be opened.
Syntax
Here is the syntax to create a hyperlinks in HTML:
<a href="URL" target="_target_type">Link Text</a>
Read more about creating URLs, we recommend to read this chapter: Understanding URL
Creating Hyperlinks (Linking Webpages/Documents)
You can link other webpages or documents by creating the hyperlinking to specific words, images, or any HTML element.
As discussed above, you can create hyperlinks by using the HTML <a> tag with the href attribute. The href attribute specifies the page/document to be linked.
Syntax
<a href="URL" ... attributes-list>Link Text</a>
Example
In this example, we are creating a simple HTML document that demonstrates how to use a hyperlink:
<!DOCTYPE html><html><head><title>Hyperlink Example</title></head><body><p>Click following link</p><a href="https://www.tutorialspoint.com/" target="_self">Tutorials Point</a></body></html>
On executing the above example, a link will be displayed. You can click on the link generated to reach to the home page of Tutorials Point.
The “target” Attribute
The target attribute specifies the location where linked document is opened. Following are the possible values of target attribute:
S.No.
Option & Description
1
_blankOpens the linked document in a new window or tab.
2
_selfOpens the linked document in the same frame.
3
_parentOpens the linked document in the parent frame.
4
_topOpens the linked document in the full body of the window.
5
targetframeOpens the linked document in a named targetframe.
Example
Try following example to understand basic difference in few options given for target attribute.
<!DOCTYPE html><html><head><title>Hyperlink Example</title><base href="https://www.tutorialspoint.com/"></head><body><p>Click any of the following links</p><a href="/html/index.htm" target="_blank">Opens in New</a> | <a href="/html/index.htm" target="_self">Opens in Self</a> | <a href="/html/index.htm" target="_parent">Opens in Parent</a> | <a href="/html/index.htm" target="_top">Opens in Body</a></body></html>
This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute.
Use of Base Path in Hyperlinks
When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.
Example
Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link:
<!DOCTYPE html><html><head><title>Hyperlink Example</title><base href="https://www.tutorialspoint.com/"></head><body><p>Click following link</p><a href="/html/index.htm" target="_blank">HTML Tutorial</a></body></html>
This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial.
Linking to a Page Section
Linking to a section on the same page allows users to navigate directly to that section. You can create a link in the same to a specific section by using the href attribute with a #id value, where the #id targets an element on the page with a corresponding id attribute.
Example
In the below code, we demonstrate the usage of the href attribute to navigate to a different section within the same page. We provide #idofsection inside the href to navigate sections of our need:
<!DOCTYPE html><html lang="en"><head><style>
div {
height: 900px;
}
</style></head><body><h2>Ed-Tech</h2><div><p>
Tutorialspoint: Simply Easy Learning
</p><a href="#about">Know More</a></div><h2 id="about">Section 2</h2><div><p>
Tutorials Point is an online learning platform
providing free tutorials, paid premium courses,
and eBooks. Learn the latest technologies and
programming languages SQL, MySQL, Python, C,
C++, Java, Python, PHP, Machine Learning, data
science, AI, Prompt Engineering and more.
</p></div></body></html>
Styling Hyperlinks (Setting Link Color)
You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.
Example
Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.
This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.
Downloadable Links
HTML allows you to create downloadable links where you can create links to make your PDF, DOC, or ZIP files downloadable. To create any link downloadable, you can use the download attribute with the <a> tag and specify the downloadable file path in the href attribute.
Example
The following example demonstrates creating a downloadable link in HTML:
<!DOCTYPE html><html><head><title>Downloadable Link Example</title></head><body><a href="/html/src/sample.txt" download>Download File</a></body></html>
Custom File Name
You can also specify the filename for the downloaded file. To give a custom filename the file, you need to provide it to the download attribute.
You can also allow HTML to open a file download dialog box before starting the download so that the user can select the location to download the file. You can do it by using an HTTP header in your HTTP response.
For example, if you want to make a filename file downloadable from a given link, then its syntax will be as follows.
Syntax
#!/usr/bin/perl# Additional HTTP Headerprint"Content-Type:application/octet-stream; name=\"FileName\"\r\n";print"Content-Disposition: attachment; filename=\"FileName\"\r\n\n";# Open the target file and list down its content as follows
open( FILE,"<FileName");while(read(FILE,$buffer,100)){print("$buffer");}
Note: For more detail on PERL CGI programs, go through tutorial PERL and CGI.
A description list is defined by <dl> tag along with the <dt> and <dd> tags. Where <dt> tag defines the definition term, and <dd> tag defines the corresponding definition.
HTML Definition Lists
HTML definition lists define list items having the structure of terms and their corresponding definitions. These types of lists are used to define a listing structure where each list item (data term) contians its corresponding explanation (definition description).
The <dl> tag supports almost all browsers. It also supports the global attributes and event attributes. It consists of open and closing tags like <dl></dl>
Definition List Tags
The following are the HTML tags used for defining definition lists:
<dd>: This tag defines the corresponding description for the given definition term.
Creating Definition List
To create a definition list, you need to use the <dl> tag along with the <dt> and <dd> tags.
Where,
<dl> is used as a container tag for the definition list.
<dt> is used to define the terms that you want to define.
<dd> is used to place the definitions for the corresponding terms.
Syntax
Below is the syntax (structure) of creating a definition list in HTML:
<dl><dt>Term 1</dt><dd>Definition for Term 1</dd><dt>Term 2</dt><dd>Definition for Term 2</dd><dt>Term 3</dt><dd>Definition for Term 3</dd></dl>
Example of Definition List
In the following example, we are creating a definition list with four terms along with their corresponding descriptions:
<!DOCTYPE html><html><body><h2>Different Types Of Languages</h2><dl><dt>English:</dt><dd>
English is the first world language. We can
use English language for communication in all
areas like politics, media, entertainment,
art etc.
</dd><dt>Hindi:</dt><dd>
Hindi is an Indo-Aryan language spoken mostly
in India. In India Hindi is spoken as a first
language by most of the people.
</dd><dt>Marathi:</dt><dd>
Marathi is an Indo-Aryan language spoken by
Marathi people of Maharashtra in India. It
is a official Language of Maharashtrian
people
</dd><dt>French:</dt><dd>
French is the official language in Canada,
Central, African, Burkina, Faso, Burundi etc.
</dd></dl></body></html>
Styling Definition Lists
You can also customize the default appearance of the definition lists using the CSS properties. You can apply the CSS styles on all three definition list tags to style them as per your requirement to match with the website theme.
Example
In the following example, we are applying CSS properties to customize the appearance of the definition list:
Tutorialspoint provides access to a library
of video courses on various prominent
technologies, aimed at helping individuals
master those technologies and become
certified professionals.
</dd><dt>Tutorix</dt><dd>
Tutorix is child company of tutorialspoint
that covers NCERT-based syllabus for maths
and science. Also give a great foundation
for IIT/JEE and NEET aspirants.
</dd></dl></body></html>
Default CSS for Definition Lists
There are default CSS settings for almost all browsers that display the<dl> elements.
Example
The following code constains the default CSS properties for the definition list. If you remove them, nothing will change in output:
<!DOCTYPE html><html><head>
<!-- This is default style of Definition Lists -->
<style>
A list of terms and their definitions.
</dd><dt>Android</dt><dd>Android tutorial.</dd><dt>Ruby</dt><dd>Ruby tutorial.</dd></dl><p>
We added default style to Description List
</p></body></html>
Nested Definition Lists
Nested definition lists allow you to add detailed sub-definitions within a main definition term.
Example
The following example demonstrates the nested definition lists in HTML:
<!DOCTYPE html><html lang="en"><head><title>Nested Definition Lists Example</title></head><body><h2>Nested Definition Lists Example</h2><dl><dt>Programming Languages</dt><dd><dl><dt>Python</dt><dd>A high-level, interpreted programming language.</dd><dt>JavaScript</dt><dd>A language used for web development.</dd></dl></dd><dt>Web Technologies</dt><dd><dl><dt>HTML</dt><dd>The standard markup language for creating web pages.</dd><dt>CSS</dt><dd>Used for styling web pages.</dd></dl></dd></dl></body></html>
An ordered list is defined by <ol> tag where all list items are marked an ordered list.
Ordered HTML Lists
An ordered list is a collection of items that have a specific order or sequence. HTML ordered list is created by <ol> tag where each list item is defined by the <li> tag.
This type of ordered list is used to show the list items, where they are marked with an ordered numbered list, such as the steps of a recipe, the ranking of a leaderboard, or the chronological order of events as shown in the below figure:
Creating Ordered Lists
To create an ordered list in HTML, we use the <ol> tag and nest <li> tags inside it. Each <li> element represents one item in the list. The numbering starts with 1 and is incremented by one for each successive ordered list element tagged with <li>. Like an unordered list, it also allows us to change the numbering style using the type attribute of the <ol> element.
Example
The following example demonstrates creating ordered lists in HTML:
If you click on Edit & Run the above example displays an ordered list.
HTML Ordered List – The type Attribute
Thetype attribute for the<ol> tag is used to specify the type of marker for the ordered list in HTML. By default, the type of list numbering is numbers starting with 1, 2, 3, and so on. You can change the type of numbers by using any of the values given below:
S.No
Value & Description
1
1It is the default type of marker.
2
IList items will be displayed with roman number marker.
3
AIt will set the marker to upper case alphabets.
4
aIt sets the marker to lower case alphabets.
Ordered List With Numbers
The following example demonstrates the ordered lists with numbers type marker:
<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with counting numbers:</p><ol type="1"><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ol></body></html>
Ordered List With Uppercase Roman
The following example demonstrates the ordered lists with uppercase roman numbers type marker:
<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with uppercase roman numbers:</p><ol type="I"><li>Aman</li><li>Vivek</li><li>Shrey</li><li>Ansh</li></ol></body></html>
Ordered List With Lowercase Roman
The following example demonstrates the ordered lists with lowercase roman numbers type marker:
<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with lowercase roman numbers:</p><ol type="i"><li>Aman</li><li>Vivek</li><li>Shrey</li><li>Ansh</li></ol></body></html>
Ordered List With Uppercase Alphabets
The following example demonstrates the ordered lists with uppercase alphabets type marker:
<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with uppercase alphabets:</p><ol type="A"><li>Bus</li><li>Train</li><li>Plane</li><li>Boat</li></ol></body></html>
Ordered List With Lowercase Alphabets
The following example demonstrates the ordered lists with lowercase alphabets type marker:
<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with lowercase alphabets:</p><ol type="a"><li>Bus</li><li>Train</li><li>Plane</li><li>Boat</li></ol></body></html>
The above examples display ordered lists with counting numbers, roman numbers, and alphabets.
HTML Ordered List – The start Attribute
By default, the numbering starts with 1, but you can change it by using the start attribute with the <ol> tag. The style attribute defines the starting numbers of the ordered list.
Syntax
The following are the different syntaxes (use cases) to define number types and the initial (starting) number for the ordered list:
<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.
Example
Following is an example where we used <ol type="i" start="4" >:
Styling ordered lists with CSS allows customization of the appearance to match the design preferences of a website. The CSS styles can target both the list itself (<ol>) and the list items (<li>).
Example
Below is the program example that includes all the CSS styling for ordered list:
</style></head><body><h1>Styled Ordered List Example</h1><h2>Basic Styling</h2><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol><h2>Changing Numbering Style</h2><ol class="roman"><li>Roman I</li><li>Roman II</li><li>Roman III</li></ol><ol class="letters"><li>Letter A</li><li>Letter B</li><li>Letter C</li></ol><h2>Adding Counters</h2><ol class="counter-list"><li>Item</li><li>Item</li><li>Item</li></ol><h2>Changing Text Color on Hover</h2><ol><li class="hover-effect">Hover Effect 1</li><li class="hover-effect">Hover Effect 2</li><li class="hover-effect">Hover Effect 3</li></ol></body></html>
The program creates a styled HTML document with ordered lists. It includes basic styling, changes numbering styles to Roman and letters, adds counters to items, and changes text color on hover.
Nested Ordered Lists
HTML allows nesting of lists; you can create nested ordered lists to display a list of items inside an item of the outer list element.
Note: You can also change the type of outer or inner lists. In the below example, the main list has decimal numbers, the list of the second list item has lowercase roman numbers, and the list of the third list item has uppercase roman numbers. You can also define the starting number as per your requirement.
Example
The following example deonstartes the use of nested ordered lists:
<!DOCTYPE html><html><head><title>Nested Ordered Lists</title></head><body><h2>Example of Nested Ordered Lists</h2><ol><li>Fruits
An HTML unordered list is defined by <ul> tag where all list items are marked with bullets.
Unordered HTML Lists
An unordered list is a collection of list items that do not have a specific order or sequence and are marked with the bullets. An HTML unordered list is created by <ul> the tag, where each list item is defined by the <li> tag.
This type of list is used for describing a particular service or product, as it does not require any order to be followed.
The below figure shows an ordered list of groceries:
Creating Unordered Lists
To create an unordered list in HTML, we use the <ul> tag and nest <li> tags inside it. Each <li> element represents one item in the list. By default, the browser will automatically display disc bullet points for each item. However, we can change this bullet style using the type attribute on the <ul> element.
Example
The following example demonstrates how to create an unordered list in HTML:
The above example displays an unordered list with default disc bullets.
HTML Unordered List – Specifying List Marker
The type attribute for the <ul> tag is used to specify the type of bullet for the unordered list in HTML. By default, disc bullet type is used. But we can change this with the help of the following options:
S.No
Value & Description
1
discIt is the default type of marker.
2
squareList items will be displayed with a square marker.
3
circleIt will set the marker to a hollow circle.
Disc Marker
The following example illustrates disc marker with an unordered list in HTML:
<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with default disc marker:</p><ul type="disc"><li>Apple</li><li>Guava</li><li>Carrot</li><li>Orange</li></ul></body></html>
Square Marker
The following example illustrates square marker with an unordered list in HTML:
<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with square marker:</p><ul type="square"><li>Nuts</li><li>Oats</li><li>Eggs</li><li>Dates</li></ul></body></html>
Circle Marker
The following example illustrates circle marker with an unordered list in HTML:
<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with hollow circle marker:</p><ul type="circle"><li>Rice</li><li>Pulses</li><li>Flour</li><li>Beans</li></ul></body></html>
The above examples display three unordered lists with default disc bullets, square and hollow circular bullets.
HTML Unordered List Without Bullets
You can also display the list items of an unordered list without showing the bullets. To display an unordered list without bullets, define the “none” to the list-style-type property.
Syntax
Following is the syntax to create an unordered list without bullets in HTML:
<ul style="list-style-type: none"><li>Item in list...</li><li>Item in list...</li><li>Item in list...</li></ul>
Example
Given below is an example of creating an unordered list without bullets in HTML:
The above program creates an unordered list that contains elements Abdul, Jason, and Yadav without bullets.
Styling Unordered HTML Lists
Styling an unordered list (<ul>) using CSS allows for customization of the list’s appearance, including modifying bullet points, spacing, and overall design.
The above program styles an unordered list with a square bullet. Each list item has a background color, border, and padding, creating a distinct card-like appearance. The items are separated by a margin, and hovering over an item triggers a smooth background color transition.
Nested Unordered Lists
HTML allows nesting of lists; you can create nested unordered lists to display a list of items inside an item of the outer list element.
Example
The following example deonstartes the use of nested unordered lists:
<!DOCTYPE html><html><head><title>Nested Unordered Lists</title></head><body><h2>Example of Nested Unordered Lists</h2><ul><li>Fruits
