HTML

[Link]

Introduction to HTML

HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications.

Hyper Text:
 Hyper Text simply means "Text within Text." A text has a link within it, is a
hypertext.
 Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext.
 Hyper Text is a way to link two or more web pages (HTML documents) with
each other.

Markup language:
 A markup language is a computer language that is used to apply layout and
formatting conventions to a text document.
 Markup language makes text more interactive and dynamic.
 It can turn text into images, tables, links, etc.

©Topperworld
HTML

Web Page:
 A web page is a document which is commonly written in HTML and
translated by a web browser.
 A web page can be identified by entering an URL. A Web page can be of the
static or dynamic type.
 With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web
pages with the help of styling, and which looks in a nice format on a web
browser. An HTML document is made of many HTML tags and each HTML tag
contains different content.

 History of HTML
In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing
an internet based hypertext system.

Tim Berners-Lee is known as the father of

HTML. The first available description of
HTML was a document called "HTML
Tags" proposed by Tim in late 1991. The
latest version of HTML is HTML5, which
we will learn later in this tutorial.

©Topperworld
HTML

 HTML Versions

 Characteristics of HTML:
 Easy to understand: It is the most straightforward language you can
say, very easy to grasp this language and easy to develop.

 Flexibility: This language is so much flexible that you can create

whatever you want, a flexible way to design web pages along with the
text.

 Linkable: You can make linkable text like users can connect from one
page to another page or website through these characteristics.

 Limitless features: You can add videos, GIFs, pictures, or sound

anything you want that will make the website more attractive and
understandable.

 Support: You can use this language to display the documents on any
platform like Windows, Linux, or Mac.

 Not a Programming Language: HTML is not a programming

language as it is only concerned with presenting the information on the
web. It is not used to program any logic but to give structure and
semantically meaning to our website. Though we can link JavaScript code
to it which is a programming language.

©Topperworld
HTML

 Language Support: HTML can support various other languages

like JavaScript, Ruby, PHP, Perl, and many more. You can also able to run
embed python during the runtime.

 Advantages of HTML:
1) HTML is easy to learn, easy to apply and it’s totally free you will just
need a text editor and a browser.
2) HTML is supported by all the browsers and it is the most friendly
search engine.
3) HTML can easily integrate with other languages and is easy to
develop.
4) It is the basic of all programming languages and the lightest language
ever.
5) In HTML, the display changes frequently depending on the window
size or the device size making it comfortable to read by the user.

 Disadvantages of HTML:
 HTML can be used to create only static Web-page, it can not create
dynamic web-page.
 There is a lack of security in HTML.
 Creating a simple Web-page required so many tags.
 HTML language is not centralised i.e. all the web pages that are
connected, you have to design them separately else need to use CSS.
 HTML becomes complex when you try to create a huge website.

 HTML Basic Structure of Web Page

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

©Topperworld
HTML

 Description of HTML Example

 <!DOCTYPE>: It defines the document type or it instruct the browser
about the version of HTML.
 <html > :This tag informs the browser that it is an HTML document.
Text between html tag describes the web document. It is a container for
all other elements of HTML except <!DOCTYPE>
 <head>: It should be the first element inside the <html> element,
which contains the metadata(information about the document). It must
be closed before the body tag opens.
 <title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed
inside the head tag and should close immediately. (Optional)
 <body> : Text between body tag describes the body content of the
page that is visible to the end user. This tag contains the main content of
the HTML document.

©Topperworld
HTML

 <h1> : Text between <h1> tag describes the first level heading of the
webpage.
 <p> : Text between <p> tag describes the paragraph of the webpage.

©Topperworld
HTML

[Link]

Comments

The comment tag ( ) 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 useful to understand steps of the complex code. The comment tag is
helpful while 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:

<!-- Comments here -->

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
Single line comment is given inside the ( <!– comment –> ) tag.

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>

<body>
<!--This is heading Tag, It wont be displayed by the browser -->

<h1>Topper World</h1>

<!--This is single line comment,It wont be displayed by the

browser -->

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

</body>

</html>

Output:

©Topperworld
HTML

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

Example:
<!DOCTYPE html>
<html>
<body>
<!-- This is
heading tag -->

<h1>Topper World</h1>
<!-- This is
multi-line
comment -->

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

</body>
</html>

Output:

©Topperworld
HTML

 Using <comment> tag

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

Example:
<!DOCTYPE html>
<html>
<body>
<comment>This is heading tag</comment>

<h1>Topper World</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.

©Topperworld
HTML

[Link]

Layout

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

 divs have a special class/id associated with them.

<div class = "header"> ..... </div>

<div class = "section"> ..... </div>
<div class = "footer"> ..... </div>

©Topperworld
HTML

 Page Layout Information

 Header: The part of the front end which is used at the top of the page.
<header> tag is used to add a header section on web pages.s

Syntax:
<header>
<h1> ----- </h1>
<h2> ----- </h2>
----------------
----------------
</header>

 Navigation bar: The navigation bar is the same as the menu list. It is
used to display the content information using hyperlinks. <nav> tag is
used to add the nav section(nav elements) in web pages.

Syntax:
<nav>
<ul>
<li> ..... </li>
<li> ..... </li>
</ul>
</nav>

 Index / Sidebar: It holds additional information or advertisements and

is not always necessary to be added to the page.

 Content Section: The content section is the central part where

content is displayed.<main> tag is used to add the main content of the
webpages.

©Topperworld
HTML

 Footer: The footer section contains the contact information and other
query related to web pages. The footer section is always put on the
bottom of the web pages. The <footer> tag sets the footer on web pages.

Syntax:
<footer>
.....
</footer>

Example:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Layout</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

©Topperworld
HTML

<main>
<h2>Main Content</h2>
<p>This is the main content section of
the page.</p>
</main>

<footer>
<p>&copy; 2023 Your Website</p>
</footer>
</body>
</html>

Output:

©Topperworld
HTML

[Link]

Element

An HTML element is a 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.

 HTML Element:
The HTML element consists of 3 parts.
 Opening tag: It is used to tell the browser where the content material
starts.
 Closing tag: It is used to tell the browser where the content material
ends.
 Content: It is the actual content material inside the opening and
closing tags..

Example:

©Topperworld
HTML

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

<!DOCTYPE html>
<html>

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

<body>
<h2>Welcome To Topper World </h2>

<p>Hi Kritika!</p>

</body>
</html>

Output:

©Topperworld
HTML

[Link]

Headings

 An HTML heading tag is used to define the headings of a page. There are
six levels of headings defined by HTML.
 These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the
highest level and h6 being the least.
 <h1> is used for the main heading. (Biggest in size)
 <h2> is used for subheadings, if there are further sections under the
subheadings then the
 <h3> elements are used.
 <h6> for the small heading (smallest one).
 Browsers display the contents of headings in different sizes. The exact size
at which each browser shows the heading can vary slightly. Users can also
adjust the size of the text in their browser.

Syntax:
// the 'h' inside the tag should be in small case only.
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>

©Topperworld
HTML

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

Example:

<h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>

Output:

Heading no. 1
Heading no. 2
Heading no. 3

Heading no. 4

Heading no. 5

Heading no. 6

©Topperworld
HTML

 Horizontal rule
The <hr> tag which stands for the horizontal rule is used to define a
thematic break in an HTML page. The <hr> tag is an empty tag, and it does
not require any end tag. It is basically used to separate content.
Example:
<!DOCTYPE html>

<html>

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

<!-- hr Tag is used here-->

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

<!-- hr Tag is used here-->

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

</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

Paragraphs

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

Syntax:
<p> Content </p>

Example:

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

<p>This is second paragraph.</p>
<p>This is third paragraph.</p>

Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

 Key Points:
 As already mentioned, the<p>tag automatically adds space before and
after any paragraph, which is basically margins added by the browser.

©Topperworld
HTML

 If a user adds multiple spaces, the browser reduces them to a single

space.

 If a user adds multiple lines, the browser reduces them to a single line.

 By default, the display of the Paragraph element is set to “block” which

you can change using CSS. This means that if you add another paragraph
to the webpage the next paragraph will be inserted in the next line on the
webpage.

 Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra
spaces and extra line while displaying the page. The browser counts
number of spaces and lines as a single one.

Example:

<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces but I know, Browser will ignore it.

</p>
<p>
ou cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>

©Topperworld
HTML

Output:
I am going to provide you a tutorial on HTML and hope
that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will

ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

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

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Use of line break with pragraph tag</h2>
<p><br>Papa and mama, and baby and Dot,
<br>Willie and me?the whole of the lot
<br>Of us all went over in Bimberlie's sleigh,
<br>To grandmama's house on Christmas day.

©Topperworld
HTML

</p>
</body>
</html>

Output:

 <hr> tag
An HTML <hr> tag is used to apply a horizontal line between two
statements or two paragraphs. Following is the example which is showing
use of <hr> tag with paragraph.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
©Topperworld
HTML

<h2> Example to show a horizontal line with paragra

phs</h2>
<p> An HTML hr tag draw a horizontal line and separate two p
aragraphs with that line.<hr> it will start a new paragraph.
8. </p>
</body>
</html>

Output:

©Topperworld
HTML

[Link]

Text Editor

 An HTML file is a text file, so to create an HTML file we can use any text
editors.
 Text editors are the programs which allow editing in a written text, hence
to create a web page we need to write our code in some text editor.
 There are various types of text editors available which you can directly
download, but for a beginner, the best text editor is Notepad (Windows) or
TextEdit (Mac).
 After learning the basics, you can easily use other professional text editors
which are, Notepad++, Sublime Text, Vim, etc..

 Steps to write HTML code in Editor:

Step 1:Open any of the text editors of your choice. Here we are using
the notepad text editor.

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

©Topperworld
HTML

Step 3:Write HTML code in text editor.

Step 4:Save the file with a suitable name of your choice and
a .html extension.

©Topperworld
HTML

Step 5: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have
saved the file and then either double-click on file or click on open with option

©Topperworld
HTML

[Link]

Table

 HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
 We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements.
 In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
 HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the page .

 HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for

formatting.

<col> It is used with <colgroup> element to specify column properties

for each column.

©Topperworld
HTML

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

Example:
<table>

<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>

<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>

<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>

<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>

©Topperworld
HTML

<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>

</table>

Output:

 HTML Table with Border

There are two ways to specify border for HTML tables.

1) By border attribute of table in HTML

2) By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is
not recommended now.

©Topperworld
HTML

Example:

<table border="1">

<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th></tr>
<tr>

<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>

<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>

<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>

</table>

©Topperworld
HTML

2) CSS Border property

It is now recommended to use border property of CSS to specify border in
table.

Example:

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

 HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1) By cellpadding attribute of table in HTML

2) By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is

recommended to use CSS. So let's see the code of CSS.

Example:

<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

List

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

the data or any information on web pages in the ordered or unordered
form.

 For instance, to purchase the items, we need to prepare a list that can
either be ordered or unordered list which helps us to organize the data &
easy to find the item.

 Types of lists
HTML Lists are used to specify lists of information. All lists may contain one or
more list elements. There are three different types of HTML lists:

 Ordered List or Numbered List (ol)

 Unordered List or Bulleted List (ul)
 Description List or Definition List (dl)

 HTML Ordered List

HTML Ordered List or Numbered List displays elements in numbered format.
The HTML ol tag is used for ordered list.

We can use ordered list to represent items either in numerical order format or
alphabetical order format, or any format where an order is emphasized.

There can be different types of numbered list:

 Numeric Number (1, 2, 3)

 Capital Roman Number (I II III)
 Small Romal Number (i ii iii)

©Topperworld
HTML

 Capital Alphabet (A B C)
 Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description

Type This is the default type. In this type, the list items are numbered with
"1" numbers.

Type "I" In this type, the list items are numbered with upper case roman
numbers.

Type "i" In this type, the list items are numbered with lower case roman
numbers.

Type In this type, the list items are numbered with upper case letters.
"A"

Type In this type, the list items are numbered with lower case letters.
"a"

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 in HTML5. Use CSS instead.).

©Topperworld
HTML

 reversed: It defines that the order will be descending.

This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5
version. If you use the reversed attribute with tag then it will numbered
the list in descending order (7, 6, 5, 4......1).

Example:

1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

 start: It defines from which number or alphabet the order will start.
The start attribute is used with ol tag to specify from where to start the list
items.

©Topperworld
HTML

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with
"V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

Example:
1. <ol type="i" start="5">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

 type: It defines which type(1, A, a, I, and i) of the order you want in your
list of numeric, alphabetic, or roman numbers.
Example:

<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

Output:
1. Aries
2. Bingo
3. Leo
4. Oracle

©Topperworld
HTML

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

HTML Unordered List or Bulleted List displays elements in bulleted format . We

can use unordered list where we do not need to display items in any particular
order. The HTML ul tag is used for the unordered list. There can be 4 types of
bulleted list:

 disc
 circle
 square
 none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked
with bullets.

Type "circle" In this style, the list items are marked with circles.

Type In this style, the list items are marked with squares.
"square"

Type "none" In this style, the list items are not marked .

Syntax:
<ul> list of items </ul>

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

©Topperworld
HTML

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

<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>

Output:

o Aries
o Bingo
o Leo
o Oracle

 HTML Description List

HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of
terms or other name-value list.

The HTML definition list contains following three tags:

1) <dl> tag defines the start of the list.

©Topperworld
HTML

2) <dt> tag defines a term.

3) <dd> tag defines the term definition (description).

Syntax:
<dl> Contents... </dl>

Example:

<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>

 HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside
a numbered list then such type of list will called as nested list.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with thier capital</p>

©Topperworld
HTML

<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>

</li>
<li>Rajasthan <ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>

©Topperworld
HTML

</ol>
</body>
</html>

Output:

©Topperworld
HTML

[Link]

Semantics

Semantics defines the meaning of words and phrases, i.e.

Semantic elements= elements with a meaning. Semantic elements have a

simple and clear meaning for both, the browser and the developer.

HTML tags are classified in two types.

 Semantic
 Non-Semantic

 Semantic Elements
Semantic elements have meaningful names which tell about the 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 instruct the browser on how to
treat them.

 Why to use semantic elements?

In HTML4, developers have to use their own id/class names to style elements:
header, top, bottom, footer, menu, navigation, main, container, content,
article, sidebar, topnav, etc.

This is so difficult for search engines to identify the correct web page content.
Now in HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier. It now allows data to be shared and reused across
applications, enterprises, and communities."

Semantic elements can increase the accessibility of your website, and also
helps to create a better website structure.

©Topperworld
HTML

 Semantic Elements in HTML

Index Semantic Description

Tag

1. <article> Defines an article

2. <aside> Defines content aside from the page content

3. <details> Defines additional details that the user can view or

hide

4. <figcaption> Defines a caption for a <figure> element

5. <figure> Specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc.

6. <footer> Defines a footer for a document or section

7. <header> Specifies a header for a document or section

8. <main> Specifies the main content of a document

9. <mark> Defines marked/highlighted text

10. <nav> Defines navigation links

11. <section> Defines a section in a document

12. <summary> Defines a visible heading for a <details> element

13. <time> Defines a date/time

©Topperworld
HTML

 Some important semantic elements in HTML5

 HTML5 <article> Element
HTML <article> element defines article content within a document, page,
application, or a website.

It can be used to represent a forum post, a magazine, a newspaper article,

or a big story.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Short Article Example</title>
</head>
<body>
<article>
<h1>Introduction to HTML</h1>
<p>HTML stands for HyperText Markup Language and is the
standard markup language for creating web pages.</p>
<p>It provides the structure of a web page by using elements
like headings, paragraphs, links, and more.</p>
</article>
</body>
</html>

©Topperworld
HTML

Output:

 HTML5 <aside> Element

The <aside> element represent the content which is indirectly giving
information to the main content of the page.

It is frequently represented as a sidebar.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Aside Example</title>
</head>
<body>
<h1>Main Content</h1>
<p>This is the main content of the web page.</p>

<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>

©Topperworld
HTML

</ul>
</aside>
</body>
</html>

Output:

 HTML5 <section> Element

The <section> element is used to represent the standalone section within
an HTML document.

A page can have various sections and each section can contain any content,
but headings for each section is not mandatory.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Section Example</title>
</head>
<body>
<section>

©Topperworld
HTML

<h1>About Us</h1>

<p>We are a small company dedicated to providing

high-quality products to our customers.</p>

</section>
<section>

<h1>Our Products</h1>
<p>We offer a wide range of products, including
electronics, fashion, and home goods.</p>

</section>
</body>

</html>

©Topperworld
HTML

[Link]

Block and Inline 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.

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

1) <h1>-<h6> : This element is used for including headings of different
sizes ranging from 1 to 6.

2) <div>: This is a container tag and is used to make separate divisions of

content on the web page.

3) <hr>: This is an empty tag and is used for separating content by

horizontal lines.

4) <li>: This tag is used for including list items of an ordered or

unordered list.

5) <ul>: This tag is used to make an unordered list.

6) <ol>: This tag is used to make an ordered list.

7) <p>: This tag is used to include paragraphs of content in the webpage.

©Topperworld
HTML

8) <table>: This tag is used for including the tables in the webpage when
there is a need for tabular data.

HTML Semantic block elements:

1. <header>: This tag is used for including all the main things of the
webpage like navbar, logos, and heading of the webpage.

2. <nav>: This tag helps to navigate through different sections by

including different blocks of hyperlinks in the webpage.

3. <footer>: This contains all information about the authorization,

contact, and copyright details of the webpage.

4. <main>: The main content of the webpage resides in this tag.

5. <section> : This is used separate different sections in the webpage.

6. <article>: This tag is used to include different independent articles on

the webpage.

7. <aside>: This tag is used to mention details of the main content aside.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p { background-color: #8A55; }
</style> </head>
<body>
<p>This paragraph is a block
level element; its background has been colored to display the
paragraph's parent element.</p>
</body>
</html>

©Topperworld
HTML

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.

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.highlight{
background-color:#efefef}
</style>
</head>
<body>
<div>It is a demo span <span class="highlight">inline
element</span>;
whose span is an highlighted with a grey color indicatin
g that it is an inline tag
</div>
</body>
</html>

Output:

 Inline Block Elements

The display value of inline-block works similarly to inline with one exception:
the height and width of that element become modifiable.

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<style>
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
color:white;
border: 1px solid blue;
background-color: blue;
}
</style>
</head>
<body>
<div>This is an example of inline-
block element with a span colored as blue <span class="b">I
nline-Block</span> </div>
</body>
</html>

Output:

©Topperworld
HTML

 Difference between Inline and Block elements

Inline Elements Block Elements

Inline elements occupy only Block Elements occupy the full width
sufficient width required. irrespective of their sufficiency.

Inline elements don’t start in a

Block elements always start in a line.
new line.

Inline elements allow other Block elements doesn’t allow

inline elements to sit behind. other elements to sit behind

Inline elements don’t have top Block elements have top and bottom
and bottom margin margin.

©Topperworld
HTML

[Link]

Iframes

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

©Topperworld
HTML

 Attributes of <iframe>

Attribute Value Description

name

allowfullscreen If true then that frame can be opened in full

screen.

height Pixels It defines the height of the embedded iframe,

and the default height is 150 px.

name text It gives the name to the iframe. The name

attribute is important if you want to create a link
in one frame.

frameborder 1 or 0 It defines whether iframe should have a border

or not. (Not supported in HTML5).

Width Pixels It defines the width of embedded frame, and

default width is 300 px.

src URL The src attribute is used to give the path name
or file name which content to be loaded into
iframe.

sandbox

This attribute is used to apply extra restrictions

for the content of the frame

©Topperworld
HTML

allow- It allows submission of the form if this keyword

forms is not used then form submission is blocked.

allow- It will enable popups, and if not applied then no

popups popup will open.

allow- It will enable the script to run.

scripts

allow- If this keyword is used then the embedded

same- resource will be treated as downloaded from the
origin same source.

srcdoc The srcdoc attribute is used to show the HTML

content in the inline iframe. It overrides the src
attribute (if a browser supports).

scrolling

It indicates that browser should provide a scroll

bar for the iframe or not. (Not supported in
HTML5)

auto Scrollbar only shows if the content of iframe is

larger than its dimensions.

yes Always shows scroll bar for the iframe.

no Never shows scrollbar for the iframe.

©Topperworld
HTML

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

<!DOCTYPE html>
<html>
<head>
<title>IFrame Example</title>
</head>
<body>
<h1>IFrame Example</h1>

<p>Here's an embedded webpage:</p>

<!-- The iframe tag embeds an external webpage -->

<iframe src="[Link] width="800"
height="400" frameborder="0"></iframe>

<p>This is the rest of the content on the current page.</p>

</body>
</html>

Output :->

©Topperworld
HTML

[Link]

File paths

 A file path specifies the location of a file inside a web folder structure. Its
like an address of a file which helps the web browser to access the files.
 File paths are used to link external resources such as images, videos, style
sheets, JavaScript, displaying other web pages etc.
 The src or href attribute requires an attribute to link any external source to
HTML file.

Following are the different types to specify file paths:

1) <img src="[Link]"> It specifies that [Link] is located in the

