Introduction:
HTML stands for HyperText Markup Language. It is the standard language used to create and
design web pages on the internet. It was introduced by Tim Berners-Lee in 1991 at CERN as a
simple markup language. Since then, it has evolved through versions from HTML
2.0 to HTML5 (the latest 2024 version).
HTML is a combination of Hypertext and Markup language. Hypertext defines the link
between the web pages and Markup language defines the text document within the tag.
Features of HTML:
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
HTML Element:
An HTML element is defined by a
- start tag, <>
- some content, and an
- end tag </>
Syntax: <tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
Example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Tags:
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle
brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
HTML Attributes:
Attributes contain additional pieces of information. Attributes take the form of an opening tag
and additional info is placed inside. It defines the properties of any tags.
An example of an attribute is:
<img src="[Link]" alt="A photo of my dog.">
Here, the image source (src) and the alt text (alt) are attributes of the <img> tag.
HTML Page Structure
Below is an HTML page structure:
All HTML documents must start with a document type declaration:
<!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
HTML paragraphs are defined with the <p> tag:
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 All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)
Syntax
<tag> content </tag>
HTML Headings tag:
The HTML heading tags are used to create headings for the content of a webpage. These tags
are typically placed inside the body tag.
HTML offers six heading tags, from <h1> to <h6>, each displaying the heading in a differ e nt
font size.
Syntax:
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Example 2: To demonstrate the use of 6 heading tags from <h1> to <h6> in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML heading tag</title>
</head>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>
HTML Paragraph
HTML <p> tags are used to write paragraph statements on a webpage.
They start with the <p> tag and end with </p>.
Syntax: <p> Content... </p>
To illustrates the use of <p> tag for writing a paragraph statement in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Example of paragraph and break elements
</title>
</head>
<body>
<p>
HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup
language.<br>HTML is a combination of Hypertext
and Markup language.<br>Hypertext defines the
link between web pages.<br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>
</html>
Break or BR Element:
The HTML <br> tag is used to insert a single line break and does not require a closing tag.
In HTML, the break tag is written as <br>.
Syntax:
<br>
HTML Links OR 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.
“href” attribute of HTML anchor tag
The “href “attribute is used to define the address of the file to be linked. In other words, it points
out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Example:
<!DOCTYPE>
<html>
<body>
<a href="[Link]">Click for Second Page</a>
</body>
</html>
Appearance of HTML anchor tag
An unvisited link is displayed underlined and blue.
A visited link displayed underlined and purple.
An active link is underlined and red.
Empty HTML Elements:
HTML elements with no content are called empty elements .
The <br> tag defines a line break, and is an empty element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>
HTML Images:
HTML img tag is used to display image on the web page. HTML images are defined with
the <img> tag.
HTML img tag is an empty tag that contains attributes only, closing tags are not used in
HTML image element.
The source file (src), alternative text (alt), width, and height are provided as attributes:
The file types generally used for image files are: .jpg, .png, .gif.
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. The location of image may be on the same directory or
another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed.
3) width
It is an attribute which is used to specify the width to display the image.
4) height
It is an attribute which is used to specify the height of the image.
Example : <img src="[Link]" alt="[Link]" width="104" height="142">
Using<img> tag as a link
We can also link an image with other page or we can use an image as a link. To do this, put <img>
tag inside the <a> tag.
<a href="[Link] is robotics">
img src="[Link]" height="100" width="100" > </a>
HTML List
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)
Ordered List: The first is an <ol>: This is an ordered list of contents.
For example:
1. An item
2. Another item
3. Another goes here.
Inside the <ol> tag we list each item on the list inside <li> </li> tags.
For example:
<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>
Unordered List: The second type of list is an <ul> unordered list. This is better known as
a bullet point list and contains no numbers.
For example of this is:
<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>
Definition List: To include a definition list in your page <dl> tag is used. An example of
a <dl> list is as follows:
The code used for the above is as follows:
<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>
HTML Text Formatting
HTML contains several Formatting elements for defining text with a special meaning.
Formatting elements were designed to display special types of text:
Example:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
Example
<strong>This text is important!</strong>
The HTML <i> element defines a part of text in an italic format. The content inside is typically
displayed in italic.
Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.
Example
<em>This text is emphasized</em>
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<small>This is some smaller text.</small>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below
the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2 O:
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used
for footnotes, like WWW[1]:
Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Comments
HTML comments are not displayed in the browser, but they can help document HTML source
code
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Table
HTML table tag is used to display data in tabular form (row * column).
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.
Table Cells: Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Table Rows: Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Table Headers: cells can be table header cells using the <th> tag instead of the <td> tag:
th stands for table header.
By default, the text in <th> elements are bold and centered.
<html>
<head>
<title> Table Demo </title>
</head>
<body>
<h2>HTML Table</h2>
<table border="2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td> HCL </td>
<td> 123456 </td>
<td> India </td>
</tr>
<tr>
<th> xyz </th>
<td>sfdsdf</td>
<th>22ewd</th>
</tr>
</table>
</body>
</html>
Output:
Company Contact Country
HCL 123456 India
xyz sfdsdf 22ewd
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
HTML tables can adjust the padding inside the cells, and also the space between the cells.
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on
the table element:
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
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.
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.
The value of the rowspan attribute represents the number of rows to span.
Let's see the example that span two rows
Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Table with Border
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border.
<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>
Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or
text horizontally or vertically. i.e., it scrolls the image or text up, down, left or right automatica lly.
Example
1. <marquee>This is an example of html marquee </marquee>
HTML Marquee Attributes: Marquee's element contains several attributes that are used to
control and adjust the appearance of the marquee.
Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the three different types: scroll, slid
and alternate.
direction defines direction for scrolling content. It may be left, right, up and down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color. It is now deprecated.
HTML pre tag
The HTML <pre> tag is used to specify pre formatted texts. Texts within <pre>.......</pre> tag
is displayed in a fixed-width font.
HTML pre tag example
<pre>
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
</pre>
Output:
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
HTML <font> tag
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
<font size=" " color=" " face=" "> Content....</font>
<font color="blue">Text with normal size and default face</font>
<font size="5" color="green">Text with Increased size and default face</font>
<font color="red" face="cursive">Text with Changed face</font>
HTML <hr> Tag
The <hr> element is most often displayed as a horizontal rule that is used to separate content.
Syntax: <hr> ...
Example
<html>
<body>
<h1>An example of the hr tag in HTML</h1>
<p>Welcome to the page.</p>
<hr>
<p>Below are the contents.</p>
</body>
</html>
Output:
Attributes of the <hr> Tag: The hr tag takes a wide range of parameters, like WIDTH, ALIGN,
COLOUR, NOSHADE, and SIZE as attributes.
1. WIDTH Attribute
The horizontal line's width can be changed using the WIDTH attribute. Both pixels and
percentages can be used to define the WIDTH attribute.
2. COLOR Attribute
The color of the horizontal line in HTML may be altered using the COLOUR property. We have
three options for describing a color: the color name, the hexadecimal code, or the RGB values.
However, the horizontal line is black by default.
3. SIZE attribute
The SIZE attribute may change the horizontal line's height or thickness in HTML. It can only be
described in pixels.
<hr size="10px" color="red" />
4. ALIGN attribute
The HTML page's horizontal line can be aligned to the left, right, or center using the ALIGN
attribute.
<hr align="left" width="70%" color="red">
<p>A horizontal line with blue color</p>
<hr align="right" width="70%" color="blue">
<p>A horizontal line with orange color</p>
<hr align="left" width="70%" color="orange">
HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing such
as name, email address, password, phone number, etc. .
HTML forms are required to collect some data from of the site visitor.
The <form> tag is used to create an HTML form for user input.
It serves as a container for various input elements like text fields, checkboxes, and buttons,
enabling the collection of data for submission to a server or processing via client-side scripts.
HTML Form Tags
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi- line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML <form> element
The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text area,
password field, etc.
Syntax:
<form>
//Form elements
</form>
HTML <input> element or TextField
The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. The name attribute is optional, but it is required for the server side component
such as JSP, ASP, PHP etc.
Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
Output:
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute or by CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Output:
Label Tag in Form
Label tag specifies the type of data or information to be entered. It also provides information about
other controls.
Example: <label for="password">Password: </label>
HTML Password Field Control
The password information or text is not visible to the user in password field control. The
information entered here will be displayed in ‘x’ format.
Example:
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc. Using radio buttons for multiple options, you can only choose a single
option at a time
use one name in the name attribute for all the radio buttons, only one radio button can be selected
at a time.
.<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Output:
Submit button control
HTML <input type="submit"> are used to add a submit button on web page. When user clicks
on submit button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
HTML Frames:
HTML frames are used to divide browser window into multiple sections where each section can
load a separate HTML document independently.
A collection of frames in the browser window is known as a frameset. The window is divided
into frames in a similar way the tables are organized: into rows and columns.
Syntax
<frameset rows="50%,50%">
<frame name="top" src="link/to/frame1" />
<frame name="bottom" src="link/to/frame2" />
</frameset>
Where the rows attribute of frameset defines the division of the window into horizontal sections.
In this case, the window is divided into two rows, each taking up 50% of the available height.
Creating Frames in HTML
To make frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall open into
the frame.
Example: Creating horizontal frames using rows attribute in frameset tag
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<body>
Your browser support frames.
</body>
</frameset>
</html>
Example: Creating vertical Frames using cols attribute in frameset tag
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Attributes of frameset Tag
Attributes Description
Specifies how many columns are contained in the frameset and the size of each
column. You can specify the width of each column in one of four ways.
For example to create three vertical frames,
use cols="100, 500,100". [ pixels ]
cols For example to create three vertical frames,
use cols="10%, 80%,10%". [prercentage]
Using a wildcard symbol.
For example to create three vertical frames, use cols="10%, *,10%".
In this case wildcard takes remainder of the window.
This attribute works just like the cols attribute and takes the same values, but it
rows
is used to specify the rows in the frameset.
For example to create two horizontal frames, use rows="10%, 90%". You can
specify the height of each row in the same way as explained above for columns.
This attribute specifies the width of the border of each frame in pixels.
border
For example border="5". A value of zero means no border.
This attribute specifies whether a three-dimensional border should be displayed
frameborder between frames. This attribute takes value either 1 (yes) or 0 (no).
For example frameborder="0" specifies no border.
This attribute specifies the amount of space between frames in a frameset. This
can take any integer value.
framespacing
For example framespacing="10" means there should be 10 pixels spacing
between each frames.
HTML <frame> Tag Attributes
Below listed arrtibutes are accepted by the frame tag.
Attribute Description
This attribute is used to give the file name that should be loaded in the frame. Its
value can be any URL.
src
For example, src="/html/top_frame.htm" will load an HTML file available in
html directory.
This attribute allows you to give a name to a frame. It is used to indicate which
name
frame a document should be loaded into.
This attribute specifies whether or not the borders of that frame are shown; it
frameborder overrides the value given in the frameborder attribute on the <frameset> tag if
one is given, and this can take values either 1 (yes) or 0 (no).
This attribute allows you to specify the width of the space between the left and
marginwidth right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth="10".
This attribute allows you to specify the height of the space between the top and
marginheight bottom of the frame's borders and its contents. The value is given in pixels.
For example marginheight="10".
By default you can resize any frame by clicking and dragging on the borders of a
noresize frame. The noresize attribute prevents a user from being able to resize the frame.
For example noresize="noresize".
This attribute controls the appearance of the scrollbars that appear on the frame.
scrolling This takes values either "yes", "no" or "auto".
For example scrolling="no" means it should not have scroll bars.
Absolute URLs vs. Relative URLs
<a href="[Link] target="_blank">Visit W3Schools!</a>
In the above example a full web address (URL) is used in <A> tag. This type of providing link
is known absolute URL..
A local link (a link to a page within the same website) is specified with a relative URL (without
the "[Link] part):
Example
<h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>