HTML

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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

Topperworld.in

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="https://www.example.com" 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

Topperworld.in

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="picture.jpg"> It specifies that picture.jpg is located in the

same folder as the current page.
2) <img src="images/picture.jpg"> It specifies that picture.jpg is located in
the images folder in the current folder.
3) <img src="/images/picture.jpg"> It specifies that picture.jpg is located
in the images folder at the root of the current web.
4) <img src="../picture.jpg"> It specifies that picture.jpg 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/example.jpg" 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/styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<img src="images/logo.png" 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

Topperworld.in

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

Topperworld.in

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

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

Topperworld.in

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

Topperworld.in

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