same folder as the current page.
2) <img src="images/[Link]"> It specifies that [Link] is located in
the images folder in the current folder.
3) <img src="/images/[Link]"> It specifies that [Link] is located
in the images folder at the root of the current web.
4) <img src="../[Link]"> It specifies that [Link] is located in the
folder one level up from the current folder.

File paths are used on webpages to link external files like:

I. Web pages
II. Images
III. Style sheets
IV. JavaScript

©Topperworld
HTML

 Types of File Paths:

1. Absolute File Paths
2. Relative File Paths

Absolute File Paths: It describes the full address(URL) to access an

internet file.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Absolute File Path Example</title>
</head>
<body>
<h1>Absolute File Path Example</h1>

<!-- Using an absolute file path to link to the image -->

<img src="/mywebsite/images/[Link]" alt="An
example image">
</body>
</html>

Output:

©Topperworld
HTML

Relative File Path: It describes the path of the file relative to the
location of the current web page file.

Example:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css"
href="css/[Link]">
</head>
<body>
<h1>Welcome to My Website</h1>
<img src="images/[Link]" alt="Website Logo">
</body>
</html>

 Important Points for File path:

1) Always remember to use proper URL, file name, image name, else it will
not display on the webpage.
2) Try to use relative file paths, so that your code will be independent of
URL.

©Topperworld
HTML

[Link]

Computer Code Elements

 The computer has a unique formatting and text style for displaying the
messages related to codes.
 When we are programming, sometimes it is mandatory to show the Output
result, error message, or coding part to user on a webpage. Hence to solve
this issue HTML uses different tags for the user inputs, codes, programs,
etc. With the help of these tags, you will be able to write codes to display
on your webpage.

Following is a list of some tags which are used in HTML for this task.

1. <code>
2. <kbd>
3. <pre>
4. <samp>
5. <var>

 <code> Tag
 The <code> tag in HTML is used to define the piece of computer code.
During the creation of web pages sometimes there is a need to display
computer programming code.
 It could be done by any basic heading tag of HTML but HTML provides
a separate tag which is <code> tag.
 The code tag is a specific type of text which represent computer
output.
 HTML provides many methods for text-formatting but <code> tag is
displayed with fixed letter size, font, and spacing.
Syntax:
<code> Computer code contents... </code>

©Topperworld
HTML

Example:
<pre>
<code>
#include<stdio.h>
int main() {
printf("Topper World");
}
</code>
</pre>

Output:

Note: The program which is written inside the <code> tag has some different
font sizes and font types to the basic heading tag and paragraph tag. <pre>
tag is used to display code snippets because it always keeps the text
formatting as it is.
Some points about <code> tag:
 It is mainly used to display the code snippet in the web browser.
 This tag styles its element to match the computer’s default text format.
 The web browsers by default use a monospace font family for displaying
<code> tags element content.

 <kbd> Tag
 It is a phrase tag and is used to define the keyboard input.
 The text between the <kbd> tag represents similar text that should be
typed on the keyboard.
Syntax:
<kbd> Contents... </kbd>

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>The kbd tag</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<div class="tw">Topper World</div>
<kbd>A computer</kbd>
<kbd>science</kbd>
<kbd>portal</kbd>
</body>
</html>

Output:

©Topperworld
HTML

Some points about <kbd> tag:

 The text enclosed by <kbd> tag is typically displayed in the browser’s
default mono-space font.
 It is possible to achieve a richer effect with CSS
 There is no tag-specific attributes.

 <pre> Tag
 The <pre> tag in HTML is used to define the block of preformatted text
which preserves the text spaces, line breaks, tabs, and other
formatting characters which are ignored by web browsers.
 Text in the <pre> element is displayed in a fixed-width font, but it can
be changed using CSS.
 The <pre> tag requires a starting and end tag.

Syntax:
<pre> Contents... </pre>
Example:
<!DOCTYPE html>
<html>

<head>
<title>pre tag</title>
</head>
<body>
<pre>
Topper World
A Computer Science Portal For Programmers
</pre>
</body>
</html>

©Topperworld
HTML

Output:

 <samp> Tag
 It is a phrase tag and used to define the sample output text from a
computer program.
 The HTML Sample Element is used to enclose inline text which
represents sample (or quoted) output from a computer program.

Syntax:

<samp> Contents... </samp>

Example:
<!DOCTYPE html>
<html>
<head>
<title>samp tag</title>
</head>
<style>
body {
text-align:center; }
.tw {
font-size:40px;
font-weight:bold;
color:green; }

©Topperworld
HTML

.topper {
font-size:25px;
font-weight:bold; }
</style>
<body>
<div class="tw"> Topper World</div>
<div class="topper"><samp> Tag</div>
<samp>A computer science portal for programmers
</samp>
</body>
</html>

 <var> Tag
 It is a phrase tag and used to specify the variable in a mathematical
equation or in a computer program.
 The content of this tag is displayed in the italic format in most of
browsers.
Syntax:
<var> Contents... </var>

Example:

<!DOCTYPE html>
<html>
<head>
<title>var tag</title>
</head>
<style>

©Topperworld
HTML

body {
text-align:center; }
.tw { font-size:40px;
font-weight:bold;
color:green; }
.topper { font-size:25px;
font-weight:bold; }
</style>
<body>
<div class="tw">Topper World</div>
<div class="topper"><var> Tag</div>
<var>Topper World Variable</var>
</body>
</html>

©Topperworld
HTML

[Link]

Entities

 HTML character entities are used as a replacement of reserved characters

in HTML.
 You can also replace characters that are not present on your keyboard by
entities.
 These characters are replaced because some characters are reserved in
HTML. HTML entities provide a wide range of characters which can allow
you to add icons, geometric shapes, mathematical operators, etc.

For example: if you use less than (<) or greater than (>) symbols in your text,
the browser can mix them with tags that's why character entities are used in
HTML to display reserved characters.

 How to use an entity:

You can use an entity in your HTML document by name or by a numerical
character reference. Each entity starts with symbol ampersand (&) and ends
with a semicolon (;).

Syntax:

&entity_name;
OR
&#entity_number;

 Most used HTML Character Entities

Result Description Entity Name Entity Number

©Topperworld
HTML

non-breaking space &nbsp; 160

< less than &lt; 60

> greater than &gt; 62

& ampersand &amp; 38

" double quotation mark &quot; 34

' single quotation mark (apostrophe) &apos; 39

¢ cent &cent; 162

£ pound &pound; 163

¥ yen &yen; 165

€ Euro &euro; 8364

© copyright &copy; 169

® registered trademark &reg; 174

 Advantage of entity name:

 An entity name is easy to remember.

 Disadvantage of entity name:

 Browsers may not support all entity names, but the support for numbers
is good.

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>

<title>Example</title>
</head>

<body>

<h3>HTML entity example</h3>

<p> "This is the content written within entity"</p>
<p> Paragraph tag </p>

