HTML
HTML
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup Language,
and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a
hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or
dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.
<html>
<head>
</head>
<body>
</body>
</html>
<html> :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of
the browser window. It must be placed inside the head tag and should close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based
hypertext system.
Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of
HTML is HTML5, which we will learn later in this tutorial.
HTML Versions
Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995, and it was standard language
version for website design. HTML 2.0 was able to support extra features such as form-based file
upload, form elements such as text box, option button, etc.
HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of
creating tables and providing support for extra options for form elements. It can also support a web
page with complex mathematical equations. It became an official standard for any browser till
January 1997. Today it is practically supported by most of the browsers.
HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of
HTML language. This version is the current official standard, and it provides added support for
stylesheets (CSS) and scripting ability for various multimedia elements.
HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this
version was announced in January 2008. There are two major organizations one is W3C (World
Wide Web Consortium), and another one is WHATWG( Web Hypertext Application Technology
Working Group) which are involved in the development of HTML 5 version, and still, it is under
development.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the
interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it
more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-
case.
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is
displayed on the browser in the bold format and size of the text depends on the number of
heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags,
from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important
heading and h6 is used for least important.
Output:
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Heading elements (h1....h6) should be used for headings only. They should not be used just to
make text bold or big.
o HTML headings can also be used with nested elements. Following are different
codes to display the way to use heading elements.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Heading elements</title>
5. </head>
6. <body>
7. <h1>This is main heading of page. </h1>
8. <p>h1 is the most important heading, which is used to display the keyword of page </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if
14. required.
15. </p>
16. </body>
17. </html>
Output:
HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an HTML
content and a simple content. HTML tags contain three main parts: opening tag, content and
closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and
left to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)
Syntax
Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given
below:
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var>
and <br>
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
Following is the complete list of HTML tags with the description which are arranged
alphabetically.
<aside> It defines content aside from main content. Mainly represented as sidebar.
<base> This tag defines the base URL for all relative URL within the document.
<basefont> This tag is used to set default font, size and color for all elements of
document. (Not supported in HTML5)
<bdi> This tag is used to provide isolation for that part of text which may be formatted
in different directions from its surrounding text.
<big> This tag is used to make font size one level larger than its surrounding
content. (Not supported in HTML5)
<blockquote> It is used to define a content which is taken from another source.
<cite> It is used to define the title of the work, book, website, etc.
<col> It defines a column within a table which represent common properties of columns
and used with the <colgroup> element.
<del> It defines a text which has been deleted from the document.
<details> It defines additional details which user can either view or hide.
<dir> It is used as container for directory list of files. (Not supported in HTML5)
<figure> It is used to define the self-contained content, and s mostly refer as single unit.
<font> It defines the font, size, color, and face for the content. (Not supported in
HTML5)
<frame> It defines a particular area of webpage which can contain another HTML
file. (Not supported in HTML5)
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.
<ins> It represent text that has been inserted within an HTML document.
<isindex> It is used to display search string for current document. (Not supported in
HTML5)
M
<main> It represents the main content of an HTML document.
<noframes> It provides alternate content to represent in browser which does not support the
<frame> elements. (Not supported in HTML5)
<picture> It defines more than one source element and one image element.
<rp> It defines an alternative content if browser does not supports ruby annotations.
<small> It is used to make text font one size smaller than document?s base font size.
<source>> It defines multiple media recourses for different media element such as <picture>,
<video>, and <audio> element.
<strike> It is used to render strike through the text. (Not supported in HTML5)
<table> It is used to present data in tabular form or to create a table within HTML
document.
<tbody> It represents the body content of an HTML table and used along with <thead> and
<tfoot>.
<td> It is used to define cells of an HTML table which contains table data
<template> It is used to contain the client side content which will not display at time of page
load and may render later using JavaScript.
<textarea> It is used to define multiple line input, such as comment, feedback, and review,
etc.
<thead> It defines the header of an HTML table. It is used along with <tbody> and <tfoot>
tags.
<track> It is used to define text tracks for <audio> and <video> elements.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space between
two attributes.
Syntax
1. <element attribute_name="value">content</element>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>
Test it Now
Output:
1. <p style="height: 50px; color: blue">It will add style property in element</p>
Test it Now
In the above statement, we have used paragraph tags in which we have applied style attribute.
This attribute is used for applying CSS property on any HTML element. It provides height to
paragraph element of 50px and turns it colour to blue.
In the above statement we have again used style attribute in paragraph tag, which turns its colour
red.
Note: There are some commonly used attributes are given below, and the complete list and
explanation of all attributes are given in HTML attributes List.
Description: The title attribute is used as text tooltip in most of the browsers. It display its text
when user move the cursor over a link or any text. You can use it with any text or link to show
the description about that link or text. In our example, we are taking this with paragraph tag and
heading tag.
Example
1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will s
ee a description as a tooltip</p>
Test it Now
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will
see a description as a tooltip</p>
9.
10. </body>
11. </html>
Output:
The href attribute in HTML
Description: The href attribute is the main attribute of <a> anchor tag. This attribute gives the
link address which is specified in that link. The href attribute provides the hyperlink, and if it
is blank, then it will remain in same page.
Example
The src attribute is one of the important and required attribute of <img> element. It is source for
the image which is required to display on browser. This attribute can contain image in same
directory or another directory. The image name or source should be correct else browser will not
display the image.
Example
Note: The above example also have height and width attribute, which define the height and width
of image on web page.
Output:
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. <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
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.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
Output:
Aries
Bingo
Leo
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.
<dl>
<dt>Aries</dt>
<dt>Bingo</dt>
<dt>Leo</dt>
<dt>Oracle</dt>
</dl>
Test it Now
Output:
Aries
Bingo
Leo
-It is also an one of the 12 horoscope sign.
Oracle
Click here for full details of HTML description list. HTML Description List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list
then such type of list will called as nested list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>
</li>
<li>Rajasthan
<ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
</ol>
</body>
</html>
Output:
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.
Output:
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are
given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the browser
where to look for the image on the server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the
alt attribute describe the image in words. The alt attribute is considered good for SEO
prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and object
elements. It is not recommended now. You should apply CSS in place of height attribute.
Example:
Output:
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is
the most important attribute of the HTML a tag. and which links to destination page or URL.
The href attribute is used to define the address of the file to be linked. In other words, it points
out the destination page.
If we want to open that link to another page then we can use target attribute of <a> tag. With the
help of this link will be open in next page.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-link </a>to go on ho
me page of JavaTpoint.</p>
8. </body>
9. </html>
Output:
Note:
o The target attribute can only use with href attribute in anchor tag.
o If we will not use target attribute then link will open in same page.
HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a
simple example to see how it work. It is a notable point that a browser itself add an empty line
before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.
Note: If we are using various <p> tags in one HTML file then browser automatically adds a
single blank line between the two paragraphs.
Output:
This is first paragraph.
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while
displaying the page. The browser counts number of spaces and lines as a single one.
<p>
I am
going to provide
</p>
<p>
</p>
<p>
</p>
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
As you can see, all the extra lines and unnecessary spaces are removed by the browser.
An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the
example to show how to use <br> with <p> element.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</p>
</body>
</html>
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs.
Following is the example which is showing use of <hr> tag with paragraph.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will star
t a new paragraph.
</p>
</body>
</html>
Output:
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
<col> It is used with <colgroup> element to specify column properties for each column.
Let's see the example of HTML table tag. It output is shown above.
1. <table>
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>
Output:
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.
You can use border attribute of table tag in HTML to specify border. But it is not recommended
now.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
Output:
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
<style>
table, th, td {
</style>
Test it Now
You can collapse all the borders in one border by border-collapse property. It will collapse the border
into one.
<style>
table, th, td {
border-collapse: collapse;
}
</style>
Output:
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetn
Singh 72
a
You can specify padding for table header and table data by two ways:
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS. So
let's see the code of CSS.
<style>
table, th, td {
border-collapse: collapse;
th, td {
padding: 10px;
}
</style>
Output:
Last
Name Marks
Name
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
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.
table{
width: 100%;
Example:
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
th,td{
padding: 15px;
</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</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.
CSS code:
<style>
table, th, td {
border-collapse: collapse;
th, td {
padding: 5px;
</style>
HTML code:
<table style="width:100%">
<tr>
<th>Name</th>
</tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>
Output:
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.
CSS code:
<style>
table, th, td {
th, td {
padding: 10px;
</style>
HTML code:
<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><td>9555879135</td></tr>
</table>
Output:
7503520801
Mobile No.
9555879135
HTML caption is diplayed above the table. It must be used after table tag only.
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
CSS code:
<style>
table, th, td {
border-collapse: collapse;
th, td {
padding: 10px;
table#alter tr:nth-child(even) {
background-color: #eee;
table#alter tr:nth-child(odd) {
background-color: #fff;
table#alter th {
color: white;
background-color: gray;
}
</style>
Output:
HTML <font> tag is used to define the font style for the text contained within it. It defines the
font size, color, and face or the text in an HTML document.
Syntax
Display Inline
Example 1
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Font Tag</title>
5. </head>
6. <body>
7. <h2>Example of font tag</h2>
8. <p>This is normal text without any font styling</p>
9. <p>
10. <font color="blue">Text with normal size and default face</font>
11. </p>
12. <p>
13. <font size="5" color="green">Text with Increased size and default face</font>
14. </p>
15. <p>
16. <font color="red" face="cursive">Text with Changed face</font>
17. </p>
18. </body>
19. </html>
Output: