0% found this document useful (0 votes)

82 views

01.Html Textbook

The document discusses HTML doctypes and their usage. It provides examples of common doctypes for different versions of HTML and XHTML, including HTML5, HTML 4.01 Strict, Transitional and Frameset, and XHTML 1.0 Strict, Transitional and Frameset. It explains that the doctype is not a tag but tells the browser which markup language and version is being used. The HTML5 doctype is the simplest at <!DOCTYPE html>.

Uploaded by

Walid

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

82 views

01.Html Textbook

Uploaded by

Walid

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 192

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTML 5

HTML Tutorial
Read Discuss Courses

HTML stands for HyperText Markup Language. It is used to design the web
pages. With the help of HTML, you can create a complete website structure.
HTML is the combination of Hypertext and Markup language. Hypertext defines
the link between the web pages and markup language defines the text document
within the tag that define the structure of web pages. This HTML Tutorial is
designed to provide basic to advanced HTML concepts for beginners and
professionals both.

HTML Tutorial

HTML Basic Structure of Web Page

The basic structure of an HTML page is laid out below. It contains the essential
building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.
HTML Page Structure

HTML Basic Tags

<DOCTYPE! html> – A doctype or document type declaration is an instruction
that tells the web browser about the markup language in which the current
page is written. It is not an element or tag. The doctype declaration is not
case-sensitive.

<html> – This tag is used to define the root element of HTML document. This
tag tells the browser that it is an HTML document. It is the second outer
container element that contains all other elements within it.

💡 Spotlight

7 Best Sites For Free Web Hosting

For beginners (especially students), the most common problem faced by them
while building a website is Budget. Yes, to run a website it requires a Web Hosting
service that costs you a big money and it’s true that in the learning or testing
process, no one wants to spend that money. But.. Read More

Free Web Hosting Building Website Domain Purchase

<head> – This tag is used to define the head portion of the HTML document
that contains information related to the document. Elements within the head
tag are not visible on the front-end of a webpage.
<body> – The body tag is used to enclose all the visible content of a webpage.
In other words, the body content is what the browser will show on the front
end.

Example: This is the basic example of HTML that display the heading and
paragraph content.

HTML

<!DOCTYPE html>
<html>

<head>

<title>Basic Web Page</title>
</head>

<body>

<h1>Welcome to GeeksforGeeks</h1>

<p>A computer science portal for geeks</p>
</body>

</html>

Output:
Learn HTML
Tags
Attributes
Global Attributes
Event Attributes
Canvas
DOM
DOM Audio/Video
HTML5
MathML
Questions Complete Reference

HTML Interview Questions

HTML Interview Questions and Answers (2023) – Beginner Level
HTML Interview Questions and Answers Set (2023) – Intermediate Level
HTML Interview Questions and Answers Set (2023) – Advanced Level

HTML Practice Quiz Sets

Practice Quiz 1
Practice Quiz 2

HTML Cheat Sheet

HTML Cheat Sheet is a simple, and quick reference list of basic HTML elements
and attributes. The purpose of this Cheat Sheet is to provide you with some quick
accurate ready-to-use code snippets and necessary HTML tags and attributes.

HTML Examples
HTML examples contains a wide collection of HTML programming examples. The
HTML examples are categorized based on the topics including hyperlinks, forms,
tables, frames, and many more.

Learn more about HTML

Introduction
HTML5 Introduction
HTML Hex Color Codes
HTML Charsets
HTML URL Encoding
Most commonly used HTML tags
Structure of HTML Document
HTML Form Design
Design your First Website in Just 1 Week
Simple Portfolio Website Design
Design a Portfolio Gallery
Design a web page
Top 10 Projects For Beginners
10 Best HTML Coding Practices You Must Know
Design a Login Form to an Image using HTML and CSS

Why HTML is used ?

HTML is used to create the structure of web pages and website that are
displayed on the Internet. HTML basically contains Tags and Attributes that are
used to design the web pages. Also, we can link multiple pages using Hyperlinks.

Last Updated : 18 Dec, 2023 8

HTML Introduction
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Doctypes
Read Discuss Courses

Doctype: A doctype or document type declaration is an instruction that tells

the web browser about the markup language in which the current page is
written. The Doctype is not an element or tag, it lets the browser know about
the version of or standard of HTML or any other markup language that is being
used in the document.

Declaration of a Doctype: A DOCTYPE declaration appears at the top of a web

page before all other elements. According to the HTML specification or
standards, every HTML document requires a document type declaration to
ensure that the pages are displayed in the way they are intended to be
displayed.

The DOCTYPE for HTML5 is case-insensitive and can be written as shown

below:

< !DOCTYPE html >

Doctype Usage: In the version, HTML 4.01, the usage of DOCTYPE declaration
was to create a reference to a document type definition (DTD), since the version
HTML 4.01 was completely based on a Standard Generalized Markup
Language(SGML).
The document type definition (DTD) is responsible for specifying the rules for
the Standard Generalized Markup Language(SGML) so that the browser
processes the content correctly. But in the HTML version, HTML 5 there isn’t
any need for a reference to a document type definition (DTD) because HTML 5
is not based on a Standard Generalized Markup Language(SGML).
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

In HTML 5, the DOCTYPE declaration is only required for enabling the standard
mode for writing documents.
Below is a sample HTML program with doctype declaration:

Example:

html

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>This is HTML5 Doctype Tag</h2>
</body>

</html>

Output:
Below is the list of some common doctype declaration for different version of
HTML and XHTML:

1. HTML 5

html

<!DOCTYPE html>

2. HTML 4.01 Strict: In HTML 4.01 Strict document type definition (DTD) all
those elements and attributes are included that do not appear in frameset
documents or that have not been deprecated.

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

3. HTML 4.01 Transitional: In HTML 4.01 Transitional document type

definition (DTD) allows some older PUBLIC and attributes that have been
deprecated.

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

4. HTML 4.01 Frameset: In HTML 4.01 Frameset document type definition

(DTD),Frames can be used.

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

5. XHTML 1.0 Strict: In XHTML 1.0 Strict document type definition (DTD),
deprecated tags are not supported and the code must be written according
to the XML Specification.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

6. XHTML 1.0 Transitional: In XHTML 1.0 Transitional document type

definition (DTD), deprecated elements are allowed.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7. XHTML 1.0 Frameset: In XHTML 1.0 Frameset document type definition

(DTD), framesets can be used.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

8. XHTML 1.1: In XHTML 1.1 document type definition (DTD), allows the
addition of modules.
html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Last Updated : 04 Feb, 2021 38

HTML <abbr> Tag

Similar Reads
What are the different kinds of Doctypes HTML Course | Structure of an HTML
available ? Document

HTML Course Basics of HTML HTML | DOM HTML Object

HTML | <html> xmlns Attribute What is the difference between <html

lang="en'> and <html lang="en-US'> ?

Inline HTML Helper - HTML Helpers in How to return HTML or build HTML using
ASP.NET MVC JavaScript ?

How to convert html.slim to html.erb ? How to display HTML tags as plain text in
HTML ?
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

Essential HTML Tags

Read Discuss Courses

HTML stands for HyperText Markup Language. It is an important language to

design web pages or websites. These websites are visible to anyone on the
internet. HTML is a combination of Hypertext and Markup language. Where
hypertext is a link between the webpages, and markup language is used to
define the text document within a tag, that defines the structure of the web
pages.

HTML uses predefined tags that tell the browser how to display the content.
Tags are nothing but some instructions that are enclosed in angle braces(i.e.,
<>). It is divided into three parts, i.e., opening tag, content(which will display on
the browser), and closing tag, but some tags are special tags that do not
contain closing tags like <BR> tag. When you are working with HTML tags
always remember to include closing tags. If you forget to close the tag, the
browser applies the effect of the opening tag until the end of the page. HTML
contains four essential tags that form the basic structure of any webpage or
HTML file:

1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>

Now let us discuss each tag one by one:

1. <!DOCTYPE html>
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

It is also known as document type and should be included in an HTML file. It

actually tells the browser that this is an HTML document. It is not a tag or an
element but it is information.

Syntax:

<!DOCTYPE html>

2. <html></html>

This tag marks the beginning and ending of the HTML document and whatever
code is present in between these tags totally gets considered by the browser.
Also, it tells the browser that the document is an HTML document. All the
other tags in between these tags only get considered by the browser.

Syntax:

<html> Content </html>

3. <head></head>

This tag store the data which actually doesn’t appear on the webpage but it
gives more information about the webpage. Or in other words, this tag is used
to define the head part of the document which contains the information related
to the webpage. It also contain tags like, <title>, <meta>, <link>, <style>, etc.

Syntax:

<head> <title> Title of the Webpage </title></head>

4. <title> </title>

This tag stores the title/name of the web page. Whatever title/content is given
in this tag, the content appears on the tab when opened by the browser. It is
described in the head tag.

Syntax:

<title> Title of the Webpage </title>

5. <body></body>

This tag is used to display all the information or data, i.e, text, images,
hyperlinks videos, etc., on the webpage to the user. Here, all the content like
text, images, hyperlinks videos, etc., are enclosed between this tag.

Syntax:

<body> Content </body>

Some other HTML tags are:

1. <!– comment –>

This tag is used to add comments in the HTML codes. These comments help
the program to understand the code. The content inside the comment tag
doesn’t visible on the browser.
Syntax:

<!–Write comments here –>

2. <meta>

These meta tags are used inside the head tag and they making describe the
metadata i.e data about data. These tags are useful in search engine
optimization which means when users search for our websites the chances that
the browser recommends our webpage becomes high which leads to an
increase in traffic over the webpage. A single HTML document can contain
multiple tags.

Syntax:

3. <link rel =”stylesheet” href=”file.css “>

This tag is used to include external style sheets. Use this tag when you don’t
want to include CSS in the HTML document. To make it more simple we make
a CSS file with the code and include this file in the link tag.

Syntax:

<link rel =”stylesheet” href=”file.css “>

4. <script></script>

It is used for including javascript code. The external javascript can also be
linked using the src attribute in the opening script tag. It can be included in the
head or body tag.

Syntax:
<script>script content</script>

5. Heading:

HTML provides six types of headings, i.e., H1, H2, H3, H4, H5, and H6. Here,
H1 is the highest level heading and H6 is the lower level heading. These
headings are used to highlight the important topics.

Syntax:

<h1> content </h1>

<h2> content </h2>

<h3> content </h3>

<h4> content </h4>

<h5> content </h5>

<h6> content </h6>

Example 1:

Simple HTML program:

HTML

<!DOCTYPE html>
<html lang="en">
<head>

<title>Geeks For Geeks </title>

</head>

<body>
<h1> Geeks For Geeks </h1>
<h3> A computer science portal for geeks </h3>

</body>
</html>

Output:

Example 2:

HTML program in which we are adding external CSS using the <link> tag

HTML

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="GFG.css">

<title>Geeks For Geeks </title>

</head>

<body>
<h1> Geeks For Geeks </h1>
<h3> A computer science portal for geeks </h3>

</body>
</html>

GFG.css
body {

text-align: center;
}
h1{
color: darkgreen;
}
h3{
color:darkgreen;
}:

Output:

Example 3:

HTML program in which we are adding javascript file GFG.JS using <script>
tag:

HTML

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>

</body>
</html>

Javascript

function darkMode() {
document.body.style.backgroundColor = "black";
}

Output:
On clicking the button.

Last Updated : 20 Aug, 2021 4

Previous Next

Composition of Functions
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML <head> Tag

Read Discuss Courses

The HTML <head> Tag is used to define the head portion of the document
which contains information related to the document. Metadata refers to data
about an HTML document. Unlike other content, metadata is not typically
displayed on the page itself.

The <head> element is a container for metadata tag and contains other head
elements such as:

Note:

In HTML 4, the <head> element was mandatory but in HTML5, the <head>
element can be omitted.
The <head> Tag supports the Global Attribute in HTML.

Syntax
<head>
<title>Title of the document</title>
</head>

Example 1: The below example illustrates the <head> element.

💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

HTML

<!DOCTYPE html>
<html lang="en">

<body>
<p>
GeeksforGeeks is a portal for geeks.
</p>
<hr>
</body>

</html>

Output:
Example 2 : The below example illustrates the usage of style tag inside head
tag.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
background: skyblue;
}

h1 {
color: red;
}

