HTML Basic Tags PDF by CodeHim

A simple guide to HTML tags for creating textual and visual content. This pdf covers the basic tags of HTML.

1. CodeHim
HTML Basic Tags
A simple guide to HTML tags for creating textual and visual content.


Asif Mughal
Web Developer

2. 2 HTML Basic Tags


Table of Contents
Introduction to HTML ................................................................................................................................... 4
HTML Tags ................................................................................................................................................. 4
A Simple HTML Document ........................................................................................................................ 4
Text formatting ............................................................................................................................................. 5
Headings.................................................................................................................................................... 5
Paragraphs ................................................................................................................................................ 6
Bold Text ................................................................................................................................................... 6
Italic Text ................................................................................................................................................... 7
Underline Text........................................................................................................................................... 7
Blockquote ................................................................................................................................................ 7
Highlighted Text ........................................................................................................................................ 8
Inserted Text ............................................................................................................................................. 9
Line Break & Horizontal Rule ........................................................................................................................ 9
Incorrect & Deleted Text ......................................................................................................................... 10
Emphasized Text ..................................................................................................................................... 10
HTML Division ............................................................................................................................................. 11
HTML Hyperlink........................................................................................................................................... 11
Internal Links ........................................................................................................................................... 11
External Links .......................................................................................................................................... 13
Link Title .................................................................................................................................................. 13
Target Attribute ...................................................................................................................................... 13
HTML Lists ................................................................................................................................................... 13
Unordered List ........................................................................................................................................ 14
Ordered List ............................................................................................................................................ 14
Description List........................................................................................................................................ 15
Nested List............................................................................................................................................... 16
HTML Table ................................................................................................................................................. 17
HTML Images............................................................................................................................................... 18

3. 3 HTML Basic Tags

HTML5 Audio & Videos ............................................................................................................................... 19
HTML Inline Frame ...................................................................................................................................... 20

4. 4 HTML Basic Tags

Introduction to HTML
HTML is the short of HyperText Markup Language
include links (or ‘hyperlinks’) to other resources.
documents designed to be displayed in a web browser.
HTML Tags
HTML elements are represented by tags
and “>” angle bracket. The HTML tags come in pairs like <b> and </b
called start or opening tag while other (</b>) is called end or closing tag. These
browser how to display the content
A Simple HTML Document
An HTML document is a file
ends with .html extension. It can be created using any text or code editor.
The syntax of a standard HTML document is given below:
Output:
short of HyperText Markup Language. The ‘hypertext’ means that
include links (or ‘hyperlinks’) to other resources. It is a standard markup language for
documents designed to be displayed in a web browser.
HTML elements are represented by tags. The tags are element names surrounded by
and “>” angle bracket. The HTML tags come in pairs like <b> and </b>. The first tag (like <b>) is
called start or opening tag while other (</b>) is called end or closing tag. These
browser how to display the content. Such as, the <b> tag defines the bold text.
A Simple HTML Document
An HTML document is a file containing Hypertext Markup Language, and its filename
It can be created using any text or code editor.
The syntax of a standard HTML document is given below:

means that text can
It is a standard markup language for
tags are element names surrounded by “<”
The first tag (like <b>) is
tags tell the

and its filename

5. 5 HTML Basic Tags

Text formatting
Text formatting refers to the
example: bold, italics, and underlining, are all formatting attributes of text. In HTML, we can
format any textual content using HTML tags.
Headings
Headings are standard features of
information. In HTML, there are six levels of a heading. The first level heading can be defined
using <h1> tag. Similarly, <h2> used for second
Code Example:
The following is the example of HTML heading tags.
Output:
Text formatting refers to the attributes of text other than the actual text itself. For
example: bold, italics, and underlining, are all formatting attributes of text. In HTML, we can
format any textual content using HTML tags.
Headings are standard features of technical documents that serve important
information. In HTML, there are six levels of a heading. The first level heading can be defined
Similarly, <h2> used for second level, <h3> used for third level and so on.
le of HTML heading tags.
attributes of text other than the actual text itself. For
example: bold, italics, and underlining, are all formatting attributes of text. In HTML, we can
important
information. In HTML, there are six levels of a heading. The first level heading can be defined
level, <h3> used for third level and so on.

6. 6 HTML Basic Tags

Paragraphs
A paragraph is a unit of text or other content that starts at the beginning of a document,
immediately after a carriage return.
Code Example:
The following HTML code describe
Output:
Bold Text
A bold font is any text that is darkened to help emphasize a remark or comment
can bold any text by placing it inside the <b> and </b>.
Output:
A paragraph is a unit of text or other content that starts at the beginning of a document,
immediately after a carriage return. HTML allows you to create paragraphs using <p> tag.
describes two paragraphs.
is any text that is darkened to help emphasize a remark or comment
can bold any text by placing it inside the <b> and </b>.

A paragraph is a unit of text or other content that starts at the beginning of a document,
HTML allows you to create paragraphs using <p> tag.


is any text that is darkened to help emphasize a remark or comment. In HTML, we

7. 7 HTML Basic Tags


Italic Text
Italic is a style of font that slants the letters evenly to the right.
<i> tag used to italic the text.
Output:
Underline Text
An underline is a section of text in a document where the words have a line running
beneath them. In HTML, the <u> tag is used to make a text underline.
Output:
Blockquote
The HTML Block Quotation Element
quotation. We can define a section that is quoted from another source
<blockquote> tag.
is a style of font that slants the letters evenly to the right. In HTML documents, the
is a section of text in a document where the words have a line running
. In HTML, the <u> tag is used to make a text underline.
Block Quotation Element indicates that the enclosed text is an extended
a section that is quoted from another source using HTML
In HTML documents, the


is a section of text in a document where the words have a line running


indicates that the enclosed text is an extended
using HTML

8. 8 HTML Basic Tags

Code Example:
The following HTML code explains the <blockquote> tag.
Note: The “cite” attribute specifies the source URL of the quotation.
Output:
For short inline quotes in a document, use the <q> tag.
Output:
Highlighted Text
The “<mark>” tag defines marked/highlighted text
place your text inside the <mark> tag.
The following HTML code explains the <blockquote> tag.
Note: The “cite” attribute specifies the source URL of the quotation.
For short inline quotes in a document, use the <q> tag.
efines marked/highlighted text in HTML document. To mark a part of text,
place your text inside the <mark> tag.




To mark a part of text,

9. 9 HTML Basic Tags

Code Example:
Output:
Inserted Text
In HTML, the <ins> tag defines a text that has been inserted into a document
Output:
Line Break & Horizontal Rule
In HTML, the <br> tag used to
inserted. The <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide
or separate document sections.
Note: The <br> and <hr> tag has no ending tag.
efines a text that has been inserted into a document.
Horizontal Rule
In HTML, the <br> tag used to cuts the line. It breaks the current line from the position where it is
is used to insert a horizontal rule or a thematic break in an HTML page to divide
Note: The <br> and <hr> tag has no ending tag.





from the position where it is
is used to insert a horizontal rule or a thematic break in an HTML page to divide

10. 10 HTML Basic Tags

Output:
Incorrect & Deleted Text
HTML <s> tag defines a text that is no longer correct.
text. These tags have a same output.
Output:
Emphasized Text
Emphasis is the strengthening of words in a text with a font in a different style from the rest of the text,
to highlight them. The <em> tag is used for
important word to make it strong

text that is no longer correct. Similarly, the <del> tag display a deleted
text. These tags have a same output.
mphasis is the strengthening of words in a text with a font in a different style from the rest of the text,
tag is used for emphasized text. Similarly, the <strong>
trong.


Similarly, the <del> tag display a deleted


mphasis is the strengthening of words in a text with a font in a different style from the rest of the text,
<strong> tag used for an

11. 11 HTML Basic Tags

HTML Division
In HTML, a <div> tag defines division
together to apply CSS for them. The
on a webpage using JavaScript. It’s really important in regards to designing. However, in textual content it is not
necessary.
HTML Hyperlink
A hyperlink (or simply a link)
on it. It might be an icon, graphic, or text that l
create a link to another page (or file) using <a> tag.
The most important attribute of the <a> element is the href attribute that indicates the
destination of the link. A basic syntax of an HTML link is a
Output:
The href attribute specifies the URL of the page the link goes to
inside the quotations.
Internal Links
The <a> (anchor) tag can also be used to create internal links to jump to different sections within
a webpage. To do so, assign a link's href attribute to a
for the element that you want to internally link
efines division to put more than one HTML element and can group
The div tag is very flexible in creating web layouts and to perform various task
It’s really important in regards to designing. However, in textual content it is not
hyperlink (or simply a link) is a reference to data that the reader can follow by clicking
It might be an icon, graphic, or text that links to another file or object. HTML allows you to
create a link to another page (or file) using <a> tag.
The most important attribute of the <a> element is the href attribute that indicates the
destination of the link. A basic syntax of an HTML link is as follows:

he href attribute specifies the URL of the page the link goes to. The destination URL placed
can also be used to create internal links to jump to different sections within
gn a link's href attribute to a hash symbol # plus the value of the id attribute
for the element that you want to internally link.
put more than one HTML element and can group
is very flexible in creating web layouts and to perform various tasks
It’s really important in regards to designing. However, in textual content it is not
is a reference to data that the reader can follow by clicking
HTML allows you to
The most important attribute of the <a> element is the href attribute that indicates the

The destination URL placed
can also be used to create internal links to jump to different sections within
hash symbol # plus the value of the id attribute

12. 12 HTML Basic Tags

Output:
Besides this, internal pages (pages on a same domain
For example, there are three pages in a same directory; these pages can be accessed using:
<a href=”page1.html”> Page 1 </a>
this, internal pages (pages on a same domain/directory) can be linked without using full path.
For example, there are three pages in a same directory; these pages can be accessed using:


) can be linked without using full path.
For example, there are three pages in a same directory; these pages can be accessed using:

13. 13 HTML Basic Tags

<a href=”folder/page2.html”> Page 2 inside a folder </a>
<a href=”../folder/page3.html”> A page placed in one level back folder </a>

External Links
External Links are hyperlinks that point at (target) any domain other than the domain the link
exists. For example:
Output:

Link Title
The title attribute defines a tooltip description for a link.
Target Attribute
The target attribute specifies where to open the linked
The following are some values that can be inserted in target attribute.
2 inside a folder </a>
<a href=”../folder/page3.html”> A page placed in one level back folder </a>
External Links are hyperlinks that point at (target) any domain other than the domain the link
The title attribute defines a tooltip description for a link.
specifies where to open the linked page.
The following are some values that can be inserted in target attribute.
External Links are hyperlinks that point at (target) any domain other than the domain the link

14. 14 HTML Basic Tags

 _blank: Opens the linked document in a
 _self: Opens the linked page in the same tab as it was clicked (this is default)
 _parent: Opens the linked document in the parent frame
 _top: Opens the linked document in the full body of the window
HTML Lists
Lists are used to group related
other and easy to read. There are three list types in HTML:
1. Unordered List
2. Ordered List
3. Description List
Unordered List
In HTML, unordered list used to group a set of related items in no particular
can be defined using “<ul>” tag.
The following is a basic HTML structure for
Output:
Ordered List
An ordered list is used to group a set of related items in a specific order. It can be
defined using HTML “<ol>” tag.
The following is a basic HTML structure for an ordered list.
Opens the linked document in a new tab
Opens the linked page in the same tab as it was clicked (this is default)
Opens the linked document in the parent frame
Opens the linked document in the full body of the window
Lists are used to group related information so they are clearly associated with each
other and easy to read. There are three list types in HTML:
In HTML, unordered list used to group a set of related items in no particular