</body>

</html>

Output:

©Topperworld
HTML

 Diacritical Marks in HTML

There are some special types of letters used in HTML whichhave some glyph
added to the top or below the letters. These glyphs are called diacritical mark.

Some diacritical marks, like grave ( ̀) and acute ( ́) are called

[Link] marks can be used both above and below a letter, inside a
letter, and between two letters.

Following is a list of some diacritical marks:

Character Construct Result

a a&#768; à

a a&#769; á

a a&#770; â

a a&#771; ã

O O&#768; Ò

O O&#769; Ó

©Topperworld
HTML

O O&#770; Ô

O O&#771; Õ

©Topperworld
HTML

[Link]

Symbols

 HTML Charset is also called HTML Character Sets or HTML Encoding.

 It is used to display an HTML page properly and correctly because for
displaying anything correctly, a web browser must know which character
set (character encoding) to use.
 The web browser displays the alphabets, numbers and some other
symbols correctly.
 This is all possible because of the required character set that web browser
uses.
 The character set or character encoding has different character encoding
standards which assign some numbers to these character set which can
be used in the internet.

 ASCII
 American Standard Code for Information Interchange (ANSII) created
this character encoding.
 This character encoding are used in C/C++ programming. It has 128
alphanumeric characters consisting of alphabets(A-Z) and (a-z) and
some special symbols like + – * / ( ) @ etc.

 ANSI(Windows-1252)
 American National Standards Institute (ANSI) created character
encoding supported 256 characters.
 It is used as default character set in Microsoft Windows.

 ISO-8859-1
 It is used as default character set of HTML4 and also supports 256
characters.

©Topperworld
HTML

 The International Standards Organization (ISO) defines the standard

character sets for different alphabets/languages.
 It contains numbers, upper and lowercase English letters, and some
special characters.

 UTF-8
 UTF-8 and UTF-16 standards was developed by Unicode Consortium,
because the ISO-8859 character-sets are limited, and not compatible a
multilingual environment.
 It consists all the character and punctuation symbols.

 Attribute
Web browser must know the character encoding standard used in the
html page and this we do as given below.

Examples:
HTML4
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
HTML5
<meta charset="UTF-8">

NOTE: The first values from 0 to 127 are considered as the "Standard" ASCII
character set.
Characters with values from 128 to 255 are the "Extended" Character set.

 Character set for different character encoding standard:

Following list shows different character encoding standards with their
characters and their assigned number codes.

©Topperworld
HTML

Table 1(ASCII Device Control Characters): This table contains

Characters which are designed to control hardware [Link] are also
known as control characters.

NUMBER CHARACTER DESCRIPTION

00 NUL null character

01 SOH start of header

02 STX start of text

03 ETX end of text

04 EOT end of transmission

05 ENQ enquiry

06 ACK acknowledge

07 BEL bell(ring)

08 BS backspace

09 HT horizontal tab

10 LF line feed

11 VT vertical tab

12 FF form feed

13 CR carriage return

14 SO shift out

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

15 SI shift in

16 DLE data link escape

17 DC1 device contyrol 1

18 DC2 device contyrol 2

19 DC3 device contyrol 3

20 DC4 device contyrol 4

21 NAK negative acknowledge

22 SYN synchronize

23 ETB end transmission block

24 CAN cancel

25 EM end of medium

26 SUB substitute

27 ESC escape

28 FS file separator

29 GS group separator

30 RS record separator

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

31 US unit separator

127 DEL delete

Table 2: This table contains characters having the same numbers assigned
in different character encoding.

NUMBER CHARACTER DESCRIPTION

32 Space

33 ! Exclamation Mark

34 “ Quotation Mark

35 # Hash Sign

36 $ Dollar Sign

37 % Percent Sign

38 & Ampersand Sign

39 ‘ Apostrophe Sign

40 ( Opening Paranthesis

41 ) Closing Parenthesis

42 * Asterisk Sign

43 + Plus Sign

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

44 , Comma

45 – Hyphen/minus Sign

46 . Full-stop

47 / Slash/Divide Sign

48 0 Number Zero

49 1 Number One

50 2 Number Two

51 3 Number Three

52 4 Number Four

53 5 Number Five

54 6 Number Six

55 7 Number Seven

56 8 Number Eight

57 9 Number Nine

58 : Colon

59 ; Semicolon

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

60 < Lessthan Sign

61 = Equalto Sign

62 > Greaterthan Sign

63 ? Question Mark

64 @ at Sign

65 A Letter A

66 B Letter B

67 C Letter C

68 D Letter D

69 E Letter E

70 F Letter F

71 G Letter G

72 H Letter H

73 I Letter I

74 J Letter J

75 K Letter K

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

76 L Letter L

77 M Letter M

78 N Letter N

79 O Letter O

80 P Letter P

81 Q Letter Q

82 R Letter R

83 S Letter S

84 T Letter T

85 U Letter U

86 V Letter V

87 W Letter W

88 X Letter X

89 Y Letter Y

90 Z Letter Z

91 [ Opening Square Bracket

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

92 \ Backslash

93 ] Closing Square Bracket

94 ^ Circumflex Accent

95 _ Low Line

96 ` Grave Accent

97 a Letter a

98 b Letter b

99 c Letter c

100 d Letter d

101 e Letter e

102 f Letter f

103 g Letter g

104 h Letter h

105 i Letter i

106 j Letter j

107 k Letter k

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

108 l Letter l

109 m Letter m

110 n Letter n

111 o Letter o

112 p Letter p

113 q Letter q

114 r Letter r

115 s Letter s

116 t Letter t

117 u Letter u

118 v Letter v

119 w Letter w

120 x Letter x

121 y Letter y

122 z Letter z

123 { Opening Curly Bracket

©Topperworld
HTML

NUMBER CHARACTER DESCRIPTION

124 | Vertical Line

125 } Closing Curly Bracket

126 ~ Tilde

127 DEL delete

©Topperworld
HTML

[Link]

Symbols

 There are many mathematical, technical and currency symbols which are
not present on a normal keyboard. We have to use HTML entity names to
add such symbols to an HTML page.
 If there no entity name exists, you can use an entity number, a decimal, or
hexadecimal reference.

Example:

<!DOCTYPE html>

<html>

<body>
<h3>The Currency Symbols</h3>

<p>This is Indian Rupee symbol

<b>₹<b>
</p>
<p>This is Euro symbol
<b>€</b>
1. </p>
2. <p> This is Dollar symbol
3. <b>#36;</b>
</p>
</body>

</html>

©Topperworld
HTML

Output:

 Mathematical Symbols Supported by HTML

Char Number Entity Description

∀ &#8704; &forall; FOR ALL

∂ &#8706; &part; PARTIAL DIFFERENTIAL

∃ &#8707; &exist; THERE EXISTS

∅ &#8709; &empty; EMPTY SETS

∇ &#8711; &nabla; NABLA

∈ &#8712; &isin; ELEMENT OF

∉ &#8713; &notin; NOT AN ELEMENT OF

∋ &#8715; &ni; CONTAINS AS MEMBER

∏ &#8719; &prod; N-ARY PRODUCT

©Topperworld
HTML

∑ &#8721; &sum; N-ARY SUMMATION

 Greek Symbols Supported by HTML

Char Number Entity Description

Α &#913; &Alpha; GREEK CAPITAL LETTER ALPHA

Β &#914; &Beta; GREEK CAPITAL LETTER BETA

Γ &#915; &Gamma; GREEK CAPITAL LETTER GAMMA

Δ &#916; &Delta; GREEK CAPITAL LETTER DELTA

Ε &#917; &Epsilon; GREEK CAPITAL LETTER EPSILON

Ζ &#918; &Zeta; GREEK CAPITAL LETTER ZETA

 Some Important Symbols Supported by HTML

Char Number Entity Description

© &#169; &copy; COPYRIGHT SIGN

® &#174; &reg; REGISTERED SIGN

€ &#8364; &euro; EURO SIGN

™ &#8482; &trade; TRADEMARK

©Topperworld
HTML

← &#8592; &larr; LEFTWARDS ARROW

↑ &#8593; &uarr; UPWARDS ARROW

→ &#8594; &rarr; RIGHTWARDS ARROW

↓ &#8595; &darr; DOWNWARDS ARROW

♠ &#9824; &spades; BLACK SPADE SUIT

♣ &#9827; &clubs; BLACK CLUB SUIT

♥ &#9829; &hearts; BLACK HEART SUIT

♦ &#9830; &diams; BLACK DIAMOND SUIT

©Topperworld
HTML

[Link]

Doctypes

A doctype or document type declaration is an instruction that tells the web

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

 Declaration of a Doctype
 A DOCTYPE declaration appears at the top of a web page before all other
elements.
 According to the HTML specification or standards, every HTML document
requires a document type declaration to ensure that the pages are
displayed in the way they are intended to be displayed.
 The DOCTYPE for HTML5 is case-insensitive and can be written as shown
below:
< !DOCTYPE html >

 Doctype Usage
 In the version, HTML 4.01, the usage of DOCTYPE declaration was to
create a reference to a document type definition (DTD), since the version
HTML 4.01 was completely based on a Standard Generalized Markup
Language(SGML).
 The document type definition (DTD) is responsible for specifying the rules
for the Standard Generalized Markup Language(SGML) so that the
browser processes the content correctly.

©Topperworld
HTML

 But in the HTML version, HTML 5 there isn’t any need for a reference to a
document type definition (DTD) because HTML 5 is not based on a
Standard Generalized Markup Language(SGML).
 In HTML 5, the DOCTYPE declaration is only required for enabling the
standard mode for writing documents.

Example:
<!DOCTYPE html>
<html>

<body>
<h1>Topper World </h1>
<h2>This is HTML5 Doctype Tag</h2>
</body>

</html>

©Topperworld
HTML

[Link]

anchor tag

 The <a> tag (anchor tag) in HTML is used to create a hyperlink on the
webpage.
 This hyperlink is used to link the webpage to other web pages or some
section of the same web page.
 It’s either used to provide an absolute reference or a relative reference as
its “href” value.

Syntax:
<a href = "link"> Link Name </a>

 Attribute
The anchor tag contains many attributes which are listed below.
 HTML <a> charset Attribute: This attribute is used to specifies the
character-set. It is not supported by HTML 5.

 HTML <a> download Attribute: It is used to specify the target link to

download when the user clicks.

 HTML <a> hreflang Attribute: It is used to specify the language of the

linked document.

 HTML <a> media Attribute: It is used to specify the linked media.

 HTML <a> coords Attribute: It is used to specify the coordinate of links.

It is not supported by HTML 5.

 HTML <a> name Attribute: It is used to specify the anchor name. It is

not supported by HTML 5 you can use the global id attribute instead.

©Topperworld
HTML

 HTML <a> rel Attribute: It is used to specify the relation between the
current document and the linked document.
 HTML <a> shape Attribute: It is used to specify the shape of the link. It
is not supported by HTML 5.

 HTML <a> type Attribute: It is used to specify the type of links.

 HTML <a> target Attribute: It specifies the target link.

 HTML <a> rev Attribute: It is used to specify the relation between the
linked document and the current document. It is not supported by
HTML 5.

Example:
<!DOCTYPE html>
<html>

<body>
<h2>
Welcome to Topper World Internship
</h2>

<a href=
"[Link]
Topper World Internship </a>
</body>

</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

abbr tag

 The <abbr> tag(Abbreviation) in HTML is used to define the abbreviation

or short form of an element.
 The <abbr> and <acronym> tags are used as shortened versions and used
to represent a series of letters.
 The abbreviation is used to provide useful information to browsers,
translation systems, and search-engines.

Syntax:
<abbr title=""> Short form </abbr>

 Attribute
This tag accepts an optional attribute as mentioned above and described
below:
 title: It is used to specify extra information about the element. When
the mouse moves over the element then it shows the information.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>Topper World </h1>
<h2>This is abbr Tag</h2>
<abbr title="Topper World">TW</abbr>
</body>

</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

acronym tag

 The <acronym> tag in HTML is used to define the acronym.

 The <acronym> tag is used to spell out another word. It is used to give
useful information to browsers, translation systems, and search-engines.
 This tag is not supported in HTML 5 otherwise use <abbr> Tag.

Syntax:
<acronym title=""> Short Form </acronym>

 Attribute:
This tag accepts an optional attribute as mentioned above and described
below:
 title: It is used to specify extra information about the element. When
the mouse moves over the element then it shows the information.
Example:
<!DOCTYPE html>
<html>

<body>
<h1>Topper World </h1>
<h2>This is HTML acronym Tag</h2>
<acronym title="Topper World">TW</acronym>
<br>
<acronym title="Operating System">OS</acronym>
</body>

</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

address tag

 The <address> tag in HTML indicates the contact information of a person

or an organization.
 If <address> tag is used inside the <body> tag then it represents the
contact information of the document and if the <address> tag is used
inside the <article> tag, then it represents the contact information of the
article. The text inside the <address> tag will display in italic format.

Syntax:
<address> Address... </address>
Example:

<!DOCTYPE html>
<html>
<body>
<!-- address tag starts from here -->
<address>
Organization Name: Topper World <br>
Web Site:
<a href= [Link]
Topeer World</a><br>
visit us:<br>
Topper World<br>
</address>
<!-- address tag ends here -->
</body>
</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

aside tag

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

<aside> vs <div>: Both tags have the same behavior with a different
meanings.
 <div>: It defines or creates a division or section in the web page.
 <aside>: It does the same job by creating a section or division but it
contains only the content that is related to the main web page.

The <aside> tag makes it easy to design the page and it enhances the clarity
of the HTML document. It let us easily recognize the main text and
subordinate text.
In both the time <div> and <aside> need CSS for specific design. The <aside>
tag supports Global attributes and Event attributes in HTML.

Note: The <aside> tag is new in HTML5. This tag does not render anything
special in a browser you have to use CSS for that.
Syntax:
<aside>
<h1>Contents...</h1>
<p>Contents...</p>
</aside>

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>Short &lt;aside&gt; Example</title>
</head>
<body>
<h1>Article Title</h1>
<article>
<p>Main content goes here...</p>
</article>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</body>
</html>

Output: ->

©Topperworld
HTML

[Link]

audio tag

 Since the release of HTML5, audios can be added to webpages using the
“audio” tag. Previously, audios could be only played on web pages using
web plugins like Flash.
 The “audio” tag is an inline element that is used to embed sound files into
a web page. It is a useful tag if you want to add audio such as songs,
interviews, etc. on your webpage.

Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>

 Attributes of HTML Audio Tag

Attribute Description

controls It defines the audio controls which is displayed with play/pause

buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

loop It specifies that the audio file will start over again, every time
when it is completed.

©Topperworld
HTML

muted It is used to mute the audio output.

preload It specifies the author view to upload audio file when the page
loads.

src It specifies the source URL of the audio file.

 Supported Formats:
Three formats mp3, ogg, and wav are supported by HTML5. The support for
each format by different browsers is given below :

Browser MP3 WAV OGG

Google Chrome Yes Yes Yes
Internet Explorer Yes No No
Opera Yes Yes Yes
Safari Yes Yes No

Example 1 (Adding audio to Webpage):

The controls attribute is used to add audio controls such as play, pause, and
volume. The “source” element is used to specify the audio files which the
browser may use. The first recognized format is used by the browser.

©Topperworld
HTML

<!DOCTYPE html>
<html>

<body>
<p>Audio Sample</p>

<!-- audio tag starts here -->

<audio controls>
<source src="test.mp3" type="audio/mp3">
<source src="[Link]" type="audio/ogg">
</audio>
<!-- audio tag ends here -->

</body>
</html>

Output:

©Topperworld
HTML

Example 2 (Autoplaying audio on a Webpage):

The autoplay attribute is used to automatically begin playback of the audio
file whenever the URL of the webpage is loaded.

<!DOCTYPE html>
<html>
<body>
<p>Audio Sample</p>
<!-- audio tag starts here -->
<audio controls autoplay>
<source src="test.mp3" type="audio/mp3">
<source src="[Link]" type="audio/ogg">
</audio>
<!-- audio tag ends here -->
</body>
</html>

Output:

©Topperworld
HTML

[Link]

applet tag

 The <applet> tag in HTML was used to embed Java applets into any HTML
document.

 The <applet> tag was deprecated in HTML 4.01, and it’s support has been
completely discontinued starting from HTML 5.

 Alternatives available in HTML 5 are the <embed> and the <object> tags.
There are still some browsers that support the <applet> tag with the help
of some additional plug-ins/installations to work. Internet Explorer 11 and
earlier versions with the help of plug-ins.

 Applet Tag is not supported in HTML5. The <applet> tag takes a number
of attributes, with one of the most important being the code attribute.

 This code attribute is used to link a Java applet to the concerned HTML
document. It specifies the file name of the Java applet.

Syntax:
<applet attribute1 attribute2....>
<param parameter1>
<param parameter2>
....
</applet>

©Topperworld
HTML

 Attributes

Attribute Value Description

name

code URL It specifies the URL of Java applet class file.

width pixels It specifies the display width of the applet

panel.

height pixels It specifies the display height of applet panel

align o left It specifies the position of applet application

relative to surrounding content.
o right
o top
o middle
o bottom

alt text It is used to display alternative text in case

browser does not support Java.

archive URL This specifies the archived or compressed

version of an applet application.

object name It specifies the URL or reference to a

serialized representation of an applet.

codebase URL It specifies the exact or relative URL of

applets .class file specified in the code
attribute.

hspace pixels It specifies the horizontal space around the

applet.

vspace pixels It specifies the vertical space around the

©Topperworld
HTML

applet.

name name It specifies the name for the applet

Example:

<!DOCTYPE html>
<html>
<!-- applet code starts here -->
<applet code="HelloWorld">
<!-- applet code ends here -->
</applet>
</html>

 Parameters
 Parameters are quite similar to command-line arguments in the sense
that they provide a way to pass information to the applet after it has
started.
 All the information available to the applet before it starts is said to be
hard-coded i.e. embedded within it.
 Parameters make it possible to generate and use data during run-time
of the applet.

Syntax:
<param name=parameter_name
value=parameter_value>

The name assigned to the name attribute of the param tag is used by the
applet code as a variable to access the parameter value specified in
the value attribute.

©Topperworld
HTML

In this way, the applet is able to interact with the HTML page where it is
embedded, and can work on values provided to it by the page during run-
time.

Example:
<!DOCTYPE html>
<html>
<!-- applet code starts here -->
<applet code="HelloWorld">
<param name="message" value="HelloWorld">
<!-- applet code ends here -->
</applet>

</html>

©Topperworld
HTML

[Link]

base tag

 The HTML base tag is used to specify a base URI, or URL, for relative links.
This URL will be the base URL for every link on the page and will be
prefixed before each of them.
For example, if the URL specified by the base tag is “[Link]” then
every other URL on the page will be prefixed by, “[Link]/”.

Syntax:
<base href = "SAMPLE_URL">

 Important Points:
 The base tag must be defined between the head tags.
 There can be a maximum of only 1 base tag in a page.

 Attribute
Tag Specific attributes:

Attribute Value Definition

href URL It specifies the base URL for

all relative links.

target

_blank Open the relative link in

the new window

_self Open the relative link in

©Topperworld
HTML

current window

_parent Open the relative link in

the parent fram

_top Open the links in full

width of the page

Example:

<!DOCTYPE html>
<html>
<head>
<!-- Set the base URL for relative URLs -->
<base href="[Link]
<title>Base Tag Example</title>
</head>
<body>
<h1>Base Tag Example</h1>
<p>
This is a simple example of how the base tag works.
All relative URLs in this document will be relative to the
base URL set above.
</p>
<!-- Example of an anchor link with a relative URL -->
<a href="[Link]">Go to Page 1</a>

©Topperworld
HTML

<!-- Example of an image with a relative URL -->

<img src="images/[Link]" alt="Sample Image">
</body>
</html>

Output:

©Topperworld
HTML

[Link]

Deprecated tags

 The deprecated tags or attributes are those attributes which are replaced
by some other attributes.
 The tag or attributes deprecated when the same attributes is achieved by
some other way.
 They are considered outdated and may not be supported in modern
browsers or future versions of HTML.

 HTML Deprecated Tag:

Complete list of deprecated tags are given below:

TAGS DESCRIPTION Alternate Tags

applet tag Specify an applet object tag

basefont
Specify a basefont font style sheets
tag

center tag Use to specify a centered Text text-align:center

dir tag Specify a directory list ul tag

Embed an application to HTML

embed tag object tag
document

Used to specify font text, size and font-family, font-size,

font tag
color color

isindex tag Specify a single-line input field form tag

©Topperworld
HTML

TAGS DESCRIPTION Alternate Tags

menu tag Specify a menu list ul tag

plaintext
Specify a plaintext pre tag
tag

s tag Specify a strike through text text-decoration

strike tag Specify a strike through text text-decoration

u tag Specify underlined text text-decoration

xmp tag Specify preformatted text pre tag

 HTML Deprecated Attributes:

There are some attributes which are deprecated from HTML4. Some of these
attributes are given below:

Attribute Description Alternate

Attributes

specify the horizontal space around the padding

hspace
element attribute

Used to specify the positioning of an text-align,

align attribute
element vertical-align

alink attribute Specify color for selected link active attribute

background background-
Specify background image
attribute image

©Topperworld
HTML

Attribute Description Alternate

Attributes

bgcolor background-
Specify background color
attribute color

bgcolor background-
Specify background color
attribute color

border Used to specify border width of an

border-width
attribute element

height padding
Specify height of body tag
attribute attribute

language
Specify scripting language being used type attribute
attribute

Specify default color of links in the

link attribute link attribute
document

nowrap Prevent the text from wrapping within

white-space
attribute that table cell

vlink attribute Specify the color of visited links visited attribute

type attribute Specify the type of list in li tag list-style-type

Specify the amount of whitespace or

vspace padding
padding that should appear above or
attribute attribute
below an element

©Topperworld
HTML

[Link]

Forms

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

controls.
 It provides facilities to input text, number, values, email, password, and
control fields such as checkboxes, radio buttons, submit buttons, etc., or
in other words, form is a container that contains input elements like text,
email, number, radio buttons, checkboxes, submit buttons, etc.
 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
details 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 elements-->
</form>

 Form Elements
Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

©Topperworld
HTML

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

 Textbox in HTML Form

In an HTML form, we use the <input> tag by assigning type attribute value to
text to input single line input. To define type attribute see the below syntax.
Tip: The default value of the type attribute is “text”.

Syntax:
<input type="text" />

Or shorthand for “text” type:

<input />

©Topperworld
HTML

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</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" />

©Topperworld
HTML

</label>
</form>
</body>
</html>

Output:

 Checkbox in an HTML Form

To create a checkbox in an HTML form, we use the <input> tag followed by

the input type checkbox. It is a square box to tick to activate this. It used to
choose more options at a time.
Syntax:
<input type="checkbox" name="select_box_name"
value="select_box_value" />

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Choose Language</h2>

©Topperworld
HTML

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

©Topperworld
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 a Combobox in an HTML form, we use the
<select> tag with <option> tag. It is also known as a drop-down menu.

Syntax:

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

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

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</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>

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

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

student

<!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">
<title>GfG</title>
</head>

©Topperworld
HTML

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

©Topperworld
HTML

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

©Topperworld
HTML

</textarea>
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
</body>
</html>

Output:

©Topperworld
HTML

[Link]

Global Attribute

 HTML global attributes are those attributes which are common for all
HTML elements. The global attributes are supported by both standard and
non-standard element.
 The global attributes can be used with all elements, although it may not
have any effect on some elements.

Following is the complete list of global attributes with their

description:

]Attributes value Description

accesskey character It is used to generate keyboard shortcuts

for the current element.

class classname It is used to provide the class name for the

current element. It is mainly used with the
stylesheet.

Contenteditable true It determines whether the content within

false an element is editable or not.

contextmenu menu_id It defines the id for the <menu> element

which is used as a context menu (a menu
appear on right click) for an element.

©Topperworld
HTML

data- somevalue It is used to store element-specific private

data which can be accessed by Javascript.

dir rtl It specifies the direction of the content

ltr inside the current element.
auto

draggable true It specifies whether the content within an

false element is movable or not using Drag and
auto Drop API.

dropzone copy It specifies the action is taken on the

move dragged element when it is dropped, ¬¬
link such as whether it is copied, moved or
linked.

hidden It is used to hide the element from view.

id id It specifies a unique id for the element. It

can be used with CSS and JavaScript.

lang language_code It specifies the primary language for the

content of an element.

style style It is used to apply inline CSS to the current

element.

spellcheck true It specifies whether the content should be

false checked for spelling errors or not.

©Topperworld
HTML

tabindex number It determines the tabbing order of an

element.

title text It is used to provide the title, name, or

some extra information about the element.

translate yes It specifies whether the content of the

no element should be translated when the
page is localized or not.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Global Attribute Example</title>
</head>
<body>
<h1 class="heading">This is a Heading</h1>
<p class="content">This is a paragraph with some
content.</p>
<a class="link" href="[Link]
[Link]</a>
</body>
</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

<input> attribute

 The HTML <input> accept Attribute is used to specify the type of file that
the server accepts.
 This attribute can be used with <input type=”file”> element only.
 This attribute is not used for validation tools because file uploads should
be validated on the Server.
Syntax:
<input accept = "file_extension | audio/* | video/* | image/* |
media_type">

 Attribute Values:
 file_extension: It Specify the file extension(s) like .gif, .jpg, .png, .doc)
the user can pick from.
 audio/*: The user can pick all sound files.
 video/*: The user can pick all video files.
 image/*: A valid media type, with no parameters. Look at IANA Media
Types for a complete list of standard media types
 media_type: A valid media type without parameters.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Medium Input Example</title>
</head>
<body>
<h1>Medium Input Example</h1>

©Topperworld
HTML

<h1>Medium Input Example</h1>

<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="John Doe">
<br>
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="john@[Link]">
<br>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password"
name="password" placeholder="Password123">
<br>
<!-- Checkbox -->
<input type="checkbox" id="subscribe"
name="subscribe" value="yes">
<label for="subscribe">Subscribe to
newsletter</label>
<br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</body>
</html>

©Topperworld
HTML

Output:

©Topperworld
HTML

[Link]

Canvas Basics

 The HTML “canvas” element is used to draw graphics via JavaScript.

 The “canvas” element is only a container for graphics.
 One must use JavaScript to actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
 The canvas would be a rectangular area on an HTML page. By default, a
canvas has no border and no content.

Syntax:

<canvas>
Content...
</canvas>

It is recommended to have an id attribute (to be referred to in a script), and a

width and height attribute to define the size of the canvas.
To add a border, use the style attribute.

 Supported Properties
The properties like Colors, Styles, Shadows, Line Styles, Rectangles, Paths,
Transformations, Text, Pixel Manipulation, Compositing & Image Drawing, are
the global attributes that are supported by all the canvas tags.

©Topperworld
HTML

Example 1: The following code demonstrates the empty canvas.

<!DOCTYPE html>
<html>

<body>
<canvas id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
</body>

</html>

Output:

©Topperworld
HTML

Example 2: This example shows the HTML Canvas to draw a circle.

<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas Circle Example</title>
</head>
<body>
<h1>HTML Canvas Circle Example</h1>
<!-- Canvas element for drawing -->
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
// Get the canvas element by its id
var canvas = [Link]("myCanvas");
var ctx = [Link]("2d");
// Define circle properties
var centerX = [Link] / 2;
var centerY = [Link] / 2;
var radius = 50;
var fillColor = "blue";
[Link]();
[Link](centerX, centerY, radius, 0, 2 * [Link]);
[Link] = fillColor;
[Link]();
[Link]();
</script>
</body>
</html>

©Topperworld
HTML

Output:

©Topperworld