0% found this document useful (0 votes)

157 views

HTML5 Introduction FC

Uploaded by

aaronot6

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

157 views

HTML5 Introduction FC

Uploaded by

aaronot6

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 189

HTML5 | Introduction

Introduction: HTML stands for Hyper Text Markup Language. It is used to

design web pages using markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web
pages. Markup language is used to define the text document within tag which
defines the structure of web pages. HTML 5 is the fifth and current version of
HTML. It has improved the markup available for documents and has introduced
application programming interfaces(API) and Document Object Model(DOM).
Features:
 It has introduced new multimedia features which supports audio and video
controls by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it
on a new location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data
on web browser.
 Uses SQL database to store data offline.
 Allows to draw various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e. <!doctype html>
 Easy character encoding i.e. <meta charset=”UTF-8″>
Removed elements from HTML 5: There are many elements which are
depreciated from HTML 5 are listed below:
Removed Elements Use Instead Elements

<basefont> CSS

<big> CSS
Removed Elements Use Instead Elements

<center> CSS

<font> CSS

<frame>

<strike> CSS, <s> or <del>

<tt> CSS

New Added Elements in HTML 5:

 <article>: The <article> tag is used to represent an article. More specifically,
the content within the <article> tag is independent from the other content of
the site (even though it can be related).
 <aside>: The <aside> tag is used to describe the main object of the web
page in a shorter way like a highlighter. It basically identifies the content that
is related to the primary content of the web page but does not constitute the
main intent of the primary page. The <aside> tag contains mainly author
information, links, related content and so on.
 <figcaption>: The <figurecaption> tag in HTML is used to set a caption to
the figure element in a document.
 <figure>: The <figure> tag in HTML is used to add self-contained content
like illustrations, diagrams, photos or codes listing in a document. It is related
to main flow but it can be used in any position of a document and the figure
goes with the flow of the document and if remove it then it should not affect
the flow of the document.
 <header>: It contains the section heading as well as other content, such as
a navigation links, table of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML
document. This section contains the footer information (author information,
copyright information, carriers etc). The footer tag are used within body tag.
The <footer> tag is new in the HTML 5. The footer elements require a start
tag as well as an end tag.
 <main>: Delineates the main content of the body of a document or web app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is
used to highlight the part of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in HTML
documents. Websites typically have sections dedicated to navigational links,
which enables user to navigate the site. These links can be placed inside a
nav tag.
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is
initially hidden but could be displayed if the user wishes to see it. This tag is
used to create interactive widget which user can open or close it. The
content of details tag is visible when open the set attributes.
 <summary>: The <summary> tag in HTML is used to define a summary for
the <details> element. The <summary> element is used along with the
<details> element and provides a summary visible to the user. When the
summary is clicked by the user, the content placed inside the <details>
element becomes visible which was previously hidden. The <summary> tag
was added in HTMl 5. The <summary> tag requires both starting and ending
tag.
 <time>: The <time> tag is used to display the human-readable data/time. It
can also be used to encode dates and times in a machine-readable form.
The main advantage for users is that they can offer to add birthday
reminders or scheduled events in their calender’s and search engines can
produce smarter search results.
 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiate a
text from other text that may be formatted in different direction. This tag is
used when a user generated text with an unknown directions.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is
used to define the position within the text which is treated as a line break by
the browser. It is mostly used when the used word is too long and there are
chances that the browser may break lines at the wrong place for fitting the
text.
 <datalist>: The <datalist> tag is used to provide autocomplete feature in the
HTML files. It can be used with input tag, so that users can easily fill the data
in the forms using select the data.
 <keygen>: The <keygen> tag in HTML is used to specify a key-pair
generator field in a form. The purpose of <keygen> element is to provide a
secure way to authenticate users. When a from is submitted then two keys
are generated, private key and public key. The private key stored locally, and
the public key is sent to the server. The public key is used to generate client
certificate to authenticate user for future.
 <output>: The <output> tag in HTML is used to represent the result of a
calculation performed by the client-side script such as JavaScript.
 <progress>: It is used to represent the progress of a task. It is also define
that how much work is done and how much is left to download a things. It is
not used to represent the disk space or relevant query.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web
page using JavaScript. It can be used to draw paths, boxes, texts, gradient
and adding images. By default it does not contains border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video
player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.
Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc can help build beautiful
websites.
Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.
Supported Browsers: It is supported by all modern browsers.
Below examples illustrate the HTML 5 content.
Example 1:

<!DOCTYPE html>

<html>

<head>