p {
color: blue;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<p>It is a portal for geeks.</p>
</body>

</html>

Output:
Example 3: The below example illustrates the usage of link tag inside head
tag.

HTML

<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>
<p>
It is a portal for geeks.
</p>
</body>

</html>

Output:
Supported Browsers
Google Chrome 15
Edge 12 and above
Firefox 1 and above
Opera 14 and above
Safari 6 and above

Last Updated : 20 Dec, 2023 16

Previous Next

HTML frameset Tag HTML5 <header> Tag

Similar Reads
Explain the significance of <head> and Which tag is used to represent progress
<body> tag in HTML of a task in HTML & how is it different
from <meter> tag ?

Is container tag same as the empty tag in HTML DOM head Property
HTML? If not, why ?

Elements that are used in head section of What purpose does a <script> tag serve
HTML page inside of a <noscript> tag?
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML <body> Tag

Read Discuss Courses

The <body> tag in HTML is used to define the main content present inside an
HTML page. It is always enclosed within <html>tag. The <body> tag is the last
child of <html> tag. A body tag contains starting as well as an ending tag.

Syntax:

<body> Body Contents... </body>

Attributes: There are many attributes in the <body> tag which are depreciated
from HTML5 are listed below:

background: It contains the URL of the background image. It is used to set

the background image.
bgcolor: It is used to specify the background color of an image.
alink: It is used to specify the color of the active link.
link: It is used to specify the color of visited links.
text: It specifies the color of the text in a document.
vlink: It specifies the color of visited links.

Example : Using HTML body tag. All then content placed inside the body tag.
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>body Tag</h2>

<p>This is paragraph text</p>

</body>

</html>

Output:
Example 2: Example to show the functioning of a Body tag along with its CSS
implementation.

HTML

<!DOCTYPE html>
<html>

<body style="background-color:seagreen">
<h1>GeeksforGeeks</h1>
<h2>HTML body Tag</h2>

<p>This is paragraph Tag</p>

</body>

</html>

Output:
Supported Browsers:

Google Chrome 1 and above

Edge 12 and above
Internet Explorer
Firefox 1 and above
Opera
Safari

Last Updated : 20 Jul, 2022 9

Previous Next

HTML <blockquote> Tag HTML <b> Tag

Similar Reads
How to get all HTML content from Explain the significance of <head> and
DOMParser excluding the outer body tag <body> tag in HTML
?

Which tag is used to represent progress Is container tag same as the empty tag in
of a task in HTML & how is it different HTML? If not, why ?
from <meter> tag ?

HTML DOM body Property HTML DOM Body Object

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Heading
Read Discuss Courses

In this article, we will know HTML Headings, & their implementation through
examples. An HTML heading tag is used to define the headings of a page.
There are six levels of headings defined by HTML. These 6 heading elements
are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the
least.

<h1> is used for the main heading. (Biggest in size)

<h2> is used for subheadings, if there are further sections under the
subheadings then the <h3> elements are used.
<h6> for the small heading (smallest one).

Browsers display the contents of headings in different sizes. The exact size at
which each browser shows the heading can vary slightly. Users can also adjust
the size of the text in their browser.

Syntax:

// the 'h' inside the tag should be in small case only.

<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>

Importance of Heading:
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

Search Engines use headings for indexing the structure and organizing the
content of the webpage.
Headings are used for highlighting important topics.
They provide valuable information and tell us about the structure of the
document.

Example 1: This example illustrates the HTML heading tags.

HTML

<!DOCTYPE html>
<html>
<body>

<h1>H1 Heading</h1>

<!-- With the help of Style attribute you can customize

the size of the heading, As done below-->

<h1 style="font-size: 50px">H1 with new size.</h1>

<!-- Here font-size is the property by which we can

modify the heading. Here we kept it 50px i.e. 50 pixels -->

</body>
</html>

HTML

<!DOCTYPE html>
<html>

<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>A computer science portal for geeks</h2>
<h5>Tutorial</h5>
<h6>Geeks</h6>
</body>

</html>

Output:

Changing the size of HTML Headings: The default size of HTML headings can
be changed, using the style attribute.

Example: This example explains the HTML heading tags by specifying the size
of the font.

HTML

<!DOCTYPE html>
<html>
<body>

<h1>H1 Heading</h1>

<!-- With the help of Style attribute you can customize

the size of the heading, As done below-->

<h1 style="font-size: 50px">H1 with new size.</h1>

</body>
</html>

Output:

Styling the <h1> tag with different font-size

Horizontal rule: The <hr> tag which stands for the horizontal rule is used to
define a thematic break in an HTML page. The <hr> tag is an empty tag, and it
does not require any end tag. It is basically used to separate content. Please
refer to the HTML <hr> Tag article for more detailed information.

Example: This example explains the HTML Headings with horizontal rules.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>Heading 1</h1>
<p>I like HTML.</p>

<hr />
<h2>Heading 2</h2>
<p>I like CSS.</p>

<hr />
<h2>Heading 3</h2>
<p>I like Javascript.</p>
</body>

</html>

Output:
HTML Heading with the horizontal line

Supported Browsers:

Google Chrome 93.0

Microsoft Edge 93.0
Internet Explorer 11.0
Firefox 92.0
Opera 78.0
Safari 14.1

Last Updated : 28 Nov, 2022 88

Previous Next

HTML Attributes HTML Paragraphs

Similar Reads
What are various heading elements used HTML | DOM Heading Object
to add heading in HTML ?

How to define an HTML heading in HTML DOM Geolocation coords.heading

HTML5 ? Property

HTML DOM Heading align Property How to add sub heading using HTML ?
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Paragraphs
Read Discuss Courses

In this article, we will know the HTML Paragraph, & its basic implementation
through the examples. The <p> tag in HTML defines a paragraph. These have
both opening and closing tags. So anything mentioned within <p> and </p> is
treated as a paragraph. Most browsers read a line as a paragraph even if we
don’t use the closing tag i.e, </p>, but this may raise unexpected results. So, it
is a good convention, and we must use the closing tag.

Syntax:

<p> Content </p>

Example 1: In this example, we are using the <p> tag that is used for
paragraphs in HTML.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Welcome To GeeksforGeeks</h2>

<p>A computer science portal for geeks.</p>
</body>

</html>

Output:
Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

HTML p tag

Example 2: This example explains the HTML <p> tag.

HTML

<!DOCTYPE html>
<html>

<body>
<p>A Computer Science portal for geeks.</p>
<p>It contains well written, well thought articles.</p>
</body>

</html>

Output:

Multiple p Tags

Key Points: When we look at the webpage, we see that there are few spaces
added before and after a paragraph. HTML does this by default. Let’s look at a
few properties of the paragraph tag:

As already mentioned, the<p>tag automatically adds space before and after

any paragraph, which is basically margins added by the browser.
If a user adds multiple spaces, the browser reduces them to a single space.
If a user adds multiple lines, the browser reduces them to a single line.
By default, the display of the Paragraph element is set to “block” which you
can change using CSS. This means that if you add another paragraph to the
webpage the next paragraph will be inserted in the next line on the
webpage.

Example: This example explains the HTML <p> tag having multiple lines.

HTML

<!DOCTYPE html>
<html>

<body>
<p>
This paragraph has multiple lines.
But HTML reduces them to a single line,
omitting the carriage return we have used.
</p>
<p>
This paragraph has multiple spaces.
But HTML reduces them all to a single
space, omitting the extra spaces and line we have used.
</p>
</body>

</html>

Output:

p tag with multiple lines

<br> tag: There is a way to let the HTML know where the browser needs to
change the lines by using the <br> tag. These tags do not have any closing tag.
So, just a single opening tag will change the line.
Syntax:

<br>

Example: This example explains the <br> tag inside the <p> tag to add the
line-break.

HTML

<!DOCTYPE html>
<html>

<body>
<p>
This paragraph has multiple
<br />lines. But HTML reduces them
<br />to a single line, omitting
<br />the carriage return we have used.
</p>
</body>

</html>

Output:

Use of br tag inside the p tag

Align attribute: The <p> tag specifically supports the alignment attribute and
allows us to align our paragraphs in left, right, or center alignment.

Syntax:

Example: This example explains the align attribute to align the content in the
<p> tag.

HTML
<!DOCTYPE html>
<html>

<body>
<p align="center">
Welcome Geeks
</p>
<p align="left">
A Computer Science portal for geeks.
</p>
<p align="right">
It contains well written, well thought articles.
</p>
</body>

</html>

Output:

Use of align attribute in p tag

<pre> tag: We have seen how the paragraph tag ignores all the changes of
lines and extra spaces within a paragraph, but there is a way to preserve this
by the use of the <pre> tag. It also contains an opening and a closing tag. It
displays a text within a fixed height and width and preserves the extra lines
and spaces we use.

Syntax:

<pre> Content </pre>

Example: This example explains the use of the <pre> tag in the <p> tag.

HTML

<!DOCTYPE html>
<html>

<body>
<pre>
This paragraph has multiple
lines. But it is displayed
as it is unlike the paragraph
tag.
</pre>

<pre>
This paragraph has multiple
spaces. But it is displayed
as it is unlike the paragraph
tag.
</pre>
</body>

</html>

Output:

Use of pre tag in the p tag

Supported Browsers:

Google Chrome
Internet Explorer
Microsoft Edge 12
Firefox 1
Opera
Safari

Last Updated : 07 Jul, 2023 114

Previous Next

HTML Heading HTML Text Formatting

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Attributes
Read Discuss Courses

In this article, we will know HTML Attributes, and their implementation

through examples. All HTML elements have attributes that will provide
additional information about that particular element. It takes two parameters,
ie, a name & a value which define the properties of the element and are placed
inside the element tag.

Attributes are always added to the start tag of an HTML element. Attributes
always come in name/value pairs like this: attribute_name=”value” and
attribute values should always be enclosed in quotes

Note: The name parameter takes the name of the property we would like to
assign to the element and the value takes the property value or extent of the
property names that can be aligned over the element. Every name has some
value that must be written within quotes.

Syntax:
<element attribute_name="attribute_value">

Supported Attributes:
It is a global attribute that is supported by all the tags.
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

Below are some of the most commonly used Attributes in HTML.

Table of Content
HTML src Attribute:
HTML alt Attribute:
HTML width and height Attribute:
HTML id Attribute:
HTML title Attribute:
HTML href Attribute:
HTML style Attribute:
HTML lang attribute:

HTML src Attribute:

If we want to insert an image into a webpage, then we need to use the <img>
tag and the src attribute. We will need to specify the address of the image as
the attribute’s value inside the double quote.

Example:

This example explains the HTML src Attributes to specify the source address
of the file.

HTML

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</body>
</html>

Output:

src Attribute

HTML alt Attribute:

This is an alternate tag that is used to show or display something if the primary
attribute i.e., the <img> tag, fails to display the value assigned to it. This can
also be used to describe the image to a developer who is actually sitting at the
coding end.

Example:

This example explains the HTML alt Attributes to specify the name of the file
when the image is not loaded properly.

HTML

<html>
<head>
<title>alt Attribute</title>
</head>
<body>

<!--If the image is not found or the img field

is left blank the alt value gets displayed-->

Output:

alt Attribute

HTML width and height Attribute:

This attribute is used to adjust the width and height of an image.

Example:
This example explains the HTML width & height Attributes to specify the
different sizes of the images.

HTML

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
width="300px" height="100px" >
</body>
</html>

Output:

width& height attribute

HTML id Attribute:
This attribute is used to provide a unique identification to an element.
Situations may arise when we will need to access a particular element that
may have a similar name as the others. In that case, we provide different id’s to
various elements so that they can be uniquely accessed. The properties
extending the use of id are generally used in CSS, which we will be learning
later.

Example:

This example explains the HTML id Attributes to specify the unique value for
the specific element.

HTML
<!DOCTYPE html>
<html>

<head>
<style>
#geeks {
color: green;
}
</style>
</head>

<body>
<h1 id="geeks">Welcome to GeeksforGeeks</h1> </body>

</html>

Output:

id attribute

HTML title Attribute:

The title attribute is used to explain an element on hovering the mouse over it.
The behavior differs with various elements but generally, the value is displayed
while loading or hovering the mouse pointer over it.

Example:

This example explains the HTML title Attributes to specify the metadata for
the element on hovering the mouse over it.

HTML

<html>
<head>
<title>title Attribute</title>
</head>
<body>
<h3 title="Hello GeeksforGeeks">Hover to see the effect</h3>
</body>
</html>

Output:

title attribute

HTML href Attribute:

This attribute is used to specify a link to any address. This attribute is used
along with the <a> tag. The link put inside the href attribute gets linked to the
text displayed inside the<a> tag. On clicking on the text we will be redirected
to the link. By default, the link gets opened in the same tag but by using the
target attribute and setting its value to “_blank”, we will be redirected to
another tab or another window based on the browser’s configuration.

Example:

This example explains the HTML href Attributes specify the link address of the
file.

HTML

<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="https://www.geeksforgeeks.org/">
Click to open in the same tab
</a><br>
<a href="https://www.geeksforgeeks.org/" target="_blank">
Click to open in a different tab
</a>
</body>
</html>
Output:

