HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the
<li> tag.
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Output:
o Aries
o Bingo
o Leo
o Oracle
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML border attribute
The HTML border attribute is used to set the visible border width to most HTML
elements within the body.
Syntax:
<tag border="value">
In this example, we will see code for the table border attribute in an HTML
document.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML table border Attribute
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML table border Attribute</h2>
<table border="1">
<caption>Author Details</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
Output:
HTML width Attribute
Definition and Usage
The width attribute specifies the width of the element, in pixels.
The width attribute can be used on the following elements:
Elements Attribute
<canvas> width
<embed> width
<iframe> width
<img> width
<input> width
<object> width
<video> width
HTML align Attribute
HTML align Attribute in HTML is used to specify the alignment of the text content of The
Element. This attribute is used in all elements. The Align attribute can also be set using the
CSS property “text-align: ” or in <img> “vertical-align: “. For horizontal alignment,
use align with values like “left,” “center,” or “right” within appropriate tags.
Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for
better practices.
Syntax:
<element_name align="left | right | center | justify">
Attribute Values:
Attribute Values Description
left It sets the text left-align.
right It sets the text right-align.
center It sets the text center-align.
It stretches the text of a paragraph to set
justify the width of all lines equal.
HTML alt Attribute
Definition and Usage
The alt attribute provides alternative information for an image if a user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses
a screen reader).
Note: The alt attribute is required for the <img> element.
Note: For <input> elements, the alt attribute can only be used with <input type="image">.
Attribute Values: It contains single value text which is used to specify the alternative
text for the supported element if the image is not displaying.
Example: Img alt attribute.
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for
each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
HTML Table with Border
There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.
1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now
Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table with cell padding
You can specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML
2. By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use
CSS. So let's see the code of CSS.
1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
Output:
Name Last Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML Table width:
We can specify the HTML table width using the CSS width property. It can be specify in
pixels or percentage.
We can adjust our table width as per our requirement. Following is the example to
display table with width.
1. table{
2. width: 100%;
3. }
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. </style>
16. </head>
17. <body>
18. <table>
19. <tr>
20. <th>1 header</th>
21. <th>1 header</th>
22. <th>1 header</th>
23. </tr>
24. <tr>
25. <td>1data</td>
26. <td>1data</td>
27. <td>1data</td>
28. </tr>
29. <tr>
30. <td>2 data</td>
31. <td>2 data</td>
32. <td>2 data</td>
33. </tr>
34. <tr>
35. <td>3 data</td>
36. <td>3 data</td>
37. <td>3 data</td>
38. </tr>
39. </table>
40. </body>
41. </html>
Output:
HTML Table with colspan
If you want to make a cell span more than one column, you can use the colspan
attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on
the value of colspan attribute.
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>
HTML code:
1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>
Output:
Name Mobile No.
Ajeet Maurya 7503520801 9555879135
HTML Table with rowspan
If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.
Let's see the example that span two rows.
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
HTML code:
1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>
Output:
Name Ajeet Maurya
7503520801
Mobile No.
9555879135
HTML table with caption
HTML caption is diplayed above the table. It must be used after table tag only.
1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
HTML Background-color
9. The <bgcolor> is the attribute to set the background color of an HTML element.
This attribute is used with the following tags:
o <body>
o <table>
o <marquee>
o <td>
o <th>
o <tr>
Syntax
<"tag" bgcolor="Color_name|rgb number|Hex number">
Example 1: Use the <bgcolor> attribute with the <body> tag
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background color Attribute
6. </title>
7. </head>
8. <body bgcolor="lightblue">
9. <!-- The attribute bgcolor use with the body tag to set the background of web page as lightblue
-->
10. <center>
11. <h1> javaTpoint</h1>
12. <br> <br>
13. <center>
14. <h2> Hyper Text Markup Language </h2>
15. </center>
16. </body>
17. </html>
Output:
HTML <link> tag
HTML <link> tag is used to specify the relationship between the current document and
external source.
The <link> tag is commonly used to link the external Stylesheet for the current
document, but it can also use with link site icons. It is placed on the head section of the
document.
Types of Html Hyperlink:
Html Hyperlinks are generally divided into following types:-
External Links:
The html Hyperlink that links to another website or web page is called
external link.
Internal Links:
The html Hyperlink that links to another web page located in the same
website, is called internal link.
How to use an image as a link in HTML?
We can add image as a link and other HTML elements as a link. A link is a
connection from one Web page to another web page.
We can add page links to a web page. HTML links are hyperlinks. The <a> tag
defines a hyperlink and used to link from one page to another.
The href attribute is used with the <a> tag, which indicates the link's
destination.
To make page links in an HTML page, use the <a> and </a> tags,
with href attribute used to define the links. We should use the <a>…</a> tags
inside <body>…</body> tags.
Syntax
Following is the syntax to add image as a link on the web page.
<a href="link address"><img src="image destination"></a>
HTML <frame> tag
HTML <frame> tag define the particular area within an HTML file where another HTML
web page can be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections
or frames, and each frame can contain different web pages.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Example 1
Create Vertical frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="frame1.html" >
8. <frame src="frame2.html">
9. <frame src="frame3.html">
10. </frameset>
11. </html>
Test it Now
Output:
Frame1.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #7fffd4;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is first frame</h2>
14. </div>
15. </body>
16. </html>
Frame2.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #2f4f4f;
7. height: 500px;
8.
9. }
10. </style>
11. </head>
12. <body>
13. <div>
14. <h2>This is Second frame</h2>
15. </div>
16. </body>
17. </html>
Frame3.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #c1ffc1;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is Third frame</h2>
14. </div>
15. </body>
16. </html>
Example 2:
Create Horizontal frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="frame1.html" >
8. <frame name="main" src="frame2.html">
9. <frame name="bottom" src="frame3.html">
10. </frameset>
11. </html>
Test it Now
Output:
Attribute
Tag-specific attribute
Attribute Value Description
frameborder 0 It specifies whether to display a border around the frame or not, and its
1 default value is 1
longdsec URL It specifies a page which contains the long description of the content of the
frame.
marginheigh pixels It specifies the top and bottom margins of the frame.
t
marginwidth pixels It defines the height of the margin between frames.
name text It is used to assign the name to the frame.
noresize noresize It is used to prevent resizing of the frame by the user.
scrolling yes It specifies the existence of the scrollbar for overflowing content.
no
auto
src URL It specifies the URL of the document which we want to display in a frame.
Supporting Browsers
Element Chrome IE Firefox Opera Safari
<frame> Yes Yes Yes Yes Yes
HTML frameset Tag
Read
Courses
Jobs
The <frameset> tag in HTML is used to define the frameset. The <frameset> element
contains one or more frame elements. It is used to specify the number of rows and
columns in frameset with their pixel of spaces. Each element can hold a separate
document.
Note: The <frameset> tag is not supported in HTML5.
Syntax:
<frameset cols = "pixels|%|*">
Attributes: The list of frameset attributes are given below:
cols: The cols attribute is used to create vertical frames in a web browser.
This attribute is basically used to define the no. of columns and their size
inside the frameset tag.
rows: The rows attribute is used to create horizontal frames in the web
browser. This attribute is used to define the no. of rows and their size inside
the frameset tag.
border: This attribute of frameset tag defines the width of the border of each
frame in pixels. Zero value is used for no border.
frameborder: This attribute of frameset tag is used to specify whether a
three-dimensional border should be displayed between the frames or not for
this use two values 0 and 1, where 0 defines no border and value 1 signifies
for yes there will be a border.
framespacing: This attribute of frameset tag is used to specify the amount
of spacing between the frames in a frameset. This can take any integer
value as a parameter which basically denotes the value in pixel.
Below examples illustrate the <frameset> element in HTML:
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>frameset attribute</title>
</head>
<!-- frameset attribute starts here -->
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = "attr1.png" />
<frame name = "main" src = "gradient3.png" />
<frame name = "bottom" src = "col_last.png" />
<noframes>
<body>The browser you are working does not
support frames.</body>
</noframes>
</frameset>
<!-- frameset attribute ends here -->
</html>
Output:
The above example basically used to create three horizontal frames: top,
middle, and bottom using row attribute of frameset tag, and the noframe tag is
used for that browser that doesn’t support noframe.
