HTML

HTML
Tags and Elements
2 Articles
Learn
Containers and Text formatting
2 Articles
Learn
Links and Images
2 Articles
Learn
Semantic
2 Articles
Learn
Block and Inline elements
2 Articles
Learn
Lists
4 Articles
Learn
Forms
1 Article
Learn
Additional Tags
3 Articles
Tags and Elements | Fork HTML
HTML Tags
HTML tags are special keywords that specify how the data will be displayed or how to format the data
by the web browsers. With tags, the web browser can make out in the document that: what is HTML
content and what is the normal plain content (as tags are always written in angular brackets <>).
Usually, the start of the tags are given by angular brackets <> and the end by angular brackets and /
that is </>
Example:
<head></head
HTML Element
The collection of start and end tag with the content inserted in between them is known as element tag.
Example:
<head> I am HTML element </head>
Types of Tags
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., <>). Tags are used in many places of the webpage but
many users are often confused about some tags whether it is a container or an empty tag. They get this
confusion because they don't know for what tag there should be an ending tag along with the opening
tag or not. There are two types of tags in HTML:
 Empty
 Container
Container tag
Container tags are generally divided into three parts, i.e., opening tag, content(which will display on the
browser), and closing tag. In the content part, they can also contain some other tags. These opening and
closing tags are used in pairs which are start tag and end tag, which is often called ON and OFF tags. If
you forget to close the container tag, the browser applies the effect of the opening tag until the end of
the page. So be careful while working with container tags. The majority of tags present in HTML are
container tags.
Syntax:
<tag_name> ...</tag_name>
Examples: Heading Tags(<h1>..</h1>), List Tags(<ul>..</ul>), Button Tags(<button>..</button>), etc.
Empty Tags
The tags that do not contain any closing tags are known as empty tags. Empty tags contain only the
opening tag but they perform some action in the webpage.
Syntax:
<tag_name>
Examples: <img>, <br>, <hr>, etc.
HTML attributes:
HTML attributes are the special words placed inside the opening tags and used to define the
characteristics of an HTML element. The HTML attributes contain two parts, attribute name, and its
value. The attribute pairs (attribute_name, attribute_value) are separated using equal (=) operator. The
attribute value is closed inside double quotes (" ").
Syntax:
<tag_name atrribute_name = "value">
Examples:
<img src="./img.png" height="300px" width="300px">
The complete list of HTML attributes can be found here .
HTML Global Attributes

HTML global attributes refer to the attribute common to all HTML elements although they may have no
effect on some elements. Global attributes specified on both standard and non-standard elements.
Example:
hidden: It is used to define the visibility of elements. It contains a boolean value. If this attribute is used
then browsers will not display elements that have the hidden attribute specified.
<img src="./img.png" height="300px" width="300px" hidden>
The complete list of HTML Global attributes can be found here
Meta Tags | Fork HTML

The metadata means information about data. The <meta> tag in HTML provides information about
HTML Document or in simple words, it provides important information about a document.
Meta Tags in Websites
Adding the meta tag while making the webpage or website, is a good practice because search engines
like Google search for this meta tag in order to understand the information provided by the website. It
is also helpful if the user search for a specific website then the search engine result page will display
snippets in search results that will provide information related to that website. These tags are basically
used to add name/value pairs to describe properties of HTML documents, such as expiry date, author
name, list of keywords, document author, etc ie., it is used to specify a character set, page description,
keywords, author of the document, and viewport settings. This tag is an empty element because it only
has an opening tag and no closing tag, but it carries information within its attributes. A web document
can include one or more meta tags depending on information, but in general, it doesn't affect the
physical appearance of the document.
Syntax:
<meta attribute-name="value">
Attributes: This tag accepts four attributes which are mentioned and described below.
 name: This attribute is used to define the name of the property.

 http-equiv: This attribute is used to get the HTTP response message header.
 content: This attribute is used to specify properties value.
 charset: This attribute is used to specify a character encoding for an HTML file.
Note: The meta tag also accepts Global Attributes in HTML
Key Points:
 The <meta> tag contents are not visible on your browser, but they can be parsed by the machine.
 They are just used to give additional information about the HTML document.
 The <meta> tags are added to our HTML document for the purpose of Search Engine
Optimisation.
 They are added inside the <head> tag & are used by browsers, search engines & other web
services.
 Through <meta> tag, designer can control the viewport.
Example: This simple example illustrates the use of the meta tag in the head tag that provides
information.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1">
<meta name="description"
content="A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles, quizzes and practice/competitive
programming/company interview Questions.">
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is an example of meta tag</p>
</body>
</html>
Output:
HTML <meta> tag
Ways to implement meta tags
There are various other ways to implement the <meta> tag that can use the following attribute values:
 Highlighting Important Keywords: The meta tag contains important keywords that are
present on the web page and is utilized by the web browser to rank the page according to
searches. Search Engine Optimization is another term for this optimizing the SEO rank of the
content.
Example: This example describes the <meta> tag with the name & content attributes & their
value is set as the keywords & some content.
HTML
<!DOCTYPE html>
<html>
<head>

<meta name="keywords"
content="Meta Tags, Metadata" />

</head>
<body>
<p>Hello GeeksforGeeks!</p>
</body>
</html>
Output:
Hello GeeksforGeeks!
 Providing a Description of the web page: A brief/short description of the web page can be
included in the Meta tag, which will help the web page rank on the internet.
Example: This example describes the use of the <meta> tag to provide the website's
description.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="keywords"
content="Geeksforgeeks is a computer science portal." />
</head>
<body>
<p>GeeksforGeeks!</p>
</body>
</html>
Output:
GeeksforGeeks!
 Document Revision Date: The meta tag is used to give the information about the last updated
document. This information is used by various web browsers when refreshing the web page.
Example: This example describes the use of the <meta> tag to provide the last updated
document information.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Meta Tags, Metadata" />
<meta name="description" content="Learn about Meta Tags." />
<meta name="revised detail" content="last updated time" />
</head>
<body>
</body>
</html>
Output:
GeeksforGeeks!
 Automatic Refresh: A specified time will be mentioned in the meta tag after which the webpage
will be automatically refreshed ie., this meta tag is used to specify a duration after which the web
page will keep refreshing automatically after the given duration.
Example: The below code will refresh the web page after 8 sec.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="keywords about"
content="Learning about Meta Tags." />
<meta name="revised about"
content="GeeksforGeeks" />
<meta http-equiv="refresh"
content="8" />
</head>
<body>
</body>
</html>
Output:
Setting the <meta> tag attribute value to auto-refresh the webpage for the specified duration
 Specifying Author of the Webpage: MetaTag allows us to mention the name of the author of
the webpage as follows.
Example: This example describes the use of the <meta> tag to provide the author's details.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="keywords used "
<meta name="description about"
content="Meta tags learning." />
<meta name="author"
content="Akash Kumar17" />
</head>
<body>
</body>
</html>
Output:
GeeksforGeeks!
Container and Empty Tags
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., <>). Tags are used in many places of the webpage but
many users are often confused about some tags whether it is a container or an empty tag. They get this
confusion because they don’t know for what tag there should be an ending tag along with the opening
tag or not. There are two types of tags in HTML:
 Empty
 Container
Now, let us see the definitions and examples of the most commonly used HTML container and empty
tags.
Container tags
Container tags are generally divided into three parts, i.e., opening tag, content(which will display on the
browser), and closing tag. In the content part, they can also contain some other tags. These opening and
closing tags are used in pairs which are start tag and end tag, which is often called ON and OFF tags. If
you forget to close the container tag, the browser applies the effect of the opening tag until the end of
the page. So be careful while working with container tags. The majority of tags present in HTML are
container tags.
<tag_name> …</tag_name>
Some commonly used container tags are:
1. Essential Tags: Following tags are used to create the structure of the webpage:
 <html>….</html>: This marks the beginning and ending of the webpage also it tells that
the document is an HTML document. This contains all other tags in between these tags
which are considered for making a webpage.
 <head>…</head>: This tag is used to define the head part of the document which contains
the information related to the webpage.
 <title>…</title>: This tag stores the description of the web page, whatever given in these
tags appears on the tab name while opened by the browser. It is described in the head tag.
 <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.
2. Headings: Following tags are used for headings:
<h1>….</h1> to <h6>…</h6>: It is used for including headings of different sizes ranging from 1
to 6.
3. Text formatters: Following tags are used for text formatting:
 <p>….</p>: When paragraphs are needed to be included, this tag is used

 <b>….</b>: Makes the contained text to bold.
 <i>…</i>: Makes the contained text to italic.
4. HyperLinks: Following tag is used to define a hyperlink in the webpage:
<a href=”link.com”>…</a>: When we link some other webpages we add the hyper links to other
webpages using this <a …>…</a>tag.
5. Button tag: Following tag is used to create a click button:
<button>…</button>: This is used in many ways but mainly used to manipulate dom by adding
events and many more.
6. Division tag: Following tag is used to create a division:
<div>….</div>: This defines a section in a document. The webpage can be divided to different
sections using the <div>….</div> tag.
7. Iframe tag: Following tag is used for inline framing:
<iframe src=”link.com> </iframe>: When some other document is to be embedded like some
video or image into HTML we use this tag.
8. Navigation tag: Following tag is used to set a navigation link:
<nav>…</nav>: Defines a navigation bar that contains a set of menu or a menu of hyperlinks.
9. Script tag: Following tag is used to add JavaScript code to the webpage:
<script>…</script> : This contains the javascript code that adds interactivity to the webpage.
10. Lists: Following tags are used to write data in the form of ordered and unordered lists:
 <ol>…</ol>: This tag is used to create ordered lists.

 <ul>…</ul>: This tag is used to create unordered lists.
 <li>…</li>: This tag is used to add list items.
Empty Tags
The tags that do not contain any closing tags are known as empty tags. Empty tags contain only the
opening tag but they perform some action in the webpage.
Syntax:
<tag_name>
Some commonly used empty tags are:
1. <br>: Inserts a line break in a webpage wherever needed.

2. <hr>: Inserts a horizontal line wherever needed in the webpage.
3. <img>: This tag is used to display the images on the webpage which were given in the src
attribute of the tag.
4. <input>: This is mainly used with forms to take the input from the user and we can also define
the type of the input.
5. <link>: When we store our CSS in an external file this can be used to link external files and
documents to the webpage and it is mainly used to link CSS files.
6. <meta>: Contains all metadata of the webpage. Metadata is the data about data and is described
in the head tag.
7. <source>: When an external media source is needed to be included in the webpage. source tag
is used to insert any media source like audio, video etc… in our webpage.
Example:
This example demonstrates the use of container and empty tags:
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">

<body>

<h1> Geeks For Geeks </h1>
<h4>Geeks For Geeks </h4>
<h5> Geeks For Geeks</h5>
<p> This is a paragraph.</p>


<hr>

<p> Geeks for geeks is a computer science portal for geeks. </p>
<hr>
<p> This is a <br> line break </p>
<h4> Link </h4>

<a href="https://www.geeksforgeeks.org/"> Geeks For Geeks</a>

<ol>
<li> Item1</li>
<li> Item2 </li>
<li> Item3 </li>
<li> Item4</li>
</ol>
</body>
</html>
Output:
HTML Text Formatting

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.
C++
<!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

The below are the various options available to format the text:
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>
<head>
<title>Bold Text</title>
</head>
<body>

<p>Hello GeeksforGeeks</p>

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

<p>
<strong>Hello GeeksforGeeks</strong>
</p>
</body>
</html>
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>
<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 a
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>
<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
<sup>GeeksforGeeks</sup>
</p>

<p>Hello
<sub>GeeksforGeeks</sub>
</p>
</body>
</html>
Output:
Using <sub> & <sup> 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 size.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Small</title>
</head>
<body>

<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> <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><ins>Hello GeeksforGeeks</ins></p>
</body>
</html>
Output:
Using <ins> tag
Link Tag
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,
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
Links are specified in HTML using the “a” tag.
< a href="url"> Text link </a>
Syntax Explanation:
href : The href attribute is used to specify the destination address of the link us
ed. "href" stands for Hypertext reference.
Text link : The text link is the visible part of the link. It is what the viewer cl
icks 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>
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>
//internal link
<p><a href="html_contribute.asp/">GeeksforGeeks Contribute

</a> It is a link to the contribute page on GeeksforGeeks' website.</p>
//external link
<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>
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 appearances 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;
}
a:hover {
color: blue;
}
a:active {
color: yellow;
}
</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="gfg_200X200.jpeg" 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.
<h2 id="T17"> Topic 17</h2>
2. Add the specified portion of the webpage to the bookmark.
<p><a href="#T17"> Jump to Topic 17</a></p>
Input :
HTML
<!DOCTYPE html>
<html>
<body>
<p><a href="#T11">Jump to Topic 11</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>
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 | A computer science portal for geeks.pdf">Download PDF
File</a>
</body>
</html>
Image Tag
HTML <img> tag is used to add image inside webpage/website. Nowadays 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.
Syntax:
<img src="" alt="" width="" height="">
Attributes: 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 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.
Example 1: In this example we are using the <img> tag along with src, width, height, and alt attributes.
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center;">

<h3>GeeksforGeeks logo</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
width="420" height="100"
alt="Geeksforgeeks.org">
</body>
</html>
Output:
img src
with and height
Example 2: In this example, we are adding the style attribute to add a border to the image.
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h3>GeeksforGeeks logo</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
width="420" height="100"
alt="Geeksforgeeks.org"
style="border:5px solid black">
</body>
</html>
Output:
image
source with border
Page Layout | Fork HTML
Page layout is the part of graphic design that deals with the arrangement of visual elements on a page.
Page layout is used to make the web pages look better. It establishes the overall appearance, relative
importance, and relationships between the graphic elements to achieve a smooth flow of information
and eye movement for maximum effectiveness or impact.
Page Layout Information:
 Header: The part of a front end which is used at the top of the page. <header> tag is used to add
header section in web pages.
 Navigation bar: The navigation bar is same as menu list. It is used to display the content
information using hyperlink.
 Index / Sidebar: It holds additional information or advertisements and is not always necessary
to be added into the page.
 Content Section: The content section is the main part where content is displayed.
 Footer: The footer section contains the contact information and other query related to web
pages. The footer section always put on the bottom of the web pages. The <footer> tag is used to
set the footer in web pages.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
margin-left:20px;
}
</style>
</head>
<body>


<header>
<div class="head1">GeeksforGeeks</div>
<div class="head2">A computer science portal for geeks</div>
</header>


<div class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</div>


<div class = "body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</div>

<footer>Footer Section</footer>
</body>
</html>
Output:
Semantics
HTML tags are classified in two types.
 Semantic
 Non-Semantic
Semantic Elements: Semantic elements have meaningful names which tells about type of content. For
example header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below
which make the code easier to write and understand for the developer as well as instructs the browser
on how to treat them.
 article
 aside
 details
 figcaption
 figure
 footer
 header
 main
 mark
 nav
 section
Article: It contains independent content which doesnt require any other context.
Example: Blog Post, Newspaper Article etc.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Article Tag</title>
<style>
h1 {
Color:#006400;
font-size:50px;
Text-align:left;
}
p {
font-size:25px;
text-align:left;
margin-top:-40px;
}
</style>
</head>
<body>
<article>
<p>A Computer Science Portal for Geeks</p>

</article>
</body>
</html>
Aside: It is used to place content in a sidebar i.e. aside the existing content. It is related to surrounding
content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Aside Tag</title>
<style>
h4 {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<p>GeeksforGeeks is a Computer Science Portal</p>
<aside>
<h4>GeeksForGeeks</h4>
<p>GeeksforGeeks is a computer Science platform

where you can learn good programming.
</p>
</aside>
</body>
</html>
Output:
Details and Summary: “details” defines additional details that the user can hide or view. “summary”
defines a visible heading for a “details” element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Detail and summary Tag</title>
<style>
.GFG {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<details>
<summary class="GFG">GeeksforGeeks</summary>
<p>GeeksforGeeks is a Computer Science portal

where you can learn good programming.
</p>
</details>
</body>
</html>
Output:
Figure and Figcaption: These are used to add an image in a web page with small description.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Figcaption Tag</title>
<style>
h2 {
Color:#006400;
font-size:50px;
Text-align:none;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<figure>
<img src="4.jpg" alt="gfg" style="width:20%">
<figcaption>GeeksforGeeks Logo</figcaption>
</figure>
</body>
</html>
Output:
Header: As the name suggests, it is for the header of a section introductory of a page. There can be
multiple headers on a page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Header Tag</title>
<style>
h1, h3 {
Color:#006400;
Text-align:left;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:left;
margin-top:0px;
}
</style>
</head>
<body>
<article>
<header>
<p>A computer Science portal</p>
</header>
</article>
</body>
</html>
Output:
Footer: Footer located at the bottom of any article or document, they can contain contact details,
copyright information etc. There can be multiple footers on a page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>footer Tag</title>
<style>
p {
font-size:25px;
text-align:left;
margin-top:0px;
}
</style>
</head>
<body>
<footer>
<p>Posted by: GeeksforGeeks</p>
<p>Contact: <a href="https://www.geeksforgeeks.org">

geeksforgeeks.org</a>.
</p>
</footer>
</body>
</html>
Output:
Main: It defines the main content of the document. The content inside main tag should be unique.
HTML
<!DOCTYPE html>
<html>
<head>
<title>main Tag</title>
<style>
h1 {
color:#006400;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<main>
<h1>Important Residences</h1>
<p>A few of them are Rashtrapati Bhavan, White House etc</p>
<article>
<h1>Rashtrapati Bhavan</h1>
<p>It is the home of the President of India.</p>
</article>
<article>
<h1>The White House</h1>
<p>It is the home of the President of United

States of America.
</p>
</article>
</main>
</body>
</html>
Output:
Section: A page can be split into sections like Introduction, Contact Information, Details etc and each of
these sections can be in a different section tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>section Tag</title>
<style>
h1 {
color:#006400;
}
p {
font-size:25px;
text-align:none;
margin-top:0px;
}
</style>
</head>
<body>
<section>
<h1>Data Structure</h1>
<p>Data Structure is a data organization and

storage format that enables efficient access
and modification.
</p>
</section>
<section>
<h1>Algorithm</h1>
<p>A process or set of rules to be followed

in calculations or other problem-solving
operations, especially by a computer.
</p>
</section>
</body>
</html>
Output:
nav: It is used to define a set of navigation links in the form of navigation bar or nav menu.
html
HTML
<!DOCTYPE html>
<html>
<head>
<title>nav Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>
<body>
<h1>Navigation Bar</h1>
<nav>
<a href="/home/">Home</a> |
<a href="/about-us/">About Us</a> |
<a href="/data-structure/">Data Structure</a> |
<a href="/operating-system/">Operating System</a>
</nav>
</body>
</html>
Output:
Mark: It is used to highlight the text.
HTML
<!DOCTYPE html>
<html>
<head>
<title>mark Tag</title>
<style>
h1 {
color:#006400;
}
</style>
</head>
<body>
<h1>mark tag</h1>
<p>GeeksforGeeks is a <mark>Computer Science</mark> portal</p>

</body>
</html>
Output:
Non-Semantic Elements: Tags like div, span fall under the Non- Semantic categories as their names
don’t tell anything about what kind of content is present inside them.
div It is a block level element or division of a section. It is used as a container.
HTML
<!DOCTYPE html>
<html>
<head>
<title>div Tag</title>
<style>
.GFG {
color:#006400;
}
</style>
</head>
<body>
<h1>div Tag</h1>
<div class="GFG">
<p>GeeksforGeeks is a Computer Science portal</p>
</div>
</body>
</html>
Output:
span: It is an inline element which doesn’t start on a new line and takes up only the necessary width.
For more details use https://www.geeksforgeeks.org/span-tag-html/.
Block, Inline and Inline-Block Elements
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:
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.
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>
<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:
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:
 HTML <br> Tag

 HTML <button> Tag
 HTML <time> Tag
 HTML <tt> Tag
 HTML <var> Tag
 HTML <a> Tag
 HTML <abbr> Tag
 HTML <acronym> Tag
 HTML <b> Tag
 HTML <cite> Tag
 HTML <code> Tag
 HTML <dfn> Tag
 HTML <em> Tag
 HTML <i> Tag
 HTML <output> Tag
 HTML <q> Tag
 HTML <samp> Tag
 HTML <script> Tag
 HTML <select> Tag
 HTML <small> Tag
 HTML <span> Tag
 HTML <strong> Tag
 HTML <sub> Tag
 HTML <sup> Tag
 HTML <textarea> tag
 HTML <bdo> Tag
 HTML <big> Tag
 HTML <img> Tag
 HTML <input> Tag
 HTML <kbd> Tag
 HTML <label> Tag
 HTML <map> Tag
 HTML <Object> tag
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:
<span>GFG</span>
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 vs Block elements
The inline and block elements of HTML are one of the important areas where web developers often get
confused because they were unable to know which are inline and block elements which may cause
clumsiness in a webpage in case he assumes some element to be a block but it is an inline element which
causes next element comes next to it.
So let us see the differences between the inline and block elements in HTML and the different frequently
used inline and block HTML elements.
Block elements: They consume the entire width available irrespective of their sufficiency. They always
start in a new line and have top and bottom margins. It does not contain any other elements next to it.
Examples of Block elements:

 <h1>-<h6> : This element is used for including headings of different sizes ranging from 1 to 6.
 <div>: This is a container tag and is used to make separate divisions of content on the web page.
 <hr>: This is an empty tag and is used for separating content by horizontal lines.
 <li>: This tag is used for including list items of an ordered or unordered list.
 <ul>: This tag is used to make an unordered list.
 <ol>: This tag is used to make an ordered list.
 <p>: This tag is used to include paragraphs of content in the webpage.
 <table>: This tag is used for including the tables in the webpage when there is a need for tabular
data.
HTML 5 Semantic block elements:
 <header>: This tag is used for including all the main things of the webpage like navbar, logos,
and heading of the webpage.
 <nav>: This tag helps to navigate through different sections by including different blocks of
hyperlinks in the webpage.
 <footer>: This contains all information about the authorization, contact, and copyright details
of the webpage.
 <main>: The main content of the webpage resides in this tag.
 <section> : This is used separate different sections in the webpage.
 <article>: This tag is used to include different independent articles on the webpage.
 <aside>: This tag is used to mention details of the main content aside.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>

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

<title>Geeks For Geeks </title>
<style>
h1 {
color: #006600;
text-align: center;
border: 2px solid #091418;
background-color: yellow;
}
.container {
background-color: slategray;
}
p{
background-color: #4089c5;
}
</style>
</head>

<body>
<div class="container" >
<h1>Geeks for Geeks(h1) </h1>
<p>
This is a paragraph example of block
element which occupied whole width (p)
</p>
</div>
</body>
</html>
Output: From the above output, 3 different block elements with different background colour and a
border are used to show how the block elements occupy the whole width and the margin they leave.
Three-block elements <h1>,<p>,<div> are used in the above output.
Inline elements: Inline elements occupy only enough width that is sufficient to it and allows other
elements next to it which are inline. Inline elements don’t start from a new line and don’t have top and
bottom margins as block elements have.
Examples of Inline elements:
 <a>: This tag is used for including hyperlinks in the webpage.

 <br>: This tag is used for mentioning line breaks in the webpage wherever needed.
 <script> : This tag is used for including external and internal JavaScript codes.
 <input>: This tag is used for taking input from the users and is mainly used in forms.
 <img>: This tag is used for including different images in the webpage to add beauty to the
webpage.
 <span>: This is an inline container that takes necessary space only.
 <b>: This tag is used in places where bold text is needed.
 <label>: The tag in HTML is used to provide a usability improvement for mouse users i.e, if a
user clicks on the text within the <label> element, it toggles the control.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
span {
background-color: #4089c5;
}
a {
}
</style>
</head>

<body>
<div class="container">
<h1>Geeks for Geeks</h1>
<p>
This is a <span>span element </span>
<span>and </span><b>this</b> is a
<a href="#">link</a> which are examples
of inline elements which occupy only
sufficient width.
</p>
</div>
</body>
</html>
Output:
From the above output, three different inline elements are used is <span>, <b>,<a> that occupied only
enough width and allowed other elements to settle at their next.
Difference between Inline and Block elements:
Inline Elements Block Elements
Inline elements occupy only sufficient Block Elements occupy the full width irrespective of
width required. their sufficiency.
Inline elements don’t start in a new line. Block elements always start in a line.
Inline elements allow other inline elements Block elements doesn’t allow other elements to sit
to sit behind. behind
Inline elements don’t have top and bottom

Block elements have top and bottom margin.
margin
Lists in HTML | Fork HTML
Lists are used to store data or information in web pages in ordered or unordered form. HTML supports
several types of list elements that can be included in the <BODY>tag of the document. These elements
may also be nested, i.e, the onset of elements can be embedded within another. There are three types of
list are available in HTML:
 Unordered List
 Ordered List
 Description list
Now before moving to the list first of all we understands what is a list item tag.
List Item tag
List item tag is used to define each item of a list. Once we define list items with the <li> tag, the list
appears in Web browsers in the bulleted form (by default). It is used inside both ordered and unordered
list.
Syntax:
<li> content </li>
Attribute of item tag:
value: The value attribute of the<li> tag is used to specify the value of the first item. The value must be
a number and this can be used in case of ordered list only. The subsequent list items will increment the
value form the number.
Syntax:
<li value = number>

Example 1:
HTML
<html >
<head>
<title>inline style attribute</title>
</head>
<body>
<li>sachin</li>
<li>sujay</li>
<li>Amraditya</li>
<li>shivam</li>
<li>Parth</li>
</body>
</html>
Output:
Example 2:
HTML
<html >
<head>
<title>inline style attribute</title>
</head>
<body>
<ol>
<li value="51">English</li>
<li>Hindi</li>
<li>Maths</li>
<li>Science</li>
<li>social science</li>
</ol>
</body>
</html>
Output:
Ordered Lists | Fork HTML
Ordered Lists
An ordered list defines a list of items in which the order of the items are matters. An ordered list is also
called a number list. The ordering is given by a numbering scheme, using Arabic numbers, letters, roman
numerals. Or in other words, ordered list tag is used to create ordered list.
Syntax:
<ol> content </ol>
Attributes of ordered list:

 reversed: This attribute is used to specifies that the ordered of the list should be reversed.
Syntax:
<ol reversed>
 start: This attribute is used to specifies the start value of the list.
Syntax:
<ol start = "number">

 type: This attribute is used to specifies the type of list item maker. The value of this attribute is
decimal(Default)/lower-roman/upper roman/lower-alpha/upper alpha
Syntax:
<ol type = "a">
Value assigned to type attribute can be 1 or A or i or I (where i and I represents roman numbers).
Example 1:
HTML
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1>Example of ordered list in default</h1>
<ol >
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ol>
</body>
</html>
Output:
Example 2:
HTML
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1>Example of ordered list whose type = "A"</h1>
<ol type="A">
<li>Sachin</li>
<li>Manoj</li>
</ol>
<h1>Example of reverse ordered list</h1>
<ol reversed>
<li>Parth</li>
<li>sujay</li>
</ol>
<h1>Example of ordered list start from 10</h1>
<ol start = "10">
<li>Pushpa</li>
<li>Purvi</li>
</ol>
</body>
</html>
Output:
Unordered Lists | Fork HTML
Unordered Lists
An unordered list defines a list of items in which the order of the items does not. Or in other words,
unordered list tag is used to create a unordered list. It is also known as bulleted list. In unordered list
each element in the list is defined using <li> tag.
Syntax:
<ul> content </ul>
Attributes of unordered list:
List-style-type: This attribute is used to specifies the bullet style that will be used as the list item
marker. The value of this attribute is None/disc(default)/circle/square.
Syntax:
<ul style="list-style-type:square|disc|none;">
Example 1:
HTML
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1>Example of unordered list in default</h1>
<ul>
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ul>
</body>
</html>
Output:
Example 2:
HTML
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h2>Example of unordered list in circle</h2>
<ul style="list-style-type:circle;">
<li>sachin</li>
<li>manoj</li>
</ul>
<h2>Example of unordered list in disk</h2>
<ul style="list-style-type:disc;">
<li>Priya</li>
<li>Mohit</li>
</ul>
<h2>Example of unordered list in square</h2>
<ul style="list-style-type:square;">
<li>Pinky</li>
<li>Punam</li>
</ul>
<h2>Example of unordered list in none</h2>
<ul style="list-style-type:none;">
<li>Mukti</li>
<li>Dhama</li>
</ul>
</body>
</html>
Output:
Description Lists | Fork HTML
Description List
Description list is a list in which each term contain its description. This tag contain <dt> and <dd> tag.
 <dt></dt>: This tag is used to define the name or term

 <dd><dd>: this tag is used to describe the term.
Syntax:
<dl> content </dl>
Example:
HTML
<html>
<head>
<title>Description list</title>
</head>
<body>
<h2>Example of description list</h2>
<dl>
<dt>Python:</dt>
<dd>It is a programming language</dd>
<dt>C++:</dt>
<dd>It is also a programming language</dd>
</dl>
</body>
</html>
Output:
Forms | Fork HTML
HTML stands for HyperText 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 a HTML element to collect input data with containing interactive controls. It provides facilities
to input text, number, values, email, password, and control fields such as checkboxes, radio buttons,
submits buttons, etc. or in other words, form is a container that contains input elements, like text, email,
number, radio buttons, checkboxes, submit buttons, etc. Forms are generally used when you want to
collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter
their shipping address in the address form and then add their payment detail in the payment form to
place an order.
Forms are created by placing input fields within paragraphs, preformatted text, lists and tables. This
gives considerable flexibility in designing the layout of forms.
Syntax:
<form>

</form>
Form elements
These are the following HTML <form> elements:
 <label>: It defines label for <form> elements.

 <input>: It is used to get input data from the form in various type such as text, password, email,
etc by changing it's 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 draws a box around other form elements and group the related data.
 <legend>: It defines caption for fieldset elements.
 <datalist>: It is used to specify pre-defined list options for input controls.
 <output>: It display the output of performed calculations.
 <option>: It is used to define option in drop-down list.
 <optgroup>: It used to defines group related options in a drop down list.
Textbox in HTML Form
In an HTML form, we use <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:
<input />
Password in an HTML Form
We can change type value text to password to get the input password
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<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>
</body>
</html>
Output:
In the above example, we can see the difference between type text and type password. The username
will be visible but the password will not be visible.
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.
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.
Note: 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.
Example:
In this example, we will create a radio button to choose your gender.
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Select your gender</h2>
<form>
<label>Male<input type="radio" name="gender" value="male" /></label>
<label>Female<input type="radio" name="gender" value="female" /></label>
</form>
</body>
</html>
Output:
Checkbox in an HTML Form
To create a checkbox in an HTML form, we use the <input> tag following by the input type checkbox. It
is a square box to ticked 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>
<head>
</head>
<body>
<h2>Choose Language</h2>
<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>
</body>
</html>
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 an 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>
</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>
</head>
<body>
<h2>Select Your Nationality</h2>
<form>
<select name="language">
<option value="indian">Indian</option>
<option value="nepali">Nepali</option>
<option value="others">Others</option>
</select>
</form>
</body>
</html>
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:
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>
<label>Username: <input type="text" /></label>
<p>
<label>Password: <input type="password" /></label>
</p>
<p>
<button type="submit">submit</button>
</p>
</form>
</body>
</html>
Output:
TextArea in an HTML Form
In the HTML form, a text area is used to add comments or reviews, or addresses in the form. Or in other
words, the text area is a multi-line text input control. It contains an unlimited number of characters, and
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 send to a server.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<textarea name="welcomeMessage" rows="3" cols="40">GeeksforGeeks is a online
portal</textarea>
</form>
</body>
</html>
Output:
Create an HTML form to input the basic details of a student
In this example, we will take output 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 defined 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, radio button for gender.
After defining all these stuffs, we will use a <button> to submit this form data.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GfG</title>
</head>
<body>
<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>
<label>Last name: <input name="lastName" /></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>
</form>
</body>
</html>
Output:
IFrames
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe Tag</title>
</head>
<body style="text-align: center">

<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>
<p>Content goes here</p>
<iframe src=
"https://ide.geeksforgeeks.org/tryit.php"
height="300"
width="400">
</iframe>
</body>
</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>
<iframe src=
height="300"
width="400"
style="border: none">
</iframe>
</body>
</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>
<iframe src=
height="300"
width="400"
style="border: 4px solid orange">
</iframe>
</body>
</html>
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>
<p>Click the link text</p>
<iframe height="300"
width="350"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210910170539/gfg-221x300.png"
name="iframe_a">
</iframe>
<p><a href=
target="iframe_a">
GeeksforGeeks IDE
</a>
</p>
</body>
</html>
Output:
HTML iframe with a link tag
Labels Fieldsets
The <fieldset> tag in HTML5 is used to make a group of related elements in the form, and it creates the
box over the elements. The <fieldset> tag is new in HTML5. The <legend> tag is used to define the title
for the child’s contents. The legend elements are the parent element. This tag is used to define the
caption for the <fieldset> element.
Syntax:
<fieldset>Contents</fieldset>
Attribute:
 disabled: It is used to specify that the group of related form elements is disabled. A disabled
fieldset is un-clickable and unusable.
 form: It is used to specify the one or more forms that the <fieldset> element belongs to.
 name: It is used to specify the name for the Fieldset element.
 autocomplete: It is used to specify that the fieldset has autocompleted on or off value.
Example: This simple example illustrates the use of the <fieldset> tag in order to make a group of
related elements in the HTML Form.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML <fieldset> Tag</h2>
<form>
<div class="title">
Employee Personal Details:
</div>


<fieldset>
<legend>Details:</legend>
Name:<input type="text">
Emp_Id:<input type="text">
Designation:<input type="text">
</fieldset>

</form>
</body>
</html>
Output:
HTML
<fieldset> tag
Example: In this example, we will know the use of <fieldset> tag to make the group of related elements.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML <fieldset> Tag</h2>
<form>
<div class="title">
Suggest article for video:
</div>
<fieldset>
<legend>JAVA:</legend>
Title:<input type="text"><br>
Link:<input type="text"><br>
User ID:<input type="text">
</fieldset>
<br>

<fieldset>
<legend>PHP:</legend>
Title:<input type="text"><br>
Link:<input type="text"><br>
User ID:<input type="text">
</fieldset>
</form>
</body>
</html>
Output:
<fieldset> tag to group the related element
Legends
The legend tag is used to define the title for the child contents. The legend elements are the parent
element. This tag is used to define the caption for the <fieldset> element.
Syntax
<legend> Text </legend>
Attribute :
 align: It sets the alignment of the legend element.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<strong>HTML Legend Tag</strong>
<form>
<fieldset>

<legend>STUDENT::</legend>
<label>Name:</label>
<input type="text">
<br><br>
<label>Email:</label>
<input type="text">
<br><br>
<label>Date of birth:</label>
<input type="text">
<br><br>
<label>Address:</label>
<input type="text">
<br><br>
<label>Enroll No:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>
Output:
Example 2: Styling the legend tag using CSS properties.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
form{
width: 50%;
}
legend {
display: block;
padding-left: 10px;
padding-right: 10px;
border: 3px solid green;
background-color:tomato;
color:white;;
}
label {
display: inline-block;
float: left;
clear: left;
width: 90px;
margin:5px;
text-align: left;
}
input[type="text"] {
width:250px;
margin:5px 0px;
}
.gfg {
font-size:40px;
color:green;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<h2>HTML Legend Tag</h2>
<form>
<fieldset>

<legend>STUDENT:</legend>
<label>Name:</label>
<input type="text">
<br>
<label>Email:</label>
<input type="text">
<br>
<label>Date of birth:</label>
<input type="text">
<br>
<label>Address:</label>
<input type="text">
<br>
<label>Enroll No:</label>
<input type="text">
</fieldset>
</form>
</body>
</html>
HTML Cheatsheet
page 1 of 2
Basic Tags Formatting

<html> </html> <p> </p>
Creates an HTML document Creates a new paragraph
<head> </head> <br>
Sets off the title & other info that isn't displayed AInserts a line break (carriage return)
<body> </body> <blockquote> </blockquote>
Sets off the visible portion of the document Puts content in a quote - indents text from both sides
<title> </title> <div> </div>
Puts name of the document in the title bar; when Used to format block content with CSS
bookmarking pages, this is what is bookmarked <span> </span>
Used to format inline content with CSS
Body attributes (only used in email newsletters)
<body bgcolor=?>
Sets background color, using name or hex value Lists
<body text=?> <ul> </ul>
Sets text color, using name or hex value Creates an unordered list
<body link=?> <ol start=?> </ol>
Sets color of links, using name or hex value Creates an ordered list (start=xx,
<body vlink=?> where xx is a counting number)
Sets color of visited links, using name or hex value <li> </li>
<body alink=?> Encompasses each list item
Sets color of active links (while mouse-clicking) <dl> </dl>
Creates a definition list
Text Tags <dt>
<pre> </pre> Precedes each defintion term
Creates preformatted text <dd>
<h1> </h1> --> <h6> </h6> Precedes each defintion
Creates headlines -- H1=largest, H6=smallest
<b> </b> Graphical elements
Creates bold text (should use <strong> instead) <hr>
<i> </i> Inserts a horizontal rule
Creates italicized text (should use <em> instead) <hr size=?>
<tt> </tt> Sets size (height) of horizontal rule
Creates typewriter-style text <hr width=?>
<code> </code> Sets width of rule (as a % or absolute pixel length)
Used to define source code, usually monospace <hr noshade>
<cite> </cite> Creates a horizontal rule without a shadow
Creates a citation, usually processed in italics <img src="URL" />
<address> </address> Adds image; it is a separate file located at the URL
Creates address section, usually processed in italics <img src="URL" align=?>
<em> </em> Aligns image left/right/center/bottom/top/middle (use CSS)
Emphasizes a word (usually processed in italics) <img src="URL" border=?>
<strong> </strong> Sets size of border surrounding image (use CSS)
Emphasizes a word (usually processed in bold) <img src="URL" height=?>
<font size=?> </font> Sets height of image, in pixels
Sets size of font - 1 to 7 (should use CSS instead) <img src="URL" width=?>
<font color=?> </font> Sets width of image, in pixels
Sets font color (should use CSS instead) <img src="URL" alt=?>
<font face=?> </font> Sets the alternate text for browsers that can't
Defines the font used (should use CSS instead) process images (required by the ADA)
Links
<a href="URL">clickable text</a>
Creates a hyperlink to a Uniform Resource Locator
<a href="mailto:EMAIL_ADDRESS">clickable text</a>
Creates a hyperlink to an email address
<a name="NAME">
Creates a target location within a document
<a href="#NAME">clickable text</a>
Creates a link to that target location
HTML Cheatsheet
page 2 of 2
Forms HTML5 input tag attributes

<form> </form> (not all browsers support; visit http://caniuse.com
Defines a form for details)
<select multiple name=? size=?> </select>
Creates a scrolling menu. Size sets the number of <input type="email" name=?>
menu items visible before user needs to scroll. Sets a single-line textbox for email addresses
<select name=?> </select> <input type="url" name=?>
Creates a pulldown menu Sets a single-line textbox for URLs
<option> <input type="number" name=?>
Sets off each menu item
Sets a single-line textbox for a number
<textarea name=? cols="x" rows="y"></textarea> <input type="range" name=?>
Creates a text box area. Columns set the width;
Sets a single-line text box for a range of numbers
rows set the height.
<input type="date/month/week/time" name=?>
<input type="checkbox" name=? value=?>
Creates a checkbox.
Sets a single-line text box with a calendar
showing the date/month/week/time
<input type="checkbox" name=? value=? checked>
Creates a checkbox which is pre-checked. <input type="search" name=?>
<input type="radio" name=? value=?>
Sets a single-line text box for searching
Creates a radio button. <input type="color" name=?>
<input type="radio" name=? value=? checked> Sets a single-line text box for picking a color
Creates a radio button which is pre-checked.
<input type="text" name=? size=?>
Creates a one-line text area. Size sets length, in
characters.
<input type="submit" value=?>
Creates a submit button. Value sets the text in the
submit button.
<input type="image" name=? src=? border=? alt=?>
Creates a submit button using an image.
<input type="reset">
Creates a reset button
Tables (use only for data layout - use CSS for page layout) Table attributes (only use for email newsletters)
<table> </table> <table border=?>
Creates a table Sets the width of the border around table cells
<tr> </tr> <table cellspacing=?>
Sets off each row in a table Sets amount of space between table cells
<td> </td> <table cellpadding=?>
Sets off each cell in a row Sets amount of space between a cell's border and
<th> </th> its contents
Sets off the table header (a normal cell with bold, <table width=?>
centered text) Sets width of the table in pixels or as a percentage
<tr align=?>
Sets alignment for cells within the row
(left/center/right)
<td align=?>
Sets alignment for cells (left/center/right)
<tr valign=?>
Sets vertical alignment for cells within the row
(top/middle/bottom)
<td valign=?>
Sets vertical alignment for cell (top/middle/bottom)
<td rowspan=?>
Sets number of rows a cell should span (default=1)
<td colspan=?>
Sets number of columns a cell should span
<td nowrap>
Prevents lines within a cell from being broken to fit

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

Tags and Elements

Containers and Text formatting

Links and Images

Block and Inline elements

Tags and Elements | Fork HTML

<head> I am HTML element </head>

Examples: Heading Tags(<h1>..</h1>), List Tags(<ul>..</ul>), Button Tags(<button>..</button>), etc.

<tag_name atrribute_name = "value">

<img src="./img.png" height="300px" width="300px">

The complete list of HTML attributes can be found here .

HTML Global Attributes

<img src="./img.png" height="300px" width="300px" hidden>

The complete list of HTML Global attributes can be found here

Meta Tags | Fork HTML

Meta Tags in Websites

 name: This attribute is used to define the name of the property.

Note: The meta tag also accepts Global Attributes in HTML

HTML <meta> tag

Ways to implement meta tags

Container and Empty Tags

2. Headings: Following tags are used for headings:

 <p>….</p>: When paragraphs are needed to be included, this tag is used

4. HyperLinks: Following tag is used to define a hyperlink in the webpage:

 <ol>…</ol>: This tag is used to create ordered lists.

1. <br>: Inserts a line break in a webpage wherever needed.

This example demonstrates the use of container and empty tags:

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

<p> This is a <br> line break </p>

<h4> Link </h4>

HTML Text Formatting

Formatting the text using various HTML tags

Formatting the text using different tags

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

Using <mark> Tag

Using <sub> & <sup> Tag

Using <small> Tag

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

Using <ins> tag

HTML Link Syntax

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

< a href="url"> Text link </a>

<p>Click on the following link</p>

<a href = "https://www.geeksforgeeks.org">GeeksforGeeks</a>

<p><a href="html_contribute.asp/">GeeksforGeeks Contribute

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.

The appearances of links can be changed by using CSS.

<p>Changing the default colors of links</p>

The Target Attribute in Links

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

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

<a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a>

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

<a href="https://www.geeksforgeeks.org" target="_self">GeeksforGeeks</a>

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

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

<a href="https://www.geeksforgeeks.org" target="_parent">GeeksforGeeks</a>

Using Image as a Link in HTML

The code is <a href=”url”>

<img src=”file address (on device or on web)” alt=”_” style=”width:__ ; height:__ ;

<h3>Using Image as a link</h3>

<img src=”file address (on device or on web)” alt=”_” style=”width: ; height: ;