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
HTML lists are group or collection of items. These items can be both organized and unorganized depending on the requirement. They help in organizing, structuring, and presenting information to make it more user-friendly, readable, and accessible. Sample lists are shown below. −
Using Lists in HTML
To display a list of information in HTML, we use various list tags like <ul>, <ol>, and <ll>. HTML offers web developers three ways for specifying lists of information, namely ordered, unordered, and definition lists. All lists must contain one or more list elements. In addition to the mentioned types of lists, there are some other important list-related elements and concepts that also contribute to effective document structuring.
Unordered lists
Unordered lists display lists of items that are not in a specific order. The unordered lists are marked with bullet points. To create an unordered list, the <ul> tag is used along with the <li> tag. Here, the <li> tag specifies the list items.
Example
The following example demonstrates an unordered listing. Here, we are creating a list of 5 items:
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ul></body></html>
Ordered Lists
Ordered lists are lists of items that are in a specific order. The ordered lists are marked with numbers by default; you can change the numbers into alphabets, roman numbers, etc. by using the type attribute or the CSS list-style-type property.
To create an ordered list, the <ol> tag is used along with the <li> tag, where <li> specifies the list items.
Example
The following example demonstrates an ordered list having the list of 5 items:
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ol><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ol></body></html>
Definition Lists
Definition lists are lists of items with their corresponding descriptions. The definition lists are created by using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies the “definition list”, the <dt> tag specifies the “definition term”, and the <dd> tag specifies the “definition description”.
Example
The following example demonstrates the definition list in HTML; here we are creating a definition list with three items:
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><dl><dt>HTML</dt><dd>HyperText markup languague</dd><dt>CSS</dt><dd>Cascading Style Sheet</dd><dt>JS</dt><dd>JavaScript</dd></dl></body></html>
Nested Lists
A list created within another list is known as a nested list. HTML also allows nesting of lists within one another to generate complex document structures.
Example
In the following example, we are nesting an unordered list within an ordered list:
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML Nested List</h2><ol><li>Item One</li><li>Item Two
To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in applying consistent styles and creating visually appealing list structures.
Example
In this example, we are grouping unordered lists with a div tag:
<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Grouping of HTML List elements with div tag</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>
Styling Lists
Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the <style> tag, which is a way of specifying internal CSS.
Example
The following example demonstrates how to apply CSS to the HTML list using a style tag:
</style></head><body><h2>HTML List with CSS</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>
HTML Lists Marker Types
CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property, which can be set to change markers to circles, squares, or other symbols.
Example
In this example, we are using the list-style-type property of CSS to set the markers of list items:
HTML nested tables refer to the table where one or more tables are placed inside it; the inner tables are placed inside the <td> tag. The nested tables involve the utilization of one table within another, providing a versatile way to structure complex data layouts. Various elements, including other HTML tags, can be incorporated within table cells (<td>).
Nested tables refer to the practice of embedding an entire table structure within a cell of another table. This technique allows for the creation of more complex and structured layouts in HTML.
See this image of how a nested table looks like i.e., this image demonstartes a structure of nested tables:
How To Create a Nested Table?
You can create a nested table in HTML by creating one or more tables in different table cells. The following are the steps to create an HTML nested table:
Step 1: Create Outer Table
Begin by creating the outer table, which serves as the container.
Tables can be nested within table cells, allowing for complex structures.
Example
The following example creates a table with two columns (Name and Salary). Inside the first column, there’s a nested table displaying employee details with the same columns.
The outer table’s header and data rows are defined, and the inner table showcases two employees, Ramesh Raman, and Shabbir Hussein, with corresponding salaries.
You can apply styles to nested tables just like regular tables to enhance visual appearance. To write CSS styles for nested tables, you can simply apply the CSS rules on the ‘table‘ selector to style the outer table and use the ‘table table‘ selector to style the inner tables.
Example
The following code includes a main table styled with CSS properties. The <a href="https://www.tutorialspoint.com/css/css_border-collapse.htm" target="_blank" rel="noreferrer noopener">border-collapse</a> ensures seamless borders, and ‘width: 100%’ makes it responsive. Cells (<td>, <th>) have padding, border, and text alignment.
Additionally, nested tables within cells inherit a distinctive style, including a colored background and borders. The main table’s data cell contains a nested table with a blue border, 80% width, and centered using ‘margin: 10px auto’.
Embedding images within nested tables enhances visual presentation. Use the <img> tag inside table cells to seamlessly integrate images into complex layouts like nested tables.
Example
The following example illustrates the use of images inside nested tables:
In HTML, the <colgroup> element is used to define a group of columns in a table. It allows you to apply properties to multiple columns simultaneously, providing a more efficient way to style or format columns.
The <colgroup> Tag
The <colgroup> is often used in conjunction with the <col> element, where each <col> tag represents an individual column within the group. This grouping enhances readability and simplifies the application of styles or attributes to specific columns in a table.
Syntax
Following is the syntax to use <colgroup> with <table> tag:
<table><colgroup><col span="value" style="width: ...;"><col style="..."><!-- More <col> elements... --></colgroup><!-- Other table elements such as <thead>, <tbody>, ... --></table>
Using <colgroup> Tag in HTML Table
Using <colgroup> in HTML involves the following steps −
1. Insert <colgroup> Tag
Place the <colgroup> tag within the <table> element, usually inside the <thead> (table head) or <tbody> (table body) section.
Define attributes or styles for the columns by adding attributes such as span, width, style, or class to the <col> tags.
<table><colgroup><col style="background-color: lightgrey;" span="2"><!-- First two columns --><col style="background-color: lightblue;"><!-- Third column --></colgroup><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>
Example of HTML Table Colgroup
In this example, the <colgroup> tag defines two columns with different widths, and the styles are applied to the columns using the <col> tags. The second row in the table is highlighted using a CSS class.
<!DOCTYPE html><html><body><table border=1><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th>Column 1</th><th>Column 2</th></tr></thead><tbody><tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr><tr class="highlight"><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr></tbody></table></body></html>
CSS Properties for <colgroup> Tag
In HTML, the <colgroup> element allows some specific CSS properties to enhance the presentation of table columns. The legal CSS properties that can be used within a <colgroup> are as follows −
width Property − This property sets the width of the columns within the <colgroup>. It allows you to define the relative or absolute width of each column.
visibility Property − The visibility property can be used to control the visibility of columns within the <colgroup>. You can set it to “hidden” to make a column invisible.
Background Properties − Background properties, such as background-color, can be applied to add background styling to the columns. This can enhance the visual appeal of the table.
Border Properties − Border properties, like border-color and border-width, enable the customization of borders around the columns. This is useful for creating well-defined visual boundaries.
Attempting to apply other CSS properties will have no impact on the styling of the table columns. Therefore, when styling tables with <colgroup>, focus on the available properties to achieve the desired layout and appearance.
Certainly! The <colgroup> element in HTML allows you to group a set of columns in a table and apply styles to them collectively. Within <colgroup>, you can use multiple <col> elements to define different styles for individual columns.
The <colgroup> contains three <col> elements, each with a specific ‘width’ style, defining the width of individual columns.
Empty Column groups
In HTML, a <colgroup> element can be used to define a group of columns in a table. An empty <colgroup> can be employed to provide a structural placeholder for potential styling or later use. While it doesn’t contain explicit <col> elements, it can still influence the overall structure of the table.
Example
Here’s a simple example demonstrating the use of an empty <colgroup>. In here, the <colgroup> is empty but serves as a placeholder for potential styling. The entire <colgroup> is styled with a background color and a border. The <col> elements are not explicitly used, but their styling can be defined within <colgroup> for future use or consistency in the structure.
colgroup {
/* Styling for the colgroup (can be empty) */
background-color: #f0f0f0;
/* Background color for the entire colgroup */
border: 2px solid #3498db;
/* Border around the entire colgroup */
}
/* Additional styling for individual columns */
col {
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
}