href attribute

HTML style Attribute:

This attribute is used to provide various CSS effects to the HTML elements
such as increasing font-size, changing font-family, coloring, etc.

Example:

This example explains the HTML style Attributes to specify the style
properties for the HTML element.

HTML

<html>
<head>
<title>style Attribute</title>
</head>
<body>
<h2 style="font-family:Chaparral Pro Light;">Hello GeeksforGeeks.</h2>
<h3 style="font-size:20px;">Hello GeeksforGeeks.</h3>
<h2 style="color:#8CCEF9;">Hello GeeksforGeeks.</h2>
<h2 style="text-align:center;">Hello GeeksforGeeks.</h2>
</body>
</html>

Output:
style Attribute

HTML lang attribute:

The language is declared with the lang attribute. Declaring a language is can
be important for accessibility applications and search engines.

Example:

This example explains the HTML lang Attributes that specify the language of
the HTML page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>lang attribute</title>
<style>
body {
text-align: center;
}

h1 {
color: green;
}

.lang-info {
font-style: italic;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>lang attribute</h2>

<p lang="en">
A computer science portal for geeks
</p>

<p lang="fr" class="lang-info">

A computer science portal for geeks
</p>

<p lang="es" class="lang-info">

A computer science portal for geeks
</p>
</body>

</html>

Output:

Please refer to the HTML Attributes Complete Reference for all the attributes
in detail.

Last Updated : 22 Dec, 2023 56

Previous Next

HTML Elements HTML Heading

Similar Reads
How to remove all attributes of an HTML HTML Id Attributes
element using jQuery ?

HTML data-* Attributes HTML DOM attributes Property

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Text Formatting

Read Discuss Courses

In this article, we will know HTML Text Formatting, & will understand various
ways of formatting the text. HTML facilitates the ability for formatting text just
like we do in MS Word or any text editing software. We will go through a few
such options.

Example: In this example, we simply display text in HTML strong, small, and
Highlight formatting respectively.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Welcome To GeeksforGeeks</h2>

<strong>Hello Geeks</strong>
<br>

<small>Hello Geeks</small>
<br>

<mark>Hello Geeks</mark>
</body>

</html>

Output:
Formatting the text using various HTML tags

Below are the various options available to format the text:

💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

Making text Bold or Strong: We can make the text bold using the <b> tag.
The tag uses both opening and closing tags. The text that needs to be made
bold must be within <b> and </b> tag. We can also use the <strong> tag to
make the text strong, with added semantic importance. It also opens with
<strong> and ends with </strong> tag.

Example 1: The below example describes the formatting of the text to normal,
bold, & strong.

HTML

<!DOCTYPE html>
<html>

<body>

<p>Hello GeeksforGeeks</p>

<p>
<b>Hello GeeksforGeeks</b>
</p>

<p>
<strong>Hello GeeksforGeeks</strong>
</p>
</body>

</html>

Output:

Formatting the text using different tags

Making text Italic or emphasize: The <i> tag is used to italicise the text. It
opens with <i> and ends with </i> tag. The <em> tag is used to emphasize the
text, with added semantic importance. It opens with <em> and ends with
</em> tag.

Example 2: The below example describes the formatting of the text to Italic or
emphasize.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Italic</title>
</head>

<body>

<p>Hello GeeksforGeeks</p>

<p>
<i>Hello GeeksforGeeks</i>
</p>

<p>
<em>Hello GeeksforGeeks</em>
</p>
</body>

</html>

Output:

Formatting the text using <i> & <em> tags

Highlighting a text: It is also possible to highlight a text in HTML using the

<mark> tag. It has an opening tag <mark> and a closing tag </mark>.

Example: The below example describes the use of the <mark> tag that is used
to define the marked text.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Highlight</title>
</head>

<body>

<p>Hello GeeksforGeeks</p>

<p>
<mark>Hello GeeksforGeeks</mark>
</p>
</body>
</html>

Output:

Using <mark> Tag

Making a text Subscript or Superscript: The <sup> element is used to

superscript a text and the <sub> element is used to subscript a text. They both
have an opening and a closing tag.

Example: The below example describes the use of the <sup> & <sub> tags
that are used to add the superscript & subscript texts to the HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Superscript and Subscript</title>
</head>

<body>

<p>Hello GeeksforGeeks</p>

<p>Hello
<sup>GeeksforGeeks</sup>
</p>

<p>Hello
<sub>GeeksforGeeks</sub>
</p>
</body>

</html>

Output:

Using <sup> & <sub> Tag

Making text smaller: The <small> element is used to make the text smaller.
The text that needs to be displayed smaller should be written inside <small>
and </small> tag.

Example: The below example describes the use of the <small> tag that is used
to set small font sizes.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Small</title>
</head>

<body>

<p>Hello GeeksforGeeks</p>

<p>
<small>Hello GeeksforGeeks</small>
</p>
</body>

</html>

Output:

Using <small> Tag

Striking through the text: The <del> element is used to strike through the text
marking the part as deleted. It also has an opening and a closing tag.

Example: The below example describes the use of the <del> tag that is used to
mark a portion of text which has been deleted from the document.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Delete</title>
</head>

<body>

<p>Hello GeeksforGeeks</p>

<p> <del>Hello GeeksforGeeks</del> </p>
</body>

</html>

Output:
Using <del> Tag

Adding a text: The <ins> element is used to underline a text marking the part
as inserted or added. It also has an opening and a closing tag.

Example: This example describes the use of the <ins> tag to used to specify a
block of inserted text.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Inserting the Text</title>
</head>

<body>

<p>Hello GeeksforGeeks</p>

<p>
<ins>Hello GeeksforGeeks</ins>
</p>
</body>

</html>

Output:

Using <ins> tag

Supported Browsers:

Google Chrome
Microsoft Edge
Firefox
Opera
Safari

Last Updated : 30 Jun, 2023 123

Previous Next

HTML Paragraphs HTML Quotations

Similar Reads
HTML Text Formatting Elements What are the various formatting tags
available in HTML ?

Role of ViewPort in Visual Formatting How to display HTML tags as plain text in
Model HTML ?

How to override the current text How to align Placeholder Text in HTML ?
direction using HTML ?

HTML | DOM Input Text Object HTML | DOM Option text Property

HTML | DOM Input Text value Property HTML | DOM Input Text type Property

Complete Tutorials
HTML Tutorial JavaScript Project Ideas with Source
Code

Onsen UI React Material UI

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Comments
Read Discuss Courses

HTML Comments are used to insert comments in the HTML code. It is a good
practice of coding so that the coder and the reader can get help to understand
the code. It is a simple piece of code that is wiped off (ignored) by web
browsers i.e., not displayed by the browser.

Comment Types
There are three types of comments in HTML which are:

Table of Content
Comment Types
Single-line Comment
Multi-line Comment
Using comment tag

We will explore different types of Comments with suitable examples.

💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

Single-line Comment
The single-line comment is given inside the ( <!– comment –> ) tag.
Syntax

Example: In this example, we will see the implementation of the above

approach.

HTML

<!DOCTYPE html>
<html>

<body>

<h1>GeeksforGeeks</h1>

<h2>This is single line comment</h2>

</body>

</html>

Output:

Multi-line Comment
Multiple lines can be given by the syntax (<!– –>), Basically it’s the same as we
used in single line comment, difference is half part of the comment (” –> “), is
appended where the intended comment line ends.

Syntax

Example: In this example, we will see the implementation of above approach.

HTML

<!DOCTYPE html>
<html>

<body>

<h1>GeeksforGeeks</h1>

<h2>This is multi-line comment</h2>

</body>

</html>

Output:
Using comment tag
There used to be an HTML <comment> tag, but currently it is not supported by
any modern browser.

Syntax

<comment> Some Comment </comment>

Example: In this example, we will see the implementation of above approach.

HTML

<!DOCTYPE html>
<html>

<body>
<comment>This is heading tag</comment>
<h1>GeeksforGeeks</h1>
<comment>This is multi-line
comment
</comment>
<h2>This is a comment using</h2>

</body>

</html>
Output:

Last Updated : 13 Dec, 2023 130

Previous Next

HTML Basics HTML Elements

Similar Reads
How to write comments in HTML ? HTML Course | Structure of an HTML
Document

HTML Course Basics of HTML HTML | DOM HTML Object

HTML | <html> xmlns Attribute What is the difference between <html

lang="en'> and <html lang="en-US'> ?

Inline HTML Helper - HTML Helpers in How to return HTML or build HTML using
ASP.NET MVC JavaScript ?

How to convert html.slim to html.erb ? How to display HTML tags as plain text in
HTML ?
Free CSS Course Selectors Properties Functions Examples A to Z Guide Cheat Sheet HTML and CSS Tem

Types of CSS (Cascading Style Sheet)

Read Discuss Courses

Cascading Style Sheet (CSS) is used to set the style in web pages that contain
HTML elements. It sets the background color, font-size, font-family, color, …
etc. properties of elements on a web page.

There are three types of CSS which are given below:

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached
to the element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute.

Example: This example shows the application of inline-css.

Get Results in Tree Clic

Quickly Search For a Lost Phone by
Number. Take Advantage of Advance
Technology. Today 1$

GeoFinder Ope

html

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style="color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>

Output:

Internal or Embedded CSS: This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in
the head section i.e. the CSS is embedded within the <style> tag inside the
head section of the HTML file.

Example: This example shows the application of internal-css.

html

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}

.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}

.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksForGeeks</div>

<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

Output:

External CSS: External CSS contains separate CSS files that contain only style
properties with the help of tag attributes (For example class, id, heading, …
etc). CSS property is written in a separate file with a .css extension and should
be linked to the HTML document using a link tag. It means that, for each
element, style can be set only once and will be applied across web pages.

Example: The file given below contains CSS property. This file saves with .css
extension. For Ex: geeks.css

body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}

Below is the HTML file that is making use of the created external style sheet.

link tag is used to link the external style sheet with the html webpage.
href attribute is used to specify the location of the external style sheet file.

html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css" />
</head>

<body>
<div class="main">
<div class="GFG">GeeksForGeeks</div>
<div id="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

Output:

Priorities of CSS: Inline CSS has the highest priority, then comes
Internal/Embedded followed by External CSS which has the least priority.
Multiple style sheets can be defined on one page. For an HTML tag, styles can
be defined in multiple style types and follow the below order.

As Inline has the highest priority, any styles that are defined in the internal
and external style sheets are overridden by Inline styles.
Internal or Embedded stands second in the priority list and overrides the
styles in the external style sheet.
External style sheets have the least priority. If there are no styles defined
either in inline or internal style sheet then external style sheet rules are
applied for the HTML tags.

CSS is the foundation of webpages and is used for webpage development by

styling websites and web apps. You can learn CSS from the ground up by
following this CSS Tutorial and CSS Examples.

Last Updated : 15 May, 2023 80

Know How to Add CSS to HTML with Examples

By Simplilearn

Last updated on Jun 5, 2023 20333

Table of Contents

Inline CSS

Internal CSS

External CSS

Use of Different Types of CSS

Properties of CSS

CSS is a design language that improves the aesthetic of a website by making simple or uninteresting
text more appealing. CSS is responsible for visual structure and layout, whereas HTML is primarily
responsible for textual information. HTML is a markup language, whereas CSS is a style sheet
language. It is responsible for describing the presentation of an HTML or XML document (including
XML dialects such as SVG, MathML or XHTML). CSS specifies how elements should appear on a
screen, on paper, in speech, or in other forms of media.

CSS may be added to HTML in three different ways. To style a single HTML element on the page, use
Inline CSS in a style attribute. By adding CSS to the head section of our HTML document, we can
embed an internal stylesheet. We can also connect to an external stylesheet that separates our CSS
from our HTML.

Now let’s discuss all the methods one by one.

Want a Top Software Development Job? Start Here!

Full Stack Development-MEAN

EXPLORE PROGRAM

Inline CSS

Style rules can be applied to individual HTML elements using inline CSS. Inlining CSS is the process
of embedding CSS into an HTML file rather than using an external CSS file. Because inline CSS only
allows us to apply a single style to one HTML element, it's only useful for establishing unique
properties. Inline CSS is advantageous since it decreases the number of files that the browser must
download before the web page can be shown. The browser loads an HTML file first, then downloads
the CSS file when using external CSS. We only need to download one HTML file instead of two using
inline CSS, which speeds up the process.

The inline styles will only affect the HTML element to which the style attribute with CSS-property
values is applied. The first paragraph in the example below will be styled in red with a 20px font size.
The properties apply just to the first line of the code, not the full code.

Example 1:

<body>

<p style=”color:red; font-size: 20px;”>This is our first HTML code.</p>

<p>This is our second HTML code</p>

</body>

Example 2:

<h1 style="color:yellow; font-size:40px;">This is HTML code</h1>

<p style="color:black; font-size:42px;">This is a HTML code with inline CSS.</p>

<div style="color:orange; font-size:44px;">This is some text content with CSS styling.</div>

However, using inline styles is generally thought to be a bad idea. Because style rules are inserted
directly into the HTML tag, the presentation of the document becomes intermingled with the content
of the document, making the code difficult to maintain and defeating the purpose of CSS.
Want a Top Software Development Job? Start Here!

Full Stack Development-MEAN

EXPLORE PROGRAM

Internal CSS

Internal CSS is one of the most popular CSS forms for updating, customizing, and modifying a single
web page's unique styles. You can use the internal CSS by integrating the <style> element in the
<head> section of a HTML web page.

Internal CSS can be used to style a single web page, but not multiple web pages, and we can style
numerous web pages with the same code.

Example 1:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: grey;

h1 {
color: red;

margin-left: 75px;

</style>

</head>

<body>

<h1>The internal CSS is applied on this heading, so it will show some unique appearance.</h1>

<p>This paragraph will not be affected as internal CSS is not applied on this.</p>

</body>

</html>

Example 2:

<!DOCTYPE html>

<html>

<head>

<style>

color: powderblue;
}

</style>

</head>

<body>

<h2>Internal CSS Demo</h2>

<p>The default text color for the page is black. However, we can change the color of every
paragraph element on the page using internal CSS.</p>

<p>Using internal CSS, we only need to write one rule set to change the color of every paragraph
elemnet.</p>

<p>With inline CSS, we’d have to add a style attribute to every single paragraph in my HTML.</p>

</body>

</html>

Learn From The Best Mentors in the Industry!

Automation Testing Masters Program

EXPLORE PROGRAM

External CSS
External CSS is one of the most often used CSS forms for updating, styling, and adjusting the
different styles in a large number of HTML web pages at the same time. There are two ways to
include an external style sheet in an HTML document. One method is to use the <link> tag in the
HTML document head. Another option is to use a combination of external CSS functions and
integrated CSS.

One of the distinguishing characteristics of external CSS is that it can be written in any text editor,
but it must always be saved with the.css extension and must not contain any HTML elements.

We use the external style sheet when we need to make changes to multiple pages. It's ideal for this
circumstance because it allows us to change the appearance of the entire website with just one file
change. It comes in handy while working on large projects or several HTML web pages.

We must define the filename of the CSS sheet with the "mystyle.css" extension within the <link>
element within the <head> section of the HTML page to use external CSS:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href=mystyle.css>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>
mystyle.css

In this file, we can write our complete CSS code for styling the HTML web page.

Example 1:

body {

background-color:powderblue;

.main {

text-align:center;

.sideway {

color:#009900;

font-size:40px;

font-weight:bold;

#change1 {

font-style:bold;

font-size:25px;

}
Example 2:

body {

background-color: lightblue;

h1 {

color: navy;

margin-left: 20px;

Learn 15+ In-Demand Tools and Skills!

Automation Testing Masters Program

EXPLORE PROGRAM

Use of Different Types of CSS

Inline CSS is advantageous since it decreases the number of files that the browser must download
g
before the web page can be shown. The browser loads an HTML file first, then downloads the CSS
file when using external CSS. We only need to download one HTML file instead of two using inline
CSS, which speeds up the process.

Here are a few more advantages of using inline CSS:

Lower the HTTP Request: The main advantage of utilizing Inline CSS is that it requires fewer
HTTP requests, which implies that the page loads faster than when using External CSS.

For Testing Purposes: When working on new projects, many web designers choose to use Inline
CSS because it is easier to scroll up in the source rather than changing the source file. Some
people use it to debug their websites if they run into a problem that can’t be easily fixed. This can
be used in conjunction with CSS's important rule.

Since Internal CSS has a higher priority than Inline CSS in terms of use. There are several benefits,
some of which are listed below:

Cache Problem: Unless they are hacked to hide from certain browsers, internal styles will be read
by all of them. This disables the usage of media=all or @import to hide styles in ancient, clumsy
browsers such as IE4 and NN4.

Pseudo Elements: Inline styles can't be used to style pseudo-elements or classes. Internal style
sheets let us customize the color of an anchor tag's visited, hover, active, and link states.

No Additional Downloads: We don't need any additional downloads to get style information, and
we have fewer HTTP requests.

When a style is applied to a large number of pages, an external style sheet is perfect. We can modify
the look of an entire website by changing one file with an external style sheet. The <link> tag must be
used on each page to link to the style sheet. Here are some of its advantages:

Full Control of Page Structure: CSS allows us to display our web page in accordance with W3C
HTML standards without sacrificing the page's appearance. Google is the most popular search
engine and a key traffic source. Because Google places a low value on well-organized web pages,
many designers overlook them. However, putting a low value on anything can result in a lot of
traffic to a website.

Reduced File Size: We can drastically reduce the file size of our pages by adding the text styling in
a separate file. Furthermore, compared to simple HTML pages, the content-to-code ratio is much
higher, making the page structure easier to read for both programmers and spiders. Instead of
using images, we can use CSS to define the visual impact we wish to apply to them. The space
we save this way can be utilized for spider-friendly text (i.e., keywords), and we'll also reduce the
page's download size.

Properties of CSS

The part about cascading is crucial. Cascading means that styles can inherit and override styles that
have been specified previously.

Internal/Embedded CSS has the highest importance, followed by External CSS, which has the lowest
priority. On a single page, we can declare many style sheets. If multiple style sheets describe styles
for an HTML tag, the order listed below will be used.

Any styles defined in the internal and external style sheets are overridden by Inline styles since
Inline has the highest precedence.

Internal CSS is the second most important option, and it takes precedence over the styles in the
external style sheet.

External style sheets are given the least amount of importance. If no styles are defined in the
inline or internal style sheets, the HTML tags are styled using external style sheet rules.

Customizing Our Website With CSS

Cascading Style Sheets (CSS) is a way to give aesthetic instructions to the back-end code of our
website. It makes it simple to change the appearance of our website. We may quickly and easily
apply CSS to our website using any of the ways above to match the appearance. Website code is the
language that informs our browser exactly how a website should appear and function. HTML
(hypertext markup language) is the most widely used coding language. It is a type of code that
indicates which elements are available on a webpage. According to HTML, CSS is an HTML
extension that specifies particular styling instructions. CSS is used to specify a heading's color or
the font in which our text should be written. CSS allows us to personalize the appearance of our
website and make stylistic judgments across the board. It guarantees that the appearance of our
website is consistent.
Want a Top Software Development Job? Start Here!

Full Stack Development-MEAN

EXPLORE PROGRAM

Conclusion

CSS specifies how a page should appear to the browser, which then renders it in that manner. It is
used to change the color of text and background on a page, remove the underline from links, and
animate images, text, and other HTML elements, among other things, and we can implement all
these features on any web page using different types of CSS based on given circumstances. In the
above article, we have discussed everything about all types of CSS (inline, internal, external CSS) and
its uses with HTML to customize any web page. We hope that this article was able to give you a
thorough knowledge of CSS and its uses and how we can use it to develop structure of any web
page and style it.

If you are interested in learning more about React JS and other related concepts, you can enroll in
Simplilearn’s exclusive Full Stack Web Development Certification Course and accelerate your career
as a software developer. The program comprises a variety of software development courses,
ranging from the fundamentals to advanced topics.

Simplilearn also offers free online skill-up courses in several domains, from data science and
business analytics to software development, AI, and machine learning. You can take up any of these
courses to upgrade your skills and advance your career.

Find our Post Graduate Program in Full Stack Web Development Online Bootcamp in top
cities:

Name Date Place

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Links
Read Discuss Courses

What is a link?

It is a connection from one web resource to another. A link has two ends, An
anchor and direction. The link starts at the “source” anchor and points to the
“destination” anchor, which may be any Web resource such as an image, a
video clip, a sound bite, a program, an HTML document or an element within an
HTML document. You will find many websites or social media platforms ( Like
YouTube, and Instagram ) which link an image to a URL or a text to a URL etc.

This basically means that by using the ‘a’ tag, you can link 1 element of the
code to another element that may/may not be in your code.

HTML Link Syntax

Get Results in Tree Clic

LocationTracker - We Can Help You F
Lost Phone in 3 minutes. Find Your P
Today

GeoFinder Ope

Links are specified in HTML using the “a” tag.

Syntax Explanation:

href : The href attribute is used to specify the destination address

of the link used. "href" stands for Hypertext reference.
Text link : The text link is the visible part of the link.
It is what the viewer clicks on.

Input :

html

<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>

<body>
<p>Click on the following link</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>

</html>

Output :
Internal Links

An internal link is a type of hyperlink whose target or destination is a resource,

such as an image or document, on the same website or domain.

Input:

html

<!DOCTYPE html>
<html>
<h3>Internal Link And External Link Example</h3>

<body>

<p>
<a href="html_contribute.asp/">
GeeksforGeeks Contribute
</a>
It is a link to the contribute page on GeeksforGeeks' website.
</p>

<p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
It is a link to the GeeksforGeeks website on the World Wide Web.
</p>
</body>

</html>
Output :

Changing Link Colours in HTML

Different types of links appear in different formats such as:

1. An unvisited link appears underlined and blue in colour by default.

2. A visited link appears underlined and purple in colour by default.
3. An active link appears underlined and red in colour by default.

The appearance of links can be changed by using CSS.

Input :

html

<!DOCTYPE html>
<html>

<head>
<style>
a:link {
color: red;
background-color: transparent;
}

a:visited {
color: green;
background-color: transparent;
}

a:hover {
color: blue;
background-color: transparent;
}

a:active {
color: yellow;
background-color: transparent;
}
</style>
</head>

<body>
<p>Changing the default colors of links</p>
<p>Visited Link</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
<p>Link</p>
<a href="https://facebook.com">
facebook
</a>
<p>hovering effect</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
</body>

</html>

Output:
The Target Attribute in Links

The target attribute is used to specify the location where the linked document
is opened. The various options that can be used in the target attribute are listed
below in the table:

Input:

html

<!DOCTYPE html>
<html>

<body>
<h3>Various options available in the Target Attribute</h3>

<p>If you set the target attribute to "_blank",

the link will open in a new browser window or tab.
</p>
<a href=
"https://www.geeksforgeeks.org"
target="_blank">
GeeksforGeeks
</a>

<p>If you set the target attribute to "_self",

the link will open in the same window or tab.
</p>
<a href=
"https://www.geeksforgeeks.org"
target="_self">
GeeksforGeeks
</a>

<p>If you set the target attribute to "_top",

the link will open in the full body of the window.
</p>
<a href=
"https://www.geeksforgeeks.org"
target="_top">
GeeksforGeeks
</a>

<p>If you set the target attribute to "_parent",

the link will open in the parent frame.
</p>
<a href=
"https://www.geeksforgeeks.org"
target="_parent">
GeeksforGeeks
</a>
</body>

</html>

Output:
Using Image as a Link in HTML

An image can be used to create a link to a specified URL. When the viewer
clicks on the link, it redirects them to another page.

The code is <a href=”url”>

<img src=”file address (on device or on web)” alt=”_”

style=”width:__ ; height:__ ; border:__”>

</a>

Note: img src stands for image source ( i.e URL or file address )

Input:

html

<!DOCTYPE html>
<html>

<body>
<h3>Using Image as a link</h3>
<p>Click on the image to visit GeeksforGeeks homepage.</p>
<a href="https://www.geeksforgeeks.org">
<img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
alt="GeeksforGeeks"
style="width:80px;height:80px;border:0">
</a>
</body>
</html>

Output:

Creating a Bookmark Link for a Webpage

A bookmark is a link that can be used to jump to specified portion of a

webpage.Bookmarks are very useful if a webpage is quite long.

Steps to create a bookmark are:

1. Using the id attribute, create a bookmark.

2. Add the specified portion of the webpage to the bookmark.

Input :

html

<!DOCTYPE html>
<html>

<body>

<p><a href="#T11">Jump to Topic 11</a></p>

<p><a href="#T17">Jump to Topic 17</a></p>
<p><a href="#T20">Jump to Topic 20</a></p>

<h2>Topic 1</h2>
<p>paragraph 1
.....</p>

<h2>Topic 2</h2>
<p>paragraph 1
.....</p>

<h2>Topic 3</h2>
<p>paragraph 1
.....</p>

<h2>Topic 4</h2>
<p>paragraph 1
.....</p>

<h2>Topic 5</h2>
<p>paragraph 1
.....</p>
<h2>Topic 6</h2>
<p>paragraph 1
.....</p>

<h2>Topic 7</h2>
<p>paragraph 1
.....</p>

<h2>Topic 8</h2>
<p>paragraph 1
.....</p>

<h2>Topic 9</h2>
<p>paragraph 1
.....</p>

<h2>Topic 10</h2>
<p>paragraph 1
.....</p>

<h2 id="T11">Topic 11</h2>

<p>paragraph 1
.....</p>

<h2>Topic 12</h2>
<p>paragraph 1
.....</p>

<h2>Topic 13</h2>
<p>paragraph 1
.....</p>

<h2>Topic 14</h2>
<p>paragraph 1
.....</p>

<h2>Topic 15</h2>
<p>paragraph 1
.....</p>

<h2>Topic 16</h2>
<p>paragraph 1
.....</p>

<h2 id="T17">Topic 17</h2>

<p>paragraph 1
.....</p>

<h2>Topic 18</h2>
<p>paragraph 1
.....</p>

<h2>Topic 19</h2>
<p>paragraph 1
.....</p>

<h2 id="T20">Topic 20</h2>

<p>paragraph 1
.....</p>
</body>

</html>

Output:

Creating a download link in HTML

A text link of a pdf, doc or zip file can be created to make it downloadable.

Input :

html

<!DOCTYPE html>
<html>

<h3>Creating a download link</h3>

<body>
<a href="GeeksforGeeks.pdf">
Download PDF File
</a>
</body>

</html>

Output: :

Supported Browser:

Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Brave

Last Updated : 07 Jul, 2023 72

Previous Next

HTML Quotations HTML Images

Similar Reads
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Images
Read Discuss Courses

In this article, we will know the HTML Image, how to add the image in HTML,
along with knowing its implementation & usage through the examples. In
earlier times, the web pages only contains textual contents, which made them
appear quite boring and uninteresting. Fortunately, it wasn’t long enough that
the ability to embed images on web pages was added for users. In this article,
we will know how to add images to the web page that will make the website
attractive & various methods to insert the images.

There are 2 ways to insert the images into a webpage:

By providing a full path or address (URL) to access an internet file.

By providing the file path relative to the location of the current web page
file.

We will first discuss inserting the image to the webpage & simultaneously, we
will understand both the above approaches.

Adding images on a webpage: The <img> tag is used to add or embed the
images to a webpage/website. The “img” tag is an empty tag, which means it
can contain only a list of attributes and it has no closing tag. The addition of
the images improves the quality along with enhancing the design structure,
appearance of the webpage. Nowadays, a website does not directly add
images to a web page, as the images are linked to web pages by using the
<img> tag which holds space for the image.
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

Syntax:

<img src="url" alt="some_text" width="" height="">

Attribute: The <img> tag has following attributes:

src: It is used to specify the path to the image.

alt: It is used to specify an alternate text for the image. It is useful as it
informs the user about what the image means and also due to any network
issue if the image cannot be displayed then this alternate text will be
displayed.
crossorigin: It is used to import images from third-party sites that allow
cross-origin access to be used with canvas.
height: It is used to specify the height of the image.
width: It is used to specify the width of the image.
ismap: It is used to specify an image as a server-side image map.
loading: It is used to specify whether a browser should defer the loading of
images until some conditions are met or load an image immediately.
longdesc: It is used to specify a URL to a detailed description of an image.
referrerpolicy: It is used to specify which referrer information to use when
fetching an image i.e. no-referrer, no-referrer-when-downgrade, origin,
origin-when-cross-origin, unsafe-url.
sizes: It is used to specify image sizes for different page layouts.
srcset: It is used to specify a list of image files to use in different situations.
usemap: It is used to specify an image as a client-side image map.
src: The src stands for source. Every image has an src attribute which tells the
browser where to find the image you want to display. The URL of the image
provided points to the location where the image is stored. When the webpage
loads for the first time, then the browser gets the image from a web server and
inserts it into the page. If the image is not spotted by the browser then users
will get a broken link icon. It might be possible if the file path is wrong or the
image got deleted from that location.

Example 1: This simple example illustrates the use of the <img> tag in HTML
that is used to embed the image into the webpage.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Welcome To GFG</title>
</head>

<body>
<h2>GeeksforGeeks</h2>
<p>This is the demo of <img> tag.</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png
alt="GFG image" />
</body>

</html>

Output:
Adding GFG logo using tag

Example 2: The example illustrates the use of the src attribute in the <img>
tag.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Inserting an image using "img" tag</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.pn
</body>
</html>

Output:
Use of src attribute

alt: If the image cannot be displayed then the alt attribute acts as an
alternative description for the image. The value of the alt attribute is a user-
defined text. It generally happens when the user, for some reason, cannot view
it due to a slow internet connection or an error in the src attribute, or if the user
uses a screen reader.

Example 3: The example illustrates the use of the alt attribute in the <img>
tag.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Alt Attribute Example</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.pn
alt="This is GeeksforGeeks logo" />
</body>

</html>
Output:

Adding image name in the alt attribute

Setting width and height of Image: The width and height attributes are used
to specify the height and width of an image. The attribute values are specified
in pixels by default. The width and height attributes are always declared in
pixels. Please refer to the How to set the width and height of an image using
HTML? article for further details.

Example 4: The example illustrates the use of the width & height attribute in
the <img> tag.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Setting width and height of image</title>
</head>

<body>

<p>inserted image using<img> tag:</p>

</html>

Output:

Setting the width & height of the image

Adding titles to Image: Along with the images, titles can also be added to
images to provide further information related to the inserted image. For
inserting a title, the title attribute is used. Please refer to the HTML | title
Attribute article for further details.

Example 5: The example illustrates the use of the title attribute in the <img>
tag.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Inserting an image using "img" tag</title>
</head>

</html>

Output:

Adding the title to the image

Setting style to the Image: In this example, we are using the border property
to decorate the image. By default, every picture has a border around it. By
using the border attribute, the thickness of the border can be changed. A
thickness of “0” means that there will be no border around the picture. Please
refer to the HTML | <img> border Attribute for further details.

Example 6: This example illustrates the use of style property inside the <img>
tag in HTML.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Setting border to image</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.pn
alt="GeeksforGeeks logo"
width="200"
height="200"
border="5" />
</body>
</html>

Output:

Setting the border of the image

Aligning an Image: By default, an image is aligned on the left side of the

page, but it can be aligned to the centre or right using the align attribute.
Please refer to the HTML | <img> align Attribute for further details.

Example 7: This example illustrates the use of align property in the <img> tag
whose value is set to right.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Aligning an image</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.pn
alt="GeeksforGeeks logo"
align="right" />
</body>

</html>

Output:

Aligning the image to the right

Adding Image as a Link: An image can work as a link with a URL embedded in
it. It can be done by using the “img” tag inside an “a” tag. We need to specify
the file path in order to render the image on the webpage. File paths are used
to link external resources such as images, videos, style sheets, JavaScript,
displaying other web pages, etc. To insert a file on a web page its source must
be known.

File paths are of two types:

Absolute File Paths: It always contains the root element along with the
complete directory list required to locate the file.
Relative File Paths: It is the hierarchical path representation that locates the
file or folder on a file system beginning from the current directory.
Example 8: This example illustrates the use of link property in the <img> tag.
Here, we have used the absolute path link in order to provide the link to the
image. Please refer to the HTML | File Paths & How to turn an Image into a
Link in HTML? article for further details.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Adding image as link</title>
</head>

<body>
<h3>GeekforGeeks</h3>
<p>inserted image using <img> tag:</p>
<a href="https://ide.geeksforgeeks.org/tryit.php">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.pn
alt="GeeksforGeeks logo" />
</a>
</body>

</html>

Output:
Adding the image as a link

Adding animated Image: Animated images in .gif format can also be added
using the “img” tag.

Example 9: This example explains the addition of an image in the GIF format in
HTML.

HTML

<!DOCTYPE html>
<html>

<body>
<h3>Adding a gif file on a webpage</h3>
<img src="smiley.gif"
alt="smiley"
style="width: 200px; height: 200px" />
</body>

</html>
Output:

Adding an image in GIF format

Using Image as a Background: An image can be used as a background for a

webpage. For this, we use the background-image property of CSS. Please refer
to the HTML | <body> background Attribute for further details.

Example 10: This example illustrates the use of body background property in
the <img> tag.

HTML

<!DOCTYPE html>
<html>

<body style="background-image: url (

'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.pn
);">
<h2>Image As a Background</h2>
<p>
In this example we have specified a
background for a webpage using an image.
</p>
</body>

</html>

Output:
Adding the image as a background

Common Image Format: Here is the commonly used image file format that is
supported by all the browsers.

S.No. Abbreviation File Type Extension

1. PNG Portable Network Graphics. .png

Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,

2. JPEG.
image. .pjp

3. SVG Scalable Vector Graphics. .svg.

4. GIF Graphics Interchange Format. .gif

5. ICO Microsoft Icon. .ico, .cur

Animated Portable Network

6. APNG .apng
Graphics.

Supported Browsers:

Google Chrome 93.0

Internet Explorer 11.0
Microsoft Edge 93.0
Firefox 92.0
Opera 78.0
Safari 14.1

Last Updated : 30 Jun, 2023 60

Previous Next

HTML Links HTML Favicon

Similar Reads
HTML DOM images Collection Property Lazy Loading images in HTML

How to display Base64 images in HTML ? How to Show Images on Click using
HTML ?

HTML Canvas Images How to display images in Angular2 ?

How to make the images bigger when How to compare two images using Image
clicked? comparison slider?

How to create a div that contains How to align images in Bootstrap 4 ?

multiple fixed-size images ?

Complete Tutorials
HTML Tutorial JavaScript Project Ideas with Source
Code

Onsen UI React Material UI

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Tables
Read Discuss Courses

The HTML Table is an arrangement of data in rows and columns in tabular

format. Tables are useful for various tasks such as presenting text information
and numerical data. A table is a useful tool for quickly and easily finding
connections between different types of data. Tables are also used to create
databases.

Table Tags

HTML Tags Descriptions

Defines the structure for organizing data

<table>
in rows and columns within a web page.

Represents a row within an HTML table,

<tr>
containing individual cells.

Shows a table header cell that typically

<th>
holds titles or headings.

Represents a standard data cell, holding

<td>
content or data.

Provides a title or description for the

<caption>
entire table.
HTML Tags Descriptions

Defines the header section of a table,

<thead>
often containing column labels.

Represents the main content area of a

<tbody> table, separating it from the header or
footer.

Specifies the footer section of a table,

<tfoot>
typically holding summaries or totals.

Defines attributes for table columns that

<col> can be applied to multiple columns at
once.

Groups together a set of columns in a

<colgroup> table to which you can apply formatting
or properties collectively.

Table of Content
Defining Tables in HTML
Adding a border to an HTML Table
Adding Collapsed Borders in an HTML Table
Adding Cell Padding in an HTML Table
Adding Left Align Headings in an HTML Table
Adding Border Spacing in an HTML Table
Adding Cells that Span Many Columns in HTML Tables
Adding Cells that span many rows in HTML Tables
Adding a Caption in an HTML Table
Adding a Background Colour to the Table
Creating Nested Tables
Defining Tables in HTML
An HTML table is defined with the “table” tag. Each table row is defined with
the “tr” tag. A table header is defined with the “th” tag. By default, table
headings are bold and centered. A table data/cell is defined with the “td” tag.

Example 1: In this example, we are creating a simple table in HTML using a

table tag.

💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

HTML

<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>

</html>

Output:

HTML Table

Example 2: This example explains the use of the HTML Table.

HTML

<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>

</html>

Output:

Simple HTML Table

Adding a border to an HTML Table

A border is set using the CSS border property. If you do not specify a border for
the table, it will be displayed without borders.

Example: This example explains the addition of the border to the HTML Table.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>

</html>

Output:

HTML Table with border

Adding Collapsed Borders in an HTML Table

For borders to collapse into one border, add the CSS border-collapse property.

Example: This example describes the addition of Collapsed Borders in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>

</html>

Output:

HTML Table with Collapsed Borders

Adding Cell Padding in an HTML Table

Cell padding specifies the space between the cell content and its borders. If we
do not specify a padding, the table cells will be displayed without padding.

Example: This example describes the addition of Table cell padding in HTML.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}
</style>
</head>

</html>
Output:

Adding Table cell padding

Adding Left Align Headings in an HTML Table

By default, the table headings are bold and centered. To left-align the table
headings, we must use the CSS text-align property.

Example: This example explains the text-align property where the text is
aligned to the left.

HTML

<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}

th {
text-align: left;
}
</style>
</head>

</html>

Output:
text-align Property

Adding Border Spacing in an HTML Table

Border spacing specifies the space between the cells. To set the border-
spacing for a table, we must use the CSS border-spacing property.

Example: This example explains the border space property to make the space
between the Table cells.

HTML

<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
}

table {
border-spacing: 5px;
}
</style>
</head>

</html>

Output:

Border Spacing Property

Adding Cells that Span Many Columns in HTML Tables

To make a cell span more than one column, we must use the colspan attribute.

Example: This example describes the use of the colspan attribute in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>

<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>

</html>

Output:
colspan attribute

Adding Cells that span many rows in HTML Tables

To make a cell span more than one row, we must use the rowspan attribute.

Example: This example describes the use of the rowspan attribute in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>

<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Vikas Rawat</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9125577854</td>
</tr>
<tr>
<td>8565557785</td>
</tr>
</table>
</body>

</html>

Output:

Use of rowspan attribute

Adding a Caption in an HTML Table

To add a caption to a table, we must use the “caption” tag.

Example: This example describes the HTML Table caption by specifying the
CSS properties for setting its width.

HTML

<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}

th {
text-align: left;
}
</style>
</head>

<body>
<table style="width:100%">
<caption>DETAILS</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>

</html>
Output:

Adding the caption using the tag

Adding a Background Colour to the Table

A color can be added as a background in an HTML table using the
“background-color” option.

Example: This example describes the addition of the Table background color in
HTML.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
text-align: left;
}

table#t01 {
width: 100%;
background-color: #f2f2d1;
}
</style>
</head>

<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
<br />
<br />
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>

</html>

Output:

Adding Table Background color using CSS properties

Creating Nested Tables

Nesting tables simply means making a Table inside another Table. Nesting
tables can lead to complex tables layouts, which are visually interesting and
have the potential of introducing errors.

Example: This example describes the Nested of HTML Table.

HTML

<!DOCTYPE html>
<html>

<body>
<table border=5 bordercolor=black>
<tr>
<td> First Column of Outer Table </td>
<td>
<table border=5 bordercolor=grey>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>

Output:

Nested HTML Table

Supported Browsers
Google Chrome 15
Edge 12 and above
Firefox 1 and above
Opera 14 and above
Safari 6 and above
HTML is the foundation of webpages, is used for webpage development by
structuring websites and web apps. You can learn HTML from the ground up by
following this HTML Tutorial and HTML Examples.

Last Updated : 20 Dec, 2023 87

Previous Next

HTML Description Lists HTML thead Tag

Similar Reads
How to create nest tables within tables in How to initialize multiple tables using
HTML ? jQuery DataTables plugin ?

How to use tables to structure forms ? HTML Course | Structure of an HTML

Document

HTML Course Basics of HTML HTML | DOM HTML Object

HTML | <html> xmlns Attribute What is the difference between <html

lang="en'> and <html lang="en-US'> ?

Inline HTML Helper - HTML Helpers in How to return HTML or build HTML using
ASP.NET MVC JavaScript ?

Complete Tutorials
HTML Tutorial JavaScript Project Ideas with Source
Code

Onsen UI React Material UI

NuxtJS
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Iframes
Read Discuss Courses

In this article, we will know HTML Iframes, their implementation through the
examples. The iframe in HTML stands for Inline Frame. The ” iframe ” tag
defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders. An inline frame
is used to embed another document within the current HTML document. The
HTML iframe name attribute is used to specify a reference for an <Iframe>
element. The name attribute is also used as a reference to the elements in
JavaScript. The iframe is basically used to show a webpage inside the current
web page. The ‘ src ‘ attribute is used to specify the URL of the document that
occupies the iframe.

Syntax:

<iframe src="URL" title="description"></iframe>

Attributes value: It contains a single value URL that specifies the URL of the
document that is embedded in the iframe. There are two types of URL links
which are listed below:

Absolute URL: It points to another webpage.

Relative URL: It points to other files of the same web page.

Example: This example illustrates the use of an iframe tag which is used to
display a webpage inside the current web page.
💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

HTML

<!DOCTYPE html>
<html>

<head>
<title>HTML iframe Tag</title>
</head>

<body style="text-align: center">

<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>
<iframe src=
"https://ide.geeksforgeeks.org/index.php"
height="200"
width="400">

</iframe>
</body>

</html>

Output:
HTML iframe tag

Accepted Attribute: The following attributes can be used with the <iframe>
tag in HTML.

HTML <iframe> allow Attribute

HTML <iframe> allowfullscreen attribute
HTML <iframe> allowpaymentrequest attribute
HTML <iframe> height attribute
HTML <iframe> width attribute
HTML <iframe> loading attribute
HTML <iframe> scrolling attribute
HTML <iframe> name attribute
HTML <iframe> referrerpolicy attribute
HTML <iframe> sandbox attribute
HTML <iframe> src attribute
HTML <iframe> srcdoc attribute

Below few of the attributes examples are given:

Height and Width: The height and width attributes are used to specify the size
of the iframe. The attribute values are specified in pixels by default, but they
can also be specified in percentages like ” 80% “.

Example: This example describes the HTML iframe Tag by setting the width &
height of the iframe.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>

<p>Content goes here</p>

</html>

Output:
Setting the width & height of HTML iframe

Removing Border: By default, iframe has a border around it. To remove the
border, we must use the style attribute and use the CSS border property.

Example: This example describes the HTML iframe Tag where the border
property is set as none.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>
<p>Content goes here</p>

</html>
Output:

HTML iframe with no border

Border Style: Changing the size, style, and color of the Iframe’s border:

Example: This example describes the HTML iframe Tag by specifying the
border style.

HTML

<!DOCTYPE html>
<html>

<body>

<p>Content goes here</p>

Output:

HTML iframe with border style

Link: An iframe can be used as the target frame for a link. The target attribute
of the link must refer to the name attribute of the iframe.

Example: This example describes the HTML iframe Tag by using the target
frame for a link.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>

<p>Click the link text</p>

<p><a href="https://ide.geeksforgeeks.org/tryit.php"
target="iframe_a">
GeeksforGeeks IDE
</a>
</p>

</body>

</html>

Output:

HTML iframe with a link tag

Supported Browsers:

Google Chrome version 1 and above

Internet Explorer
Firefox
Microsoft Edge 12 and above
Opera
Safari

Last Updated : 30 Jun, 2023 45

Previous Next

HTML Id Attributes HTML File Paths

Similar Reads
Alternative to iFrames in HTML5 HTML Course | Structure of an HTML
Document

HTML Course Basics of HTML HTML | DOM HTML Object

HTML | <html> xmlns Attribute What is the difference between <html

lang="en'> and <html lang="en-US'> ?

Inline HTML Helper - HTML Helpers in How to return HTML or build HTML using
ASP.NET MVC JavaScript ?

How to convert html.slim to html.erb ? How to display HTML tags as plain text in
HTML ?

Complete Tutorials
HTML Tutorial JavaScript Project Ideas with Source
Code

Onsen UI React Material UI

Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Lists
Read Discuss Courses

In this article, we will know the HTML List, along with understanding its types,
and various ways to implement them, through the example.

A list is a record of short pieces of related information or used to display the

data or any information on web pages in the ordered or unordered form. For
instance, to purchase the items, we need to prepare a list that can either be
ordered or unordered list which helps us to organize the data & easy to find the
item. Please refer to the HTML <li> type Attribute article for the various types
of attributes that can be used with the ordered & unordered list.

Example: The below example illustrates the use of the unordered & ordered
list in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
<title>GeeksforGeeks</title>
</head>

<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>

</html>

Output:

Get Results in Tree Clic

Quickly Search For a Lost Phone by
Number. Take Advantage of Advance
Technology. Today 1$

GeoFinder Ope

HTML List

Supported Tags: These tags are used in HTML listing.

HTML <ul> Tag

HTML <ol> Tag
HTML <dl> Tag

The HTML Unordered List: An unordered list starts with the “ul” tag. Each list
item starts with the “li” tag. The list items are marked with bullets i.e small
black circles by default.

Syntax:

<ul> list of items </ul>

Attribute: This tag contains two attributes which are listed below:

compact: It will render the list smaller.

type: It specifies which kind of marker is used in the list.

Note: The <ul> attributes are not supported by HTML5.

Example: This example describes the unordered list.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>

</html>

Output:
Unordered List

HTML unordered list has various list item markers:

Example 1: The Disc can be used to set the list item marker to a bullet i.e
default.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>Unordered List with Disc Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type:disc">
<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>

</html>

Output:

Unordered List with disc item maker

Example 2: The Circle can be used to set the list item marker to a circle.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>Unordered List with Circle Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: circle">

<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>

Output:

Unordered List with circle item maker

Example 3: The Square can be used to set the list item marker to a square.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>Unordered List with Square Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: square">

<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>

</html>
Output:

Unordered List with square item maker

Example 4: It’s none that can be used to set the list item marker with no mark.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>Unordered List with No Bullets</h2>

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: none">

<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>

</html>

Output:
Unordered List with none item maker

Example: Nested Unordered List, It is used to nest the list items ie., a list inside
another list.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>Nested Unordered List</h2>

<p>GeeksforGeeks courses List:</p>

<ul>
<li>DSA</li>
<ul>
<li>Array</li>
<li>Linked List</li>
<li>stack</li>
<li>Queue</li>
</ul>
<li>Web Technologies</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<li>Aptitude</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>

Output:

Nested Unordered List

HTML Ordered List: An ordered list starts with the “ol” tag. Each list item
starts with the “li” tag. The list items are marked with numbers by default.

Syntax:

Attributes:

compact: It defines the list should be compacted (compact attribute is not

supported in HTML5. Use CSS instead.).
reversed: It defines that the order will be descending.
start: It defines from which number or alphabet the order will start.
type: It defines which type(1, A, a, I, and i) of the order you want in your list
of numeric, alphabetic, or roman numbers.

Example: This example illustrates the use of the reverse attribute, control list
counting & type attribute.

HTML

<!DOCTYPE html>
<html>

<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>HTML ol tag</h3>

<p>reversed attribute</p>

<p>start attribute</p>

<p>type attribute</p>

</html>

Output:

Ordered List with different list style

HTML ordered list has various list item markers: The type attribute of the
<ol> tag defines the type of the list item marker.

Example 1: The list items will be numbered with numbers i.e default.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>

</html>

Output:

Ordered List with numeric item maker

Example 2: Type=”A”, this list of items will be numbered with uppercase

letters.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>

</html>

Output:
Ordered List with capital alphabetic item maker

Example 3: Type=”a”, this list of items will be numbered with lowercase

letters.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>

</html>

Output:

Ordered List with small alphabetic item maker

Example 4: Type=”I”, this list of items will be numbered with uppercase roman
numbers.

HTML
<!DOCTYPE html>
<html>

<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>

</html>

Output:

Ordered List with uppercase roman numbers

Example 5: Type=”i”, this list of items will be numbered with lowercase roman
numbers.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>

</html>
Output:

Ordered List with lowercase roman numbers

Example 6: Nested ordered list, a nested ordered list is a list that has a list
inside another list.

HTML

<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>Nested Ordered List</h2>
<ol>
<li>Coffee</li>
<li> Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>

</html>

Output:
Nested Ordered List

There is another attribute that is specifically defined for a list item, which is
used in with the “li” tag and that is the value attribute. Below is a little
description of the value attribute specifically used with the “li” tag. Though it is
used with various other HTML elements.

Value attribute:

The value attribute may be used on an individual <li> element within an

ordered list to change its value within the list. You define the value of a list
item and the number of any list item appearing after it will be recalculated
accordingly.

Example: This example illustrates the use of the “value attribute” used on the
<li> element.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<ol>
<li>Item One</li>
<li value="10">Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ol>
</body>
</html>
Output:

<img
src="https://media.geeksforgeeks.org/wp-
content/uploads/20220522105327/GFG20220522105224.jpg"
alt="Use of "value
attribute" on
”
srcset=”https://media.geeksforgeeks.org/wp-
content/uploads/20220522105327/GFG20220522105224.jpg,
” sizes=”100vw”
width=”237″>
Value attribute
HTML Description List: A description list is a list of terms, with a description of
each term. The <dl> tag defines the description list, the <dt> tag defines the
term name, and the <dd> tag describes each term. Please refer to the How to
add description list of an element using HTML? article for further details.

Syntax:

<dl> Contents... </dl>

Example: This example describes the HTML Description List.

HTML

<!DOCTYPE html>
<html>

<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>

Output:

Description List

Supported Browser:

Google Chrome 94.0 & above

Microsoft Edge 93.0
Firefox 92.0 & above
Opera 78.0
Safari 14.1
IE 11.0

Whether you're preparing for your first job interview or aiming to upskill in this
ever-evolving tech landscape, GeeksforGeeks Courses are your key to success.
We provide top-quality content at affordable prices, all geared towards
accelerating your growth in a time-bound manner. Join the millions we've
already empowered, and we're here to do the same for you. Don't miss out -
check it out now!

Last Updated : 25 May, 2022 59

Previous Next

HTML5 Video HTML Ordered Lists

Similar Reads
Free HTML Course Tags Attributes Global Attributes Event Attributes HTML DOM DOM Audio/Video HTM

HTML Block and Inline Elements

Read Discuss Courses

In this article, we will know the HTML Block element & Inline element, along
with understanding the implementation through the example. Every HTML
documents that render the web content, will depend on the element type i.e,
block or inline which are default display values. We will understand both these
concepts through the examples.

Example: This example illustrates the use of the block-level element & inline
element.

HTML

<!DOCTYPE html>
<html>

<body>
<div>GeeksforGeeks</div>
Checkout the GeeksforGeeks
<a href="https://www.geeksforgeeks.org/"
alt="GeeksforGeeks">
official</a> website for the articles on various courses.
</body>

</html>

Output:
Block & Inline Elements

In the above example, we have used the <div> tag that always starts in a new
line & captures the full width available. We have used the inline element
anchor tag <a>that is used to provide a link to a text. The inline element
doesn’t start in a new line & captures only the space around the element.

💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

Block Level Elements: A block-level element always starts on a new line and
stretches out to the left and right as far as it can i.e, it occupies the whole
horizontal space of its parent element & the height is equal to the content’s
height.

Supported tags:
HTML <address> Tag
HTML <blockquote> Tag
HTML <dd> Tag
HTML <Div> Tag
HTML <dl> Tag
HTML <dt> Tag
HTML <canvas> Tag
HTML <form> Tag
HTML <Heading> Tag
HTML <hr> Tag
HTML <li> Tag
HTML <main> Tag
HTML <nav> Tag
HTML <noscript> Tag
HTML <ol> Tag
HTML <pre> Tag
HTML <section> Tag
HTML <tfoot> Tag
HTML <ul> Tag
HTML Tables
HTML Paragraphs
HTML5 <Video> Tag
HTML5 <aside> Tag
HTML5 <article> Tag
HTML5 <figcaption> Tag
HTML5 <fieldset> Tag
HTML5 <figure> Tag
HTML5 <footer> Tag
HTML 5 <header> Tag

div element: The <div> element is used as a container for other HTML
elements. It has no required attributes. Style, class, and id are the commonly
used attributes.

Syntax:
<div>GFG</div>

Example: Below code illustrates the implementation of <div> tag.

HTML

<!DOCTYPE html>
<html>
<title>Block-level Element</title>

<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>GeeksforGeeks is a science portal for geeks.</h3>
<h3>
You can give reviews as well as
contribute posts on this portal.
</h3>
</div>
</body>

</html>

Output:

Block Element

Inline Elements: An inline element is the opposite of the block-level element. It

does not start on a new line and takes up only the necessary width ie., it only
occupies the space bounded by the tags defining the HTML element, instead of
breaking the flow of the content.

Supported tags:

span element: The <span> tag is used as a container for text. It has no
required attributes. Style, class, and id are the commonly used attributes.
Syntax:

Example: Below code illustrates the implementation of <span> tag.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: center;
}

h1 {
color: green;
}
</style>
</head>
<body>

<h1>Geeks
<span style="color: red"> for</span>
Geeks
</h1>
</body>

</html>

Output:

Inline Element

Supported Browsers:

Google Chrome 93.0

Mozilla Firefox 91.0
Microsoft Edge 93.0
IE 11.0
Safari 14.1
Opera 78.0

Last Updated : 06 Dec, 2022 38

Previous Next

HTML | form Attribute HTML Class Attribute

Similar Reads
Difference between block elements and How to prevent inline-block divs from
inline elements wrapping ?

Inline HTML Helper - HTML Helpers in Which inline attribute is used to specify
ASP.NET MVC the styling of specific elements in HTML ?

How to create a gradient navbar using How to escape everything in a block in

HTML and Inline CSS ? HTML ?

How to create Inline amp-addthis in How to include inline JavaScript in HAML

Google AMP ? ?

How to create an inline frame using How to make a Inline Button using
HTML5 ? jQuery Mobile ?

Complete Tutorials
School Guide CBSE Class 10 Syllabus Maths Notes Class 10 Science Notes Class 10 History Notes Class 10 G

HTML Forms
Read Discuss Courses

HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. It is a combination of Hypertext and Markup
language. HTML uses predefined tags and elements that tell the browser how
to properly display the content on the screen, and form is one of them. So, in
this article, we will learn what is exactly HTML form, what are the elements of
forms and how can we use HTML form in our webpage.

What is HTML <form>?

<form> is an HTML element to collect input data containing interactive

controls. It provides facilities to input text, numbers, values, email, password,
and control fields such as checkboxes, radio buttons, submit buttons, etc., or in
other words, form is a container that contains input elements like text, email,
number, radio buttons, checkboxes, submit buttons, etc. It also :

Facilitates user input collection through various elements.

Utilizes <form> tags to structure input elements.
Defines actions for data submission upon form completion.
Supports client-side validation for enhanced user experience.

Syntax:

Form elements

These are the following HTML <form> elements:

💡 Spotlight

7 Best Sites For Free Web Hosting

Free Web Hosting Building Website Domain Purchase

<label>: It defines label for <form> elements.

<input>: It is used to get input data from the form in various types such as
text, password, email, etc by changing its type.
<button>: It defines a clickable button to control other elements or execute
a functionality.
<select>: It is used to create a drop-down list.
<textarea>: It is used to get input long text content.
<fieldset>: It is used to draw a box around other form elements and group
the related data.
<legend>: It defines a caption for fieldset elements.
<datalist>: It is used to specify pre-defined list options for input controls.
<output>: It displays the output of performed calculations.
<option>: It is used to define options in a drop-down list.
<optgroup>: It is used to define group-related options in a drop-down list.

Textbox in HTML Form

In an HTML form, we use the <input> tag by assigning type attribute value to
text to input single line input. To define type attribute see the below syntax.

Tip: The default value of the type attribute is “text“.

Syntax:

<input type="text" />

// Or shorthand for "text" type:

Password in an HTML Form

We can change the type value text to password to get the input password

Example: This example shows the type password in html form.We can see the
difference between type text and type password. The username will be visible
but the password will not be visible.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
line-height: 1.8;
min-height: 100vh;
background: #ffffff;
flex-direction: column;
}

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1 {
text-align: center;
color: green;
}