h1 {

font-size:50px;

</style>

</head>

<body>

<h1>GeeksforGeeks</h1>

</body>

</html>

Output:

Example 2:

<!DOCTYPE html>

<style>

.GFG {

font-size:40px;

font-weight:bold;

color:green;

body {

text-align:center;

</style>

</head>

<body>

<div class = "GFG">GeeksforGeeks</div>

<aside>

<div>A computer science portal for geeks</div>

</aside>

</body>

</html>

Output:

HTML | Spell Check

 Difficulty Level : Easy
 Last Updated : 11 Aug, 2021
The Spell Check feature in HTML is used to detect grammatical or spelling mistakes in
the text fields.
The Spell Check feature can be applied to HTML forms using the spellcheck attribute.
The spellcheck attribute is an enumerated attribute which defines whether the HTML
element will be checked for errors or not. It can be used with “input” and “textarea” fields
in HTML.
Supported Tags: It supports all HTML elements.
Syntax :
Syntax for spellcheck attribute in an input field in html:
<input type="text" spellcheck="value">
Syntax for spellcheck in a textarea field in html:
<textarea type="text" spellcheck="value"></textarea>
In the above syntax the value assigned to spellcheck will define whether spellcheck will
be enabled or not on the element. The spellcheck attribute has two valid values, which
are:
 True: It defines that the HTML element should be checked for errors.
 False: It defines that the HTML element should not be checked for errors.
When the attribute is not set, it takes the default value which is generally element type
and browser defined. The value can be also be inherited from the ancestral element.
Enabling Spell Check in an HTML Form: To enable spellcheck in an HTML form the
spellcheck attribute is set to “true”. Below is the sample HTML program with enabled
spellcheck.
 Example:1

 HTML

<!DOCTYPE html>

<html>

<body>

<h3>Example of Enabling SpellCheck</h3>

<form>

<p>

<input type="text" spellcheck="true">

</p>
<p>

</p>

<button type="reset">Reset</button>

</form>

</body>

</html>

Output:

Disabling Spell Check in a HTML Form: To disable spellcheck in a HTML form the
spellcheck attribute is set to “false”. Below is the sample HTML program with disabled
spellcheck.
 Example:2

 HTML

<!DOCTYPE html>
<html>

<body>

<h3>Example of Disabling SpellCheck</h3>

<form>

<p>

<input type="text" spellcheck="false">

</p>

<p>

</p>
<button type="reset">Reset</button>

</form>

</body>

</html>

Output:

Supported Browsers: The browser supported by spellcheck attribute are listed below:
 Google Chrome 9.0
 Internet Explorer 11.0
 Firefox
 Opera
 Safari

HTML | Editors
 Difficulty Level : Basic
 Last Updated : 05 Dec, 2018
HTML text editors are used to create and modify web pages. HTML codes can be written
in any text editors including the notepad. One just needs to write HTML in any text
editor and save the file with an extension “.html”. Some of the popular HTML text
editors are given below:
 Notepad
 Notepad++
 Sublime Text 3
 Atom
 GeeksforGeeks IDE
Notepad: Notepad is a simple text editor. It is an inbuilt desktop application available in
Windows OS.
Bracket: Bracket is an open-source software primarily used for Web development. It
provides live HTML, CSS, JavaScript editing functionality.
Sublime Text 3: Sublime is a cross platform code editor tool. It supports all markup
languages.
Atom: Atom is an open source code editor tool for MAC, Linux and Windows.
Steps to write HTML code in Editor:
1. Open any of the text editors of your choice. Here we are using the notepad text
editor.

2. Create new file: File->New File or Ctrl+N.

3. Write HTML code in text editor.

4. Save the file with a suitable name of your choice and .html extension.
5. Open the saved HTML file in your favourite browser (double click on the file, or
right-click – and choose “Open with”).

GeeksforGeeks IDE: It is an online code editor to test the code. It provides the shareable
link to share code with others.

<html>

<head>

<title>HTML Text Editor</title>

<style>

h1 {

color:#009900;

</style>

</head>

<body>

<h1>GeeksforGeeks</h1>
</body>

</html>

HTML Comments
 Difficulty Level : Basic
 Last Updated : 04 Feb, 2021
The comment tag (<!– Comment –>) is used to insert comments in the HTML code. It is
a good practice of coding so that coder and the reader can get help to understand the
code. It is helpful to understand the complex code. The comment tag is useful during the
debugging of codes.
 It is a simple piece of code that is wiped off (ignore) by web browsers i.e, not
displayed by the browser.
 It helps the coder and reader to understand the piece of code used for especially in
complex source code.
Syntax:

Types of HTML Comments: There are three types of comments in HTML which are:
 Single-line comment
 Multi-lines comment
 Using <comment> tag
Single-line comment:
 HTML

<!DOCTYPE html>

<html>

<h1>GeeksforGeeks</h1>

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

</body>

</html>

Output: Here you can see the single-line comment. Single line comment will not display
in the output.

Multi-line comment: Multiple lines can be also used by using the (<!– –>).
 HTML

<!DOCTYPE html>

<html>

<body>

<!-- This is

heading tag -->

<h1>GeeksforGeeks</h1>

<!-- This is

multi-line

comment -->

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

</body>

</html>

Output: Here we can see that in the comment section we have used multiple lines but
still it’s not printed.

Using <comment> tag: There used to be an HTML <comment> tag, but it is not
supported by any modern browser.
 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:

Note: The <comment> tag is not supported by modern browsers.

HTML | Layout
 Difficulty Level : Medium
 Last Updated : 12 Aug, 2021
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>

<div class="head1">GeeksforGeeks</div>

<div class="head2">A computer science portal for

geeks</div>

</header>

<a href="#notification">NOTIFICATIONS</a>

<a href="#login">LOGIN</a>

</div>

<h3>Content section</h3>

</section>

</div>

<footer>Footer Section</footer>

</body>

</html>

Output:
Supported Browser:
 Google Chrome
 Microsoft Edge
 Firefox
 Opera
 Safari
HTML is the foundation of webpages, is used for webpage development by structuring
websites and web apps.
CSS is the foundation of webpages, is used for webpage development by styling websites
and web apps.You can learn CSS from the ground up by following this

HTML Elements
 Difficulty Level : Basic
 Last Updated : 09 Dec, 2021
In this article, we will know the HTML Elements, along with understanding the various
available elements & their syntax through the examples. An HTML element is the
collection of start and end tags with the content inserted in between them.
Syntax:
<tagname > Contents... </tagname>
Supported Tags: HTML Elements supports almost all HTML Tags.
Example 1: In this example <p> is a starting tag, </p> is an ending tag and it contains
some content between the tags, which form an element.
 HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Elements</title>

</head>

<body>

<h2>Welcome To GeeksforGeeks</h2>

<p>Hi Geeks!</p>
</body>

</html>

Output:

HTML elements example

Example 2: This example illustrates the use of the HTML paragraph element.
 HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Elements</title>

</head>

<body>
<p>Welcome to GeeksforGeeks!</p>

</body>

</html>

Output:
Welcome to GeeksforGeeks!
Nested HTML Elements: The HTML element is use inside the another HTML Element
is called nested HTML elements.
Example 3: This example describes the use of the Nested HTML elements. Here, <html>
tag contains the <head> and <body>. The <head> and <body> tag contains another
elements so it is called nested element.
 HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Elements</title>

</head>

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

<h1>GeeksforGeeks</h1>

<p>Computer science portal</p>

</body>

</html>

Output:

Nested HTML element

Necessary to add end tag: It is necessary to add the end tag of an element. Otherwise,
the displayed content may or may not be displayed correctly.
Example 4: This example describes the HTML element by specifying the end tag.
 HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Elements</title>
</head>

<body>

<!-- h1 tag does not contains

end tag -->

<h1>GeeksforGeeks</h1>

<!-- p tag does not contains

end tag -->

<p>Computer science portal</p>

</body>

</html>

Output:

HTML start & end tag example

Empty HTML Elements: HTML Elements without any content i.e, that do not print
anything are called Empty elements. Empty HTML elements do not have an ending tag.
For instance. <br>, <hr>, <link>, <input> etc are HTML elements.
Example 5: In this example <br> tag doesn’t print anything. It is used as a breakline that
breaks the line between <h2> and <p> tag.
 HTML

<!DOCTYPE html>

<html>

<head>

<title>Empty HTML Elements</title>

</head>

<body>

<h2>Welcome To GfG</h2>

<br />

<p>Hello Geeks.</p>

</body>

</html>

Output:
HTML empty element

HTML Heading
 Difficulty Level : Basic
 Last Updated : 09 Dec, 2021
In this article, we will know HTML Heading, & its implementation through the
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 the least.
Syntax:
<h1></h1>
<h3></h3>
<h6></h6>
Importance of Heading:
 Search Engines use headings for indexing the structure and 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>

<head>

<title>Heading Tags</title>
</head>

<body>

<h1>GeeksforGeeks</h1>

<h2>GeeksforGeeks</h2>

<h3>GeeksforGeeks</h3>

<h4>GeeksforGeeks</h4>

<h5>GeeksforGeeks</h5>

<h6>GeeksforGeeks</h6>

</body>

</html>

Output:

HTML Headings

Example 2: This example explains the different HTML heading tags.

 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 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
an end tag. It is basically used to separate content. Please refer to the HTML <hr>
Tag article for further details.
Example: This example explains the HTML Headings with horizontal rules.
 HTML

<!DOCTYPE html>

<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

HTML Paragraphs
 Difficulty Level : Basic
 Last Updated : 09 Dec, 2021
In this article, we will know the HTML Paragraphs, & 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 both 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:
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.
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 does the browser need to change
the lines by the use of 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:
<p align="value">
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 <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

HTML Text Formatting

 Difficulty Level : Basic
 Last Updated : 13 Dec, 2021
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>

<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>

</head>

<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 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>

<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 <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>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>

<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

HTML | Quotations
 Difficulty Level : Easy
 Last Updated : 12 Aug, 2021
The Quotation elements in HTML are used to insert quoted texts in a web page, that is,
portion of texts different from the normal texts in the web page.
Below are some of the most used quotation elements of HTML:

1. <q> element:
The <q> element is used to set a set of text inside the quotation marks. It has both
opening and closing tags.
Example:

 HTML

<!DOCTYPE html>

<html>

<head>

<title>Quotations</title>

</head>
<body>

<h3>GeeksforGeeks</h3>

<p>The quick brown fox jumps over the lazy dog<br></p>

<p><q>The quick brown fox jumps over the lazy dog</q></p>

</body>

</html>

1. Output:

1. <blockquote> element:
The <blockquote> element is also used for quotations in a different way. Instead of
putting the text in quotes, it changes the alignment to make it unique from others. It
has both opening and closing tags.
Example:

 HTML
<!DOCTYPE html>

<html>

<head>

<title>Blockquote</title>

</head>

<body>

<h3>GeeksforGeeks</h3>

<p>The quick brown fox jumps over the lazy dog<br></p>

<p><blockquote>The quick brown fox jumps

over the lazy dog</blockquote></p>

</body>

</html>

1. Output:
1. <address> element:
Using the <address> element, we can define an address in a webpage and the text put
inside the address tag will be emphasized. It has both opening and closing tags.
Example:

 HTML

<!DOCTYPE html>

<html>

<head>

<title>Address</title>

</head>

<body>

<h3>GeeksforGeeks</h3>

<p>Address:<br>

710-B, Advant Navis Business Park,<br>

Sector-142, Noida Uttar Pradesh – 201305</p>

</address>

</body>

</html>
1. Output:

1. <abbr> element:
The <abbr> element is used to define a text as an acronym or abbreviations. The title
attribute can be used to show the full version of the abbreviation/acronym when you
mouse over the <abbr> element. It has both opening and closing tags. This is useful
for browsers and search engines.
Example:

 HTML

<!DOCTYPE html>

<html>

<head>

<title>Abbreviations</title>

</head>

<body>

<h3>GeeksforGeeks</h3>

<p>Welcome to <abbr title="GeeksforGeeks">GfG</abbr></p>

</body>

</html>
1. Output:

1. <bdo> element:
The <bdo> element is used to define a bidirectional override which means that the
text written from right to left or left to right. It has both opening and closing tags. It is
used to over-ride the current text direction.It takes an attribute “rtl” to display the text
from right to left.
Example:

 HTML

<!DOCTYPE html>

<html>

<head>

<title>Bidirectional</title>

</head>

<body>

<h3>GeeksforGeeks</h3>

<p>The quick brown fox jumps over the lazy dog<br></p>

<p><bdo dir="rtl">The quick brown fox jumps

over the lazy dog</bdo></p>

</body>

</html>

1. Output:

1. <cite> element:
This element is used define a title of a work and emphasizes a text.
Example:

 HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>GeeksforGeeks</h3>

<p>The <cite>GeeksforGeeks</cite> is the best site to<br>

to search for articles and practice problems.</p>

</body>

</html>

1. Output:

HTML | Links
 Difficulty Level : Basic
 Last Updated : 12 Aug, 2021
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.

HTML Link Syntax

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.
Text link : The text link
is the visible part of the link.
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 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;

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.
Input:
html

<!DOCTYPE html>

<html>

<body>

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

<p>Click on the image to visit GeeksforGeeks homepage.</p>

<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.

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 | A computer science portal for

geeks.pdf">Download PDF File</a>

</body>

</html>

Output: :

HTML Images
 Difficulty Level : Basic
 Last Updated : 08 Dec, 2021
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.
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 <img> 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.png"/>

</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.png"

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>

<img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/
20190710102234/download3.png"

alt="GeeksforGeeks logo"

width="300"

height="300" />

</body>

</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>
<body>

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

<img src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/
20190710102234/download3.png"

alt="GeeksforGeeks logo"

width="200"

height="200"

title="Logo of GeeksforGeeks" />

</body>

</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.png"

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.png"

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.png"

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.png'

);">

<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.
Abbreviatio
S.No. n File Type Extension

PNG
1. Portable Network Graphics. .png

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

2. JPEG. image. pjp
Abbreviatio
S.No. n File Type Extension

SVG
3. Scalable Vector Graphics. .svg.

GIF
4. Graphics Interchange Format. .gif

ICO
5. Microsoft Icon. .ico, .cur

Animated Portable Network

APNG .apng
6. Graphics.

HTML Tables
 Difficulty Level : Easy
 Last Updated : 15 Dec, 2021
In this article, we will know the HTML Table, various ways to implement it, & will also
understand its usage through the examples. HTML Table is an arrangement of data in
rows and columns, or possibly in a more complex structure. Tables are widely used in
communication, research, and data analysis. Tables are useful for various tasks such as
presenting text information and numerical data. It can be used to compare two or more
items in the tabular form layout. Tables are used to create databases.
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.
 HTML

<!DOCTYPE html>

<table>

<tr>

<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>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</tr>
</table>

</body>

</html>

Output:

Simple HTML Table

Accepted Attributes:
 <table> cellspacing Attribute
 <table> rules Attribute
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 3: This example explains the addition of the border to the HTML Table.
 HTML

<!DOCTYPE html>

<html>

table,

th,

td {

border: 1px solid black;

</style>

</head>

<body>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</tr>

</table>

</body>

</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 4: 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>
<body>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>
<td>41</td>

</tr>

</table>

</body>

</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 5: This example describes the addition of Table cell padding in HTML.
 HTML

<!DOCTYPE html>

<style>

table,

th,

td {

border: 1px solid black;

border-collapse: collapse;

th,

td {

padding: 20px;

</style>

</head>

<body>

<tr>
<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</tr>

</table>
</body>

</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 6: This example explains the text-align property where the text is aligned to the
left.
 HTML

<style>

table,

th,

td {

border: 1px solid black;

border-collapse: collapse;

th,

td {

padding: 20px;

th {

text-align: left;

</style>

</head>
<body>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Sam</td>
<td>Watson</td>

</tr>

</table>

</body>

</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 7: 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>

<body>

<tr>
<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</tr>

</table>
</body>

</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 8: 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>

<tr>

<th colspan="2">Telephone</th>

</tr>
<tr>

<td>Vikas Rawat</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 9: This example describes the use of the rowspan attribute in HTML.
 HTML

<!DOCTYPE html>

<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>

<tr>

<td>Vikas Rawat</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</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 10: 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>

<caption>DETAILS</caption>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>
<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</tr>

</table>

</body>

</html>

Output:
Adding the caption using the <caption> 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 11: 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>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>

<tr>

<td>Watson</td>

</table>

<br />

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Priya</td>

<td>Sharma</td>

</tr>

<tr>

<td>Singh</td>

</tr>
<tr>

<td>Watson</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 12: 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

HTML Lists
 Difficulty Level : Easy
 Last Updated : 09 Dec, 2021
In this article, we will know the HTML List, along with understanding its types, 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 in 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>

<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:

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>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>

<head>

</head>

<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>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>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>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>

<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>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., list inside another
list.
 HTML

<!DOCTYPE html>

<html>

<body>

<h1>GeeksforGeeks</h1>

<h2>Nested Unordered List</h2>

<p>GeeksforGeeks courses List:</p>

<ul>

<ul>
<li>Array</li>

<li>Linked List</li>

<li>stack</li>

<li>Queue</li>

</ul>

<li>Web Technologies</li>

<ul>

<li>JavaScript</li>

</ul>

<li>Aptitude</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:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
 compact: It defines the list should be compacted (compact attribute is not supported
HTML5. Use CSS instead.).
 reversed: It defines that the order will be descending.
 start: It defines that 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
numeric, alphabetic, or roman numbers.
Example: This example illustrates the use of the reverse attribute, control list counting &
type attribute.
 HTML
<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 style="color: green">GeeksforGeeks</h1>

<p>reversed attribute</p>

</ol>

<p>start attribute</p>
<ol start="5">

</ol>

<p>type attribute</p>

</ol>

</body>

</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>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>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with capital alphabetic item maker

Example 3: Type=”a”, this list items will be numbered with lowercase letters.
 HTML

<!DOCTYPE html>

<h2>Ordered List with Lowercase Letters</h2>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with small alphabetic item maker

Example 4: Type=”I”, this list items will be numbered with uppercase roman numbers.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<li>Bread</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List with uppercase roman numbers

Example 5: Type=”i”, this list items will be numbered with lowercase roman numbers.
 HTML
<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<li>Bread</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>

</ol>

</body>
</html>

Output:

Nested Ordered List

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>

<dd>- 1 ltr Tetra Pack</dd>

</dl>

</body>

</html>

Output:

Description List

HTML Block and Inline Elements

 Difficulty Level : Easy
 Last Updated : 08 Dec, 2021
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.
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 ie, 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:
 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>

<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

HTML Iframes
 Difficulty Level : Medium
 Last Updated : 09 Dec, 2021
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">

<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>

<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>

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

<p>Content goes here</p>

<iframe src=

"https://ide.geeksforgeeks.org/tryit.php"

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>

<p>Content goes here</p>

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>

<h1>GeeksforGeeks</h1>

<h2>HTML iframe Tag</h2>

<p>Click the link text</p>

width="350"

src=

"https://media.geeksforgeeks.org/wp-content/uploads/
20210910170539/gfg-221x300.png"

name="iframe_a">

</iframe>

<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

Where to put JavaScript in an HTML
Document ?
 Difficulty Level : Basic
 Last Updated : 13 Mar, 2019
JavaScript in body or head: Scripts can be placed inside the body or the head section of
an HTML page or inside both head and body.
JavaScript in head: A JavaScript function is placed inside the head section of an HTML
page and the function is invoked when a button is clicked.
Examples:

<!DOCTYPE html>

<html>

<head>

function gfg() {

document.getElementById("demo").innerHTML = "Geeks For

Geeks";

</script>

</head>

<body>
<h2>JavaScript in Head</h2>

<p id="demo" style="color:green;">geeksforgeeks.</p>

<button type="button" onclick="gfg()">click it</button>

</body>

</html>

Output:
Before clicking the button

After clicking the button

JavaScript in body: A JavaScript function is placed inside the body section of an HTML
page and the function is invoked when a button is clicked.
Example:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript in Body</h2>
<p id="demo">geeksforgeeks.</p>

<button type="button" onclick="gfg()">Try it</button>

function gfg() {

document.getElementById("demo").innerHTML = "Geeks
For Geeks";

</script>

</body>

</center>

</html>

Output:
Before clicking the button

After click on button

External JavaScript: JavaScript can also be used as external files. JavaScript files have
file extension .js . To use an external script put the name of the script file in the src
attribute of a script tag. External scripts cannot contain script tags.
Example:
<!DOCTYPE html>

<html>

<body>

<h2>External JavaScript</h2>

<p id="demo">Geeks For Geeks.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>

</html>

Output before clicking:

Output after clicking:

Advantages of External JavaScript:

 Cached JavaScript files can speed up page loading
 It makes JavaScript and HTML easier to read and maintain
 It separates the HTML and JavaScript code
JavaScript | Statements
 Difficulty Level : Basic
 Last Updated : 25 Mar, 2019
The programming instructions written in a program in a programming language are
known as statements.
Order of execution of Statements is the same as they are written.
1. Semicolons:
 Semicolons separate JavaScript statements.
 Semicolon marks the end of a statement in javascript.
Example:

<!DOCTYPE html>

<html>

<body>

<h2>Welcome</h2>

var a, b, c;

// Statement 2

a = 2;

// Statement 3

b = 3;

// Statement 4

c = a + b;

document.getElementById(

"geek").innerHTML =

"The value of c is " + c + ".";

</script>

</body>
</html>

Output:

 Multiple statements on one line are allowed if they are separated with a semicolon.
a=2;b=3;z=a+b;
2. Code Blocks:
JavaScript statements can be grouped together inside curly brackets. Such groups are
known as code blocks. The purpose of grouping is to define statements to be executed
together.
Example:JavaScript function

<!DOCTYPE html>

<html>

<body>

<p>Welcome</p>

<button type="button"

onclick="myFunction()">

Click Me!
</button>

function myFunction() {

document.getElementById(

"geek1").innerHTML = "Hello";

document.getElementById(

"geek2").innerHTML =

"How are you?";

</script>

</body>
</html>

Output:
Before Click:

After Click:

3. White Space:
 Javascript ignores multiple white spaces.
Javascript would treat following 2 statements as same:
Example:
var a="Hello Geek";
var a = "Hello Geek";
4. Line Length and Line Breaks:
Javascript code preferred line length by most programmers is upto 80 characters.
The best place to break a code line in Javascript, if it doesn’t fits, is after an
operator.
Example:
5. document.getElementById("geek1").innerHTML =
6. "Hello Geek!";
7. Keywords:
Keywords are reserved words and cannot be used as variable name.
A Javascript keyword tells about what kind of operation it will perform.
Some commonly used keywords are:
 break: This is used to terminate a loop or switch.
 continue: This is used to skip a particular iteration in a loop and move to next
iteration.
 do…. while: In this the statements written within do block are executed till the
condition in while is true.
 for: It helps in executing a block of statements till the condition is true.
 function: This keyword is used to declare a function.
 return: This keyword is used to exit a function.
 var: This keyword is used to declare a variable.
 switch: This helps in executing a block of codes depending on different cases.

Daniel Correa - Paola Vallejo - Practical Laravel Develop Clean MVC Web Applications (2022)
No ratings yet
Daniel Correa - Paola Vallejo - Practical Laravel Develop Clean MVC Web Applications (2022)
118 pages
HTML Tags and Attributes
100% (1)
HTML Tags and Attributes
16 pages
Introduction To HTML+CSS+Javascript
100% (1)
Introduction To HTML+CSS+Javascript
23 pages
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
Splunk Fundamentals 1 Lab Exercises
No ratings yet
Splunk Fundamentals 1 Lab Exercises
9 pages
Chapter V HTML 5 and Features - 220110 - 171047
No ratings yet
Chapter V HTML 5 and Features - 220110 - 171047
11 pages
HTML Unit-1
No ratings yet
HTML Unit-1
142 pages
Solved QB UNIT1
No ratings yet
Solved QB UNIT1
29 pages
Hyper Text Markup Language
No ratings yet
Hyper Text Markup Language
8 pages
HTML Tags
No ratings yet
HTML Tags
14 pages
IWP MQP Solpdf
No ratings yet
IWP MQP Solpdf
49 pages
232 899935 QuestionBankAnswersUNIT1
No ratings yet
232 899935 QuestionBankAnswersUNIT1
11 pages
FSD
No ratings yet
FSD
32 pages
Web Technology HTML, SGML
No ratings yet
Web Technology HTML, SGML
36 pages
Before Mids
No ratings yet
Before Mids
8 pages
WAD LAB Manual
0% (1)
WAD LAB Manual
96 pages
HTML Notes
No ratings yet
HTML Notes
40 pages
Unit 2WD
No ratings yet
Unit 2WD
8 pages
FSAD_Notes_Complete
No ratings yet
FSAD_Notes_Complete
210 pages
HTML 05
No ratings yet
HTML 05
55 pages
70-480 Exam Notes
No ratings yet
70-480 Exam Notes
19 pages
HTML Basics Grade X Handout
No ratings yet
HTML Basics Grade X Handout
13 pages
Responsive Web Design
No ratings yet
Responsive Web Design
114 pages
HTML Notes
No ratings yet
HTML Notes
152 pages
CMA - Unit1 Sol QP
No ratings yet
CMA - Unit1 Sol QP
30 pages
UNIT-IV EComm-WT-UG
No ratings yet
UNIT-IV EComm-WT-UG
30 pages
Function of Clothing
100% (1)
Function of Clothing
7 pages
Https
No ratings yet
Https
21 pages
HTML 5 PHP & SQL
No ratings yet
HTML 5 PHP & SQL
99 pages
HTML 50 - Q&a - 1
No ratings yet
HTML 50 - Q&a - 1
53 pages
Introduction To HTML - Elements and Structure Cheatsheet - Codecademy
No ratings yet
Introduction To HTML - Elements and Structure Cheatsheet - Codecademy
10 pages
HTML Css Notes
No ratings yet
HTML Css Notes
7 pages
web tech l4
No ratings yet
web tech l4
14 pages
HTML_CSS
No ratings yet
HTML_CSS
73 pages
Unit - 2 Half HTML
No ratings yet
Unit - 2 Half HTML
20 pages
Mini Proj Print
No ratings yet
Mini Proj Print
42 pages
Lecture 3
No ratings yet
Lecture 3
43 pages
Lesson1_Advanced Web Design_part1
No ratings yet
Lesson1_Advanced Web Design_part1
46 pages
HTML Meta Tags
No ratings yet
HTML Meta Tags
8 pages
Language of Web Page - HTML (Hypertext Markup Language) The Language of The Web
No ratings yet
Language of Web Page - HTML (Hypertext Markup Language) The Language of The Web
77 pages
HTML 5 and CSS3
No ratings yet
HTML 5 and CSS3
40 pages
HTML, JS, PHP, Ajax
No ratings yet
HTML, JS, PHP, Ajax
218 pages
SQL Thesis
No ratings yet
SQL Thesis
12 pages
WAD UNIT II Notes
No ratings yet
WAD UNIT II Notes
51 pages
WEB Manual
No ratings yet
WEB Manual
35 pages
Industrial Training Report
No ratings yet
Industrial Training Report
29 pages
Ex No:1 Simple Web Design Using HTML: 17CS2025 - Web Technology Lab URK17CS
No ratings yet
Ex No:1 Simple Web Design Using HTML: 17CS2025 - Web Technology Lab URK17CS
4 pages
HTML TAGS
No ratings yet
HTML TAGS
31 pages
HTML
No ratings yet
HTML
9 pages
HTML Tags
No ratings yet
HTML Tags
7 pages
Vs Codeis a Source Code Editor (4)
No ratings yet
Vs Codeis a Source Code Editor (4)
27 pages
What Is HTML?
No ratings yet
What Is HTML?
44 pages
Unit - 3: 1.what Is A Anchor Tag in HTML?
No ratings yet
Unit - 3: 1.what Is A Anchor Tag in HTML?
12 pages
HTML Word Document
No ratings yet
HTML Word Document
18 pages
Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element
No ratings yet
Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element
4 pages
Tle 10 Ict Quarter 2 Learning Resources w1-w5
No ratings yet
Tle 10 Ict Quarter 2 Learning Resources w1-w5
66 pages
Cours2 HTML
No ratings yet
Cours2 HTML
13 pages
1 Intro To HTML
No ratings yet
1 Intro To HTML
30 pages
Top 100 HTML Interview Questions and Answers 2023
No ratings yet
Top 100 HTML Interview Questions and Answers 2023
31 pages
Basics of HTML and Css From Scratch PDF
No ratings yet
Basics of HTML and Css From Scratch PDF
20 pages
HTML Unleashed: The Complete Guide
From Everand
HTML Unleashed: The Complete Guide
Pen Hur
No ratings yet
100 Questions on Selenium Testing
No ratings yet
100 Questions on Selenium Testing
33 pages
Final Project Report
No ratings yet
Final Project Report
48 pages
ITSU2004 Systems Analysis & Design: Case Study
No ratings yet
ITSU2004 Systems Analysis & Design: Case Study
7 pages
KoBo Training Package - December2018
No ratings yet
KoBo Training Package - December2018
77 pages
Pertemuan 9
No ratings yet
Pertemuan 9
5 pages
Android Practical 1 & 2
No ratings yet
Android Practical 1 & 2
6 pages
The A-Z of Web Scraping in 2020 (A How-To Guide)
No ratings yet
The A-Z of Web Scraping in 2020 (A How-To Guide)
18 pages
Presentation On Modern IT
No ratings yet
Presentation On Modern IT
12 pages
500-02845V3-A - All in One IPC Realse Note V1.000.HW01.3.20200326
No ratings yet
500-02845V3-A - All in One IPC Realse Note V1.000.HW01.3.20200326
8 pages
URS Admission Online Application Step by Step Procedure URBO
No ratings yet
URS Admission Online Application Step by Step Procedure URBO
7 pages
Yori - Blockchain Full Stack Engineer
No ratings yet
Yori - Blockchain Full Stack Engineer
3 pages
Empowerment Tech Week 5-6 Answer Sheet
No ratings yet
Empowerment Tech Week 5-6 Answer Sheet
14 pages
VMDR - Lab Tutorial Supplement
No ratings yet
VMDR - Lab Tutorial Supplement
59 pages
Blue Prism 7.0 - Web APIs
No ratings yet
Blue Prism 7.0 - Web APIs
29 pages
BEIS Uploading of School Profile Facility
No ratings yet
BEIS Uploading of School Profile Facility
29 pages
PACiS Training Manual PDF
No ratings yet
PACiS Training Manual PDF
104 pages
VDR Explorer, User Manual, DBS00294-31
No ratings yet
VDR Explorer, User Manual, DBS00294-31
90 pages
Client Side Scripting (CSS) (22519) Semester - V (CO) : A Laboratory Manual For
No ratings yet
Client Side Scripting (CSS) (22519) Semester - V (CO) : A Laboratory Manual For
45 pages
Sekurak Offline 2 Final
No ratings yet
Sekurak Offline 2 Final
65 pages
DAM Process Document
No ratings yet
DAM Process Document
77 pages
9.C1SE.05_Test_Plan_BEACON_ver2.0 (1)
No ratings yet
9.C1SE.05_Test_Plan_BEACON_ver2.0 (1)
11 pages
RM 191 - TUTUNARU - VLADINA - Lucrarea de Laborator Nr. 1
No ratings yet
RM 191 - TUTUNARU - VLADINA - Lucrarea de Laborator Nr. 1
8 pages
amazon.web.services.lead2pass.dop-c02.rapidshare.2024-jul-05.by.truman.98q.vce
No ratings yet
amazon.web.services.lead2pass.dop-c02.rapidshare.2024-jul-05.by.truman.98q.vce
13 pages
Unit 3
No ratings yet
Unit 3
101 pages
(OPW) Manish Kumar Gond
No ratings yet
(OPW) Manish Kumar Gond
264 pages
MVC PDF
No ratings yet
MVC PDF
21 pages
MLIS Assignments-July 2020-Jan 2021
No ratings yet
MLIS Assignments-July 2020-Jan 2021
29 pages
DevNet Associate (Version 1.0) - Module 1 Exam Answers PDF
No ratings yet
DevNet Associate (Version 1.0) - Module 1 Exam Answers PDF
10 pages