The following is a basic HTML structure for an unordered list.
An ordered list is used to group a set of related items in a specific order. It can be

ollowing is a basic HTML structure for an ordered list.
information so they are clearly associated with each
In HTML, unordered list used to group a set of related items in no particular order. It


An ordered list is used to group a set of related items in a specific order. It can be

15. 15 HTML Basic Tags

Output:
Description List
A description list is a list of items with a description or definition of each item.
description list can be created using
<dt> tag that specifies a term, and the <dd> tag specifies the
To create a description list, use the following HTML code:
Output:
A description list is a list of items with a description or definition of each item.
created using HTML <dl> tag. This tag is used in conjunction with the
that specifies a term, and the <dd> tag specifies the definition of a term.
To create a description list, use the following HTML code:


A description list is a list of items with a description or definition of each item. A
is used in conjunction with the
term.

16. 16 HTML Basic Tags

Nested List
List in another list is called a nested list
unordered lists. To define a nested list, place “<ul>” tag inside the “<li>” tag of a parent list.
The following HTML code defines a nested list.
Output:
List in another list is called a nested list. HTML allows you to nest both ordered and
unordered lists. To define a nested list, place “<ul>” tag inside the “<li>” tag of a parent list.
The following HTML code defines a nested list.

HTML allows you to nest both ordered and
unordered lists. To define a nested list, place “<ul>” tag inside the “<li>” tag of a parent list.

17. 17 HTML Basic Tags

HTML Table
An HTML table is used to represent data in
with HTML “<table>” tag. Each table row is defined with the “<tr>” tag. A table header is
defined with the “<th>” tag.
The following is a basic HTML code structure to create a table.
An HTML table is used to represent data in rows and columns. A table can be defined
with HTML “<table>” tag. Each table row is defined with the “<tr>” tag. A table header is
The following is a basic HTML code structure to create a table.

rows and columns. A table can be defined
with HTML “<table>” tag. Each table row is defined with the “<tr>” tag. A table header is

18. 18 HTML Basic Tags


Output:
HTML Images
The images can give depth and context to a description, a testimonial or story and
provide a much more immersive experience than writing alone. To include an image in your
HTML document, use <img> tag.
The “src” attribute specifies the URL of an image
alternate text for an image.

ges can give depth and context to a description, a testimonial or story and
provide a much more immersive experience than writing alone. To include an image in your
HTML document, use <img> tag. This tag has two required attributes that are: src and alt.
pecifies the URL of an image and “alt” attribute specifies an


ges can give depth and context to a description, a testimonial or story and
provide a much more immersive experience than writing alone. To include an image in your
This tag has two required attributes that are: src and alt.
pecifies an

19. 19 HTML Basic Tags

HTML5 Audio & Videos
The HTML Video element (
playback into the document. Before HTML5, a video could only be played in a browser with a
plug-in like flash. To embed a video in your HTML document use the following code:
Output:
Similarly, we can embed an audio file in HTML document using the following code:

The HTML Video element (<video>) embeds a media player which supports video
Before HTML5, a video could only be played in a browser with a
a video in your HTML document use the following code:
Similarly, we can embed an audio file in HTML document using the following code:

) embeds a media player which supports video
Before HTML5, a video could only be played in a browser with a
a video in your HTML document use the following code:


Similarly, we can embed an audio file in HTML document using the following code:

20. 20 HTML Basic Tags

Output:
HTML Inline Frame
An Inline Frame is an HTML document embedded inside another HTML document on a website.
An inline frame can be inserted using <iframe> tag.
Output:
is an HTML document embedded inside another HTML document on a website.
An inline frame can be inserted using <iframe> tag.

is an HTML document embedded inside another HTML document on a website.