input {
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome To GFG</h1>
<form>

<p>
<label>Username :
<input type="text" /></label>
</p>

<p>
<label>Password :
<input type="password" /></label>
</p>

<p>
<button type="submit">Submit</button>
</p>

</form>
</div>
</body>

</html>

Output:
Output

Radio Button in an HTML Form

To create a radio button, we use the <input> tag following by radio type to
provide users to choose a limited number of choices. The value attribute
defines the unique value associated with each radio button. The value is not
shown to the user, but is the value that is sent to the server on “submit” to
identify which radio button that was selected.

Syntax:

<input type="radio" name="radio_button_name" value="radio_button_value"

Note: The radio button must have shared the same name to be treated as a
group.

Example: In this example, we will create a radio button to choose your gender.

HTML

<!DOCTYPE html>
<html>

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1,
h3 {
text-align: center;
color: green;
}

input {
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome To GFG</h1>
<h3>Choose Your Gender</h3>
<form>
<label>
Male
<input type="radio" '
name="gender" value="male" />
</label>
<label>
Female
<input type="radio"
name="gender" value="female" />
</label>
</form>
</div>
</body>

</html>

Output:

Output

Checkbox in an HTML Form

To create a checkbox in an HTML form, we use the <input> tag followed by the
input type checkbox. It is a square box to tick to activate this. It used to choose
more options at a time.

Syntax:

<input type="checkbox" name="select_box_name" value="select_box_value"

/>
Note: the “name” and “value” attributes are used to send the checkbox data to
the server.

Example: In this example, we use checkboxes to select language.

HTML

<!DOCTYPE html>
<html>

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1,
h3 {
text-align: center;
color: green;
}
input {
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome To GFG</h1>
<h3>Choose Language</h3>
<form>
<ul style="list-style-type:none;">
<li><input type="checkbox"
name="language" value="hindi" />
Hindi
</li>
<li><input type="checkbox"
name="language" value="english" />
English
</li>
<li><input type="checkbox"
name="language" value="sanskrite" />
Sanskrit
</li>
</ul>
</form>
</div>
</body>

</html>

Output:
Output

Combobox in an HTML Form

Combobox is used to create a drop-down menu in your form which contains

multiple options. So, to create a Combobox in an HTML form, we use the
<select> tag with <option> tag. It is also known as a drop-down menu.

Syntax:

<select name="select_box_name">
<option value="value1">option1</option>
<option value="value2">option2</option>
<option value="value3">option3</option>
</select>

Note: the “name” and “value” attributes are used to send the Combobox data
to the server.

Example: In this example, we will create a dropdown menu to select

Nationality.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
line-height: 1.8;
min-height: 100vh;
background: #ffffff;
flex-direction: column;
}

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1,
h3 {
text-align: center;
color: green;
}

input {
padding: 10px;
}

/* for giving padding to options */

select {
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome To GFG</h1>
<h3>Choose Your Nationality</h3>
<form>
<select name="language">
<option value="indian">
Indian
</option>
<option value="nepali">
Nepali
</option>
<option value="others">
Others
</option>
</select>
</form>
</div>
</body>

</html>

Output:

Output

Submit button in an HTML Form

In the HTML form, submit button is used to submit the details of the form to
the form handler. A form handler is a file on the server with a script that is
used to process input data.
Syntax:

<button type="submit">submit</button>

Example: In this example, we will create a submit button.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
body {
margin-left: 50px;
font-family: Arial, sans-serif;
line-height: 1.8;
min-height: 100vh;
background: #ffffff;
flex-direction: column;
}

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1,
h3 {
text-align: center;
color: green;
}

input,
button {
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome To GFG</h1>
<form onsubmit="showAlert(event)">
<p>
<label>
Username:
<input type="text" />
</label>
</p>
<p>
<label>
Password:
<input type="password" />
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
</div>

</html>

Output:
Output

TextArea in an HTML Form

In the HTML form, a text area is used to add comments or reviews, or

addresses to the form, in other words, the text area is a multi-line text input
control. It contains an unlimited number of characters, the text renders in a
fixed-width font, and the size of the text area is given by the <rows> and
<cols> attributes. To create a text area in the form use the <textarea> tag.

Syntax:

<textarea name="textarea_name">content</textarea>

Note: the name attribute is used to reference the textarea data after it is sent to
a server.

Example: In this example, we will create a textarea.

HTML

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
margin-left: 50px;
font-family: Arial, sans-serif;
line-height: 1.8;
min-height: 100vh;
background: #ffffff;
flex-direction: column;
}

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1,
h3 {
text-align: center;
color: green;
}

input,
button {
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome To GeeksforGeeks</h1>
<form>
<textarea name="welcomeMessage"
rows="23" cols="40">
GeeksforGeeks is a online portal
</textarea>
</form>
</div>
</body>

</html>

Output:

Output

Create an HTML form to input the basic details of a student

In this example, we will take input such as Salutation, First Name, Last Name,
Email, Phone, Gender, Date of Birth, and Address.

To create this form, we need to use the <legend> tag to define the caption,
<select> tag for Salutation, <option> tag to define elements of Salutation,
<input> tag for First Name, Last Name, Email, Phone, Date of Birth by changing
<input> tag type attribute, <textarea> to input address, the radio button for
gender. After defining all these stuff, we will use a <button> to submit this
form data.

HTML
<!DOCTYPE html>
<html>

/* Main container styling */

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 600px;
}

form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

h1,
h3 {
text-align: center;
color: green;
}

input,
button {
padding: 10px;
}
</style>
</head>
<body>
<div class="main">
<h1>Welcome To GeeksforGeeks</h1>
<form>
<fieldset>
<legend>Personal Details</legend>

<p>
<label>
Salutation
<br />
<select name="salutation">
<option>--None--</option>
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
<option>Dr.</option>
<option>Prof.</option>
</select>
</label>
</p>

<p>
<label>First name:
<input name="firstName" />
</label>
</p>

<p>
Gender :
<label><input type="radio"
name="gender" value="male" />
Male
</label>
<label><input type="radio"
name="gender" value="female" />
Female
</label>
</p>

<p>
<label>Email:
<input type="email" name="email" />
</label>
</p>

<p>
<label>Date of Birth:
<input type="date" name="birthDate">
</label>
</p>

<p>
<label>
Address :
<br />
<textarea name="address"
cols="30" rows="3">
</textarea>
</label>
</p>

<p>
<button type="submit">Submit</button>
</p>

</fieldset>
</div>
</body>

</html>

Output:
Output

Last Updated : 19 Dec, 2023 30

Previous Next

Bootstrap 5 Table borders HTML form Tag

Similar Reads
Largest lexicographic triplet from a given New Forms of Publications
Array that forms a triangle

Modern Forms of Money Essential HTML Tags

Open in app Sign up Sign in

Search Write

TOP 12 COMMON ERRORS THAT

YOU ENCOUNTER WHILE USING
HTML
Harsh Mehta · Follow
4 min read · Sep 27, 2020

101
1. Missing or incorrect DOCTYPE
The DOCTYPE tells Web browsers what version of HTML your page is using.
Technically, it refers to a Document Type Definition (DTD) that specifies the
rules for that version of HTML.

The DOCTYPE should always the very first line of your HTML code and it IS
case sensitive.

2. Missing Character Encoding

The character encoding tells the user agent (browser or assistive device)
what kind of data to read and display. For most English Web pages, the
character encoding will be entered into the Web page like this: <meta
charset=”utf-8"/>

Example:

<!DOCTYPE html>

<head>

It doesn’t matter whether you type UTF-8 or utf-8.

3. Unsupported tags or attributes

The use of code that is not part of the HTML boundaries is not appropriate.
These include the <BLINK> and <MARQUEE> tags, among others. There are
also many attributes of HTML tags that many browsers will recognize, but
that is not part of the HTML standard. Commonly used attributes that are
improper are attributes in the <body> tags that modify margin size, such as
<body marginwidth=”0">. These tags and attributes vary based on the
version of HTML that you are developing in. For accessibility and
compatibility reasons, we should all be using AT LEAST HTML version 4.01..
If you don’t have a DOCTYPE, then it won’t know which version of HTML to
validate your page with.

4. Improperly formatted HTML

The most common mistakes in HTML are usually just plain human mistakes.
Here’s a list of HTML no-no’s:

Missing quotation marks for attribute values.

Examples of what NOT to do:

<p style=font-face: arial, geneva>

Missing closing tags

If any of the lines cross, then you have probably nested improperly.

Correct:

Incorrect:
It is very common to improperly code when nesting lists (such as those
your viewing right now). Any nested <UL> or <OL> must be enclosed
within a parent <LI>.

Using HTML tags for the wrong purpose

A common misuse of HTML is using list tags <UL> or <OL> to simulate

paragraph indents. HTML tags should only be used for the purpose they
were intended. List tags should be used for lists, <BLOCKQUOTE> for
long quotes, and so forth.

5. Improper Tables
Tables are a common culprit of improper HTML. It is easy to incorrectly
code tables and most browsers will let you get away with it. Assistive
technologies are very strict about proper table structure. Common table
mistakes are:

Not closing the <table>, <tr>, or <td> tags or closing them improperly (see
above)

Inserting <td>’s outside of a <tr>

Creating tables with differing numbers of cells (or rowspan/colspan)in

each row

Placing tables within inline elements, such as <b> or <h1>

Surrounding table cells or rows with text formatting tags (i.e., <table><b>
<tr><td>I am bold</td></tr></b></table>)

Data tables should have a caption, immediately after the opening table
tag — <table><caption>Data from Jello Eating Contest</caption><tr> …

6. Missing ALT Text

All images must have the alt attribute: <img src=”image.gif” alt=” image
description”>. As of HTML version 4.01, this is required.

7. Head content must be within the <head>

<title>, <meta>, and <style> tags must be within the <head> and </head>
tags.

8. Missing </body> or </html> tags

At the end of the program you should check that you close the tags that are:
</body> and </html>

9. Improper use of form tags

The form tag is a block-level tag, meaning that it starts a new section of your
page (much like <h1> and <p> do). It is a common mistake to use the form
tags to surround smaller sections of your page. To avoid having the form
insert a blank line when it begins. This is especially common within tables.

Incorrect:

Correct:

10. Align=absmiddle
This commonly used HTML extension is not proper HTML for the img tag
(i.e., <img src=”image.gif” align=”absmiddle”>). This attribute IS supported
by the major browsers, but if you want your code to be correct, use either
align=middle or CSS to align text to the middle of images.

11. Missing script type

Scripting languages such as JavaScript and VBScript are becoming very
popular. HTML standards require that you identify the type of scripting
language that is being used. Most scripts include the language attribute. This
alone is not enough, you must also include a type attribute. In fact, in the
future, the language attribute will be replaced with the type attribute.

12. Missing <noscript>

Any JavaScript that performs a function or outputs information must have a
<noscript> tag that provides an alternative or explanation for what the
JavaScript does.

…. javascript stuff here …

</script>

<P>Access the <A href=”//Add your link here”>data.</A>

</noscript>

BCA - (WEB PROGRAMMING) (Total 5 Units PDF
No ratings yet
BCA - (WEB PROGRAMMING) (Total 5 Units PDF
153 pages
CoLOS Installation and Migration Guide
100% (1)
CoLOS Installation and Migration Guide
14 pages
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
From Everand
HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days
i Code Academy
4/5 (7)
U1
No ratings yet
U1
85 pages
HTML Tutorials
No ratings yet
HTML Tutorials
13 pages
Project for Nielit
No ratings yet
Project for Nielit
12 pages
HTML is widely used
No ratings yet
HTML is widely used
26 pages
HTML
No ratings yet
HTML
5 pages
Structure of HTML Document
No ratings yet
Structure of HTML Document
9 pages
What Is HTML Part1
No ratings yet
What Is HTML Part1
6 pages
Project on HTML Savita Yadav
No ratings yet
Project on HTML Savita Yadav
40 pages
2text
No ratings yet
2text
5 pages
This Is A Heading: HTML - Overview
No ratings yet
This Is A Heading: HTML - Overview
3 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
Chapter 10 - HTML
No ratings yet
Chapter 10 - HTML
98 pages
HTML Introduction
No ratings yet
HTML Introduction
8 pages
Unit-1_HTML_and_CSS
No ratings yet
Unit-1_HTML_and_CSS
189 pages
Training Report Shreya-3
No ratings yet
Training Report Shreya-3
95 pages
HTML History
No ratings yet
HTML History
2 pages
WT & Ecommerce Unit II
No ratings yet
WT & Ecommerce Unit II
23 pages
msd unit-1 html5-1
No ratings yet
msd unit-1 html5-1
96 pages
What Is HTML?: Example
No ratings yet
What Is HTML?: Example
4 pages
Notes of Web Technology
No ratings yet
Notes of Web Technology
28 pages
HTML - Overview - Tutorialspoint
No ratings yet
HTML - Overview - Tutorialspoint
3 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
HTML Basics
100% (1)
HTML Basics
12 pages
HTML5 in A Day
No ratings yet
HTML5 in A Day
14 pages
Unit 2-Web Technologies - HTML
No ratings yet
Unit 2-Web Technologies - HTML
45 pages
HTML and XHTML-Unit2 (2nd Part)
No ratings yet
HTML and XHTML-Unit2 (2nd Part)
50 pages
HTML Tut
No ratings yet
HTML Tut
82 pages
AppDev - Lesson 1
No ratings yet
AppDev - Lesson 1
4 pages
Lecture 1 Introduction To HTML
No ratings yet
Lecture 1 Introduction To HTML
68 pages
HTML 1
No ratings yet
HTML 1
4 pages
BIT3105 INTERNET PROGRAMMING Notes Final
No ratings yet
BIT3105 INTERNET PROGRAMMING Notes Final
161 pages
Lecture 1
No ratings yet
Lecture 1
17 pages
Mrunal D Report4
No ratings yet
Mrunal D Report4
88 pages
Slidesgo Unlocking the Power of HTML Building the Foundation of the Web 20241026070235cB7z
No ratings yet
Slidesgo Unlocking the Power of HTML Building the Foundation of the Web 20241026070235cB7z
7 pages
HTML Notes
No ratings yet
HTML Notes
171 pages
2.HTML Doctype Declaration
No ratings yet
2.HTML Doctype Declaration
3 pages
Module1 HTML Doc
No ratings yet
Module1 HTML Doc
192 pages
varun kumar
No ratings yet
varun kumar
50 pages
1 HTML
No ratings yet
1 HTML
15 pages
Introduction to HTML
No ratings yet
Introduction to HTML
99 pages
Module #1 - Introduction To HTML
No ratings yet
Module #1 - Introduction To HTML
65 pages
WT Unit - 2
No ratings yet
WT Unit - 2
63 pages
Wit Unit2
No ratings yet
Wit Unit2
9 pages
HTML Data
No ratings yet
HTML Data
39 pages
Unit-I Chapter 1
No ratings yet
Unit-I Chapter 1
32 pages
Chap 02 - Intro To HTML
No ratings yet
Chap 02 - Intro To HTML
32 pages
1.1 HTML Fundamentals
No ratings yet
1.1 HTML Fundamentals
97 pages
HTML Intro
No ratings yet
HTML Intro
29 pages
HTML Notes
No ratings yet
HTML Notes
42 pages
Intro - To - HTML PDF
No ratings yet
Intro - To - HTML PDF
48 pages
Practical File - Vikas
No ratings yet
Practical File - Vikas
13 pages
Unit2 Ecommerce
No ratings yet
Unit2 Ecommerce
202 pages
Unit - 1 HTML
No ratings yet
Unit - 1 HTML
110 pages
H1
No ratings yet
H1
31 pages
Syntax of Java
No ratings yet
Syntax of Java
4 pages
BIT - Web3
No ratings yet
BIT - Web3
284 pages
HTML Introduction
No ratings yet
HTML Introduction
6 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
Example Workbook ASAP Utilities Formulas
No ratings yet
Example Workbook ASAP Utilities Formulas
64 pages
2020 Microsoft Azure Fundamentals AZ 900
No ratings yet
2020 Microsoft Azure Fundamentals AZ 900
7 pages
Secondry Memory Management
No ratings yet
Secondry Memory Management
23 pages
Yealink W53P & W53H Quick Start Guide - V83 - 12 - DE - ES - FR
No ratings yet
Yealink W53P & W53H Quick Start Guide - V83 - 12 - DE - ES - FR
60 pages
Satellite Multiple Access: August 27, 2012 Asherferoze
No ratings yet
Satellite Multiple Access: August 27, 2012 Asherferoze
4 pages
A Iab 097627
No ratings yet
A Iab 097627
38 pages
STEP 7 - Programming With STEP 7
100% (8)
STEP 7 - Programming With STEP 7
650 pages
Aptis Writing
No ratings yet
Aptis Writing
17 pages
Lesson 2 Conventions in Citing Sources of Information
No ratings yet
Lesson 2 Conventions in Citing Sources of Information
23 pages
PCS265V7 Manual
No ratings yet
PCS265V7 Manual
2 pages
Windows Azure Platform Overview: Objectives Agenda
No ratings yet
Windows Azure Platform Overview: Objectives Agenda
4 pages
Pairing Procedure LM048
No ratings yet
Pairing Procedure LM048
8 pages
Cybercrime Presentation PDF
No ratings yet
Cybercrime Presentation PDF
42 pages
AnyDesk Security Best Practises
No ratings yet
AnyDesk Security Best Practises
14 pages
Network Management (SNMP)
No ratings yet
Network Management (SNMP)
17 pages
o Institutie Nu Patrunde Intro Alta Institutie
No ratings yet
o Institutie Nu Patrunde Intro Alta Institutie
29 pages
Increase Your YouTube Views and Subscribers Quickly
100% (1)
Increase Your YouTube Views and Subscribers Quickly
17 pages
Module-1: Web Programming
100% (1)
Module-1: Web Programming
50 pages
Automation and Monitoring of Greenhouse: December 2017
No ratings yet
Automation and Monitoring of Greenhouse: December 2017
6 pages
Load Balacing GSM
50% (2)
Load Balacing GSM
12 pages
HP Aruba Certified Network Security Professional - HPE7-A02 Free Exam Questions (2024) - 3
No ratings yet
HP Aruba Certified Network Security Professional - HPE7-A02 Free Exam Questions (2024) - 3
4 pages
Evaluating Web Sites Powerpoint
No ratings yet
Evaluating Web Sites Powerpoint
25 pages
DEV101 Javascript Controllers Quickcard
No ratings yet
DEV101 Javascript Controllers Quickcard
1 page
Term Paper Purdue Owl
100% (1)
Term Paper Purdue Owl
8 pages
Go Global Now!
No ratings yet
Go Global Now!
6 pages
Sap Hana PDF
No ratings yet
Sap Hana PDF
47 pages
Reaction Paper
33% (3)
Reaction Paper
2 pages
AWUS036H User Guide
No ratings yet
AWUS036H User Guide
30 pages
E Commerce Supporting Mat With Cover Page v2
No ratings yet
E Commerce Supporting Mat With Cover Page v2
9 pages