HTML

HTML Stands for Hyper Text Mark-up Language. This language is used for creating web pages and web
applications. In HTML Full form, each word has meaning for itself, which given below:

Hyper Text: Hyper Text mean, a text has a link within it. To Hyper Text, we can consider as a calling
system. A Text, which has a link, is called as anchor tag. In anchor tag we pass the link of another page,
where you click and another page open, whose address pass on anchor tag. Let’s consider this concept
with example of anchor tag.

Example:

<a href=”home.html”>Home</a>

In HTML to connect two or more than two pages with each other, we need to use anchor tag. In given
example “href” is that Hyper Text, who has link of another page (“home.html”). In browser this anchor
tag will be show as anchor menu, on which if we click, another page (“home.html”) will be open, whose
link is pass in this “href”. “Href” also stands for Hyper Reference.

Markup Language: A markup language is a computer language that is used to apply layout and
formatting to a text document. We can also say about markup language, Markup Language is collection
of those formatting text, which is called as tag in HTML, using these tag and can who an image, link and
text in web page.

Hence, HTML is a markup language, which is used for creating attractive web pages with the help of
styling, and which look nice on browser in our web page. Simply we can say that, HTML is web designing
Language, which is collection of multiple tags, though which we can show our content in our web page.

History: This language is developed by Mr. Tim Berners-Lee, who is known as father of HTML. The First
available description of HTML was a document called”HTML Tags” proposed by Mr. Tim Berners-Lee in
late 1991. Now currently we have latest version of html, that is HTML5. There are many versions of
HTML, which given below.

Version:

1) Document listing 18 HTML tags-October 1991

2) First informal draft-June 1992
3) HTML 2.0 -November 24, 1995
4) HTML 3.2- January 14, 1997
 5) HTML 4.0-December 18, 1997
6) HTML 4.0 with minor edits-April 24, 1998
7) HTML 4.01-December 24, 1999
8) HTML5-October 28, 2014
9) HTML 5.1-November 1, 2016
10) HTML 5.2 14 December 2017

Details for html version:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML language, and
it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard language version
for website design. HTML 2.0 was able to support extra features such as form-based file upload, form
elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of creating
tables and providing support for extra options for form elements. It can also support a web page with
complex mathematical equations. It became an official standard for any browser till January 1997. Today
it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of HTML
language. This version is the current official standard, and it provides added support for stylesheets (CSS)
and scripting ability for various multimedia elements.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this version was
announced in January 2008. There are two major organizations one is W3C (World Wide Web
Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group)
which are involved in the development of HTML 5 version, and still, it is under development.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.
 5) It is platform-independent because it can be displayed on any platform like Windows, Linux,
and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-

case.

Types of HTML Tags: There two types of html tags, which given below:

1. Single Tags
2. Paired Tags

Single tags: Single tags are those tags, which are self closed. And these tags do not contain any other
tag inside them.

Example:

Image tag: <img src=”image_name.extention”/>

Paired tags: Paired tags are those tags, which completed with two parts, open tag and close tag.

Each tag has its open and close tag. And these type of tag can contain any other tag inside them.

Example:

HTML Tag: <html></html>

Head Tag: <head></head>

Body Tag: <body></body>

In given example tag <html> is open tag &</html> is close tag.

In given example <html></html> Content and tag will be used between open and close tag of any tag.

Environment: To work on web designing and html, we need a proper environment. To fulfill this
environment, we needed for given tools:

1. Text Editor
2. Browser

Text Editor: For Working on HTML, we needed for text editor. It may be any text editor tool(sublime
and notepad++) or notepad.
Browser: To get the output of html code, we needed for browser. In browser we get the output of html
code.

Note: Each HTML file will be save with “.html” extension.

Structure of html code: As we know that html, head and body tags are paired tags and container tag.
So fully structure is based on html and head and body.

<html>

<head>

1. Title tag 2. Script Tag 3. Meta tag 4. Style Tag 5. Link tag

</head>

<body>

All Remaining tags.

</body>

</html>

In given structure of html.

<html> tag is a container tag, which contain two tag inside it. Which are head tag and body tag.

And also like as html tag, head is also the paired and container tag so this tag contains 5 tags inside it.

And body tag also contain all remaining tag inside it.

How to start work on html:

1. Open Notepad
2. Create the html structure
3. Use html tag in your html page what you want to show on page.
4. Save this file with any name, but use “.html” extension after name of file.
5. Now this file will be save as html file and it will be show as your default browser. So click in that
file to show the output of your html coding.
Title tag: Using title tag, we show the page name in title bar of browser.

Syntax:

<title>Text as title</title>

Example:

<html>

<head>

<title>Hello Infority IT Services</title>

</head>

<body></body>

</html>

Script tag: For using Java Script Code and html page, we use script tag in head tag of html structure.

Syntax:

<script>

code

</script>

Example:

<html>

<head>

<script>

alert(“Hello Infority IT Services”);

</script>

</head>

<body></body>
</html>

Meta tag: Meta is data about data for website. Meta tag is just used to provide brief information in
website for our business and website.

Types of Meta tag: There are multiple meta tag for different purpose.

1. Meta Title
2. Meta Charset
3. Meta Keyword
4. Meta Description
5. Meta Author
6. MetaViewport
7. Meta Refresh

Meta title: This is the page title that Google and most other search engines show in search
results.Google doesn’t always show the title tag. It sometimes shows something different.

Syntax:

<meta name=”title” content=”text”/>

Meta Charset: Meta tag is used to provide the information about page encode.

Syntax:

<meta charset=”utf-8”/>

Meta Keyword: Meta keyword is used to set the keyword in page, though which webpage can show in
search engine easly.

Syntax:

<meta name=”keyword” content=”keyword”/>

Note: Keyword length should be maximum 160 characters.

Meta Description: This tag is used to set the business information in brief for search engine.

Syntax:

<meta name=”description” content=”description”/>

Note: Description length should be maximum 160 characters.

Meta Author: This tag is used to inform about business owner.

Syntax:

<meta name=”author” content=”owner name”/>

Meta Viewport: The viewport is the user’s visible area of a web page. It varies with the device – it will
be smaller on a mobile phone than on a computer screen.

Syntax:

<meta name=”viewport” content=”width-device-width,initial-scale=1.0”/>

Meta Refresh: This tag is used to refresh page in each second.

Syntax:

<meta http-equiv=”refresh” content=”30”/>

Style tag:To perform internal css we used style tag.For internal css, we use three selectors in style tag.

1. Id
2. Class

Id: To perform individual css property with individual tag, we use id. And we call tag with their id using
(#) operator.

Syntax:

#id_name{

Property_name: value

}
Example:

<html>

<head>

<style>

#g{color:red}

</style>

</head>

<body>

<h1 id=”g”>Hello Infority IT Services</h1>

</body>

</html>

Class: Class is used to perform, same css property with multiple tag. and we call tag with their class
using ( . ) Dot operator.

<html>

<head>

<style>

.v{color:red}

</style>

</head>

<body>

<h1 class=”v”>Hello Infority IT Services</h1>

<h1 class=”v”>Hello Infority IT Services</h1>

</body>

</html>

Link Tag: This tag is used to add different page(to perform external css) with html page, link to online
link with html page and also used to add company icon or logo in web page.

Syntax:

For external css: <link type=”text/css” rel=”stylesheet” href=”css_page_name.css”/>

For add icon in web page: <link type=”icon” rel=”icon” href=”image_name.extension”/>

Website: A website is collection of multiple webpage, where each web page is collection of multiple html
tags and css property.

A website is used to bring a business details online and also used to work online business.

Type of website: There are 2 type of website.

1. Static website

2. Dynamic Website

Static website: A website, in which user can not change anything as per as requirement. A static
website is just a read only website, to which a user just read and watch. Such as portfolio.

Dynamic website: A website, in which user can change anything as per as requirement, is called
dynamic website. A dynamic website is also known as web application.

A Dynamic website is such as , facebook, Gmail and any management website.

Tags: In HTML tags are instruction to perform a particular task. There are multiple tags list given below.

 Html  Title  Anchor  Bold

 Head  Style  Image  Strong tag
 Body  Script  Heading(h1, h2,  Italic tag
 Link h3, h4, h5, h6)  Span tag
 Meta  Paragraph  Font
 Mark
  Super script  Del  List tag  Form
 Sup script  Table  UL  Input
 Break tag  Thead  OL  Label
 Horizontal  Th  Li  Select
 Address  Tbody  DL  Option
 Pre tag  Tr  DT  Data list
 Center  Td  DD  Button

 Div  Details  Header  Article

 iframe  Summary  Footer  Figure
 fieldset  Audio  Nav  Figcaption
 legend  Video  Section
 Source  Aside

Anchor tag: Anchor tag is a navigation tag. using this tag we create navigation menu.

Syntax:

<a href=”page-name.ext”>Page Name</a>

Example:

<html>

<head></head>

<body>

<a href=”home.html”>Home</a>

<a href=”about.html”>About</a>

</body>

</htm>
Attributes of tag: With anchor tag, we used 2 more properties.

 Target
 Title

Target: The target attribute specifies where to open the linked document.

Syntax:

Target=”_blank|_parent_|_self|_top”

<a href=”home.html” target=”_blank”>Home</a>

Title: The title attribute specifies about title of navigation menu when user drag cursor on navigation
menu.

Syntax:

Title=”text”

<a href=”home.html” title=”home”>Home</a>

Image tag:This tag is used to show image in webpage.

Syntax:

<img src=”image-name.extension”/>

Example:

<img src=”facebook.jpg”/>

Attributes of tag:

 Height
 Width
 Alt
 Title
Height: This attribute is used to set height of image tag.

Syntax:

Height=”size”

Example:

<img src=”facebook.jpg” height=”200px”/>

Width: This attribute is used to set width of image tag.

Syntax:

Width=”size”

Example:

<img src=”facebook.jpg” width=”200px”/>

Title: This attribute is used to show title of image when user drag cursor on image.

Syntax:

Title=”text”

Example:

<img src=”facebook.jpg” title=”facebook”/>

Alt: Specifies an alternate text for an image.

Syntax:

Alt=”text”

Example:

<img src=”facebook.jpg” alt=”facebook”/>

Heading tag: Heading tag is used to show heading in our webpage. There are 6 types of heading tags.

 <h1>Text</h1>
 <h2>Text</h2>
 <h3>Text</h3>
 <h4>Text</h4>
 <h5>Text</h5>
 <h6>Text</h6>

Each heading tag has define according to its font size. As <h1> is so largest heading tag and <h2> is
smallest and list this <h3> is smallest with other previous tag and <h4>,<h5> and <h6> is smallest
with other previous tag.

Example:

<h1>This is h1 tag</h1>

<h2>This is h1 tag</h2>

<h3>This is h1 tag</h3>

<h4>This is h1 tag</h4>

<h5>This is h1 tag</h5>

<h6>This is h1 tag</h6>

Paragraph tag: This tag is used to show paragraph in web page.

Syntax:

<p>Text</p>

Example:

<p>This is Example of Paragraph tag.</p>

Some Modifier tags:

Bold tag: This tag is used to make text content as bold.

Syntax:

<b>Text</b>
Example:

<p>This is example of <b>Bold tag</b></p>

Strong tag: This tag is also used to make text content as bold.

Syntax:

<strong>text</strong>

Example:

<p>This is example of <strong>Strong tag</strong></p>

Italic tag: This tag is used to make text content as italic.

Syntax:

<i>text</i>

Example:

<p>This is example of <i>Italic tag</i></p>

Underline tag: This tag is used to show text content with underline.

Syntax:

<u>Text</u>

Example:

<h1>this is example of <u>underline tag</u></h1>

Pre Tag: The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line
breaks. The text will be displayed exactly as written in the HTML source code.

Syntax:

<pre>Text</pre>

Example:

<pre>This is pre tag</pre>

Span tag: This tag is used to perform some change in some other content of paragraph or heading tag.

Syntax:

<span>Text</span>

Example:

<p>This is example of <span style=”color:red”>Span tag</span></p>

Super Script tag:Superscript tag appears half a character above the normal line, and is sometimes
rendered in a smaller font.

Syntax:

^text

Example:

<p>a²</p>

Sub Script tag:Subscript text appears half a character below the normal line, and is sometimes
rendered in a smaller font. Subscript text can be used for chemical formulas, like H 2O.

Syntax:

_Text

Example:

<p>H₂O</p>

Center tag: This tag is used to show text content in center of page in web page.

Syntax:

<center></center>

Example:

<center><p>This is example of center tag</p></center>

Break tag: This tag is used to show content in new line. We can also say tag this tag is used to change
line of tag.

Syntax:

<br/>

Example:

<p>This is example of <br/> Break Tag</p>

Horizontal tag: This tag is used show a horizontal line.

Syntax:

<hr/>

Example:

<hr/>

Del tag: This tag defines text that has been deleted from a document. Browsers will usually strike a line
through deleted text.

Syntax:

<del>Text</del>

Example:

<p>This text has been <del>Deleted</del></p>

Mark tag: This tag is used to height light text content with their background.

Syntax:

<mark>Text</mark>

Example:

<p>This example of <mark>Mark tag</mark></p>

Address tag: This tag is used to show contact details in webpage.

Syntax:

<address></address>

Example:

<address>

<p>Contact: 7905670712</p>

</address>

Font tag: This tag is used to change color of tag, change font size of tag and also used to change font
of tag.

Syntax:

<font color=”color-name” size=”size” face=”font”>text</font>

Exazmple:

<p><font color=”red” size=”20” face=”tahoma”>This is example of font tag</font></p>

Marquee: This tag is used to scroll any content in our webpage.

Syntax:

<marquee>tag</marquee>

Attributes: To control marquee tag, we use few controlling attributes with it.

1. Direction: To change scrolling direction of marquee tag, we used direction attribute.

Syntax: direction=”left/right/up/down”
2. Behavior: To change scrolling behavior of marquee tag, we used this attribute.
Syntax: behavior=”scroll/slide/alternate”
3. Scrollamount: To change scrolling speed, we used scrollamount attribute.
Syntax: scrollamount=”value”
4. Scrolldelay: To decrease scrolling speed of marquee, we use scrolldelay property.
Syntax: scrolldelay=”value”
5. Onmouseover: To stop scrolling of marquee, when cursor is on the content. We use this
attribute.
Syntax: onmouseover=”this.stop()”
6. Onmouseout: To restart scrolling of marquee, when mouse is out of content, we use this
attribute.
Syntax: onmouseout=”this.start()”
Table: Table tag is a html tag, which is used to create data grid system, divide a web page in multiple
parts and also used to create the structure of any kind form.

In syntax of table tag, we use few of tag for creating datagrid.

We table tag, for create table head we use <thead> tag, for writing table heading we use<th> tag, for
creating table body we use<tbody> tag, for creating table row we use <tr> tag and for creating table
data we use <td>tag.

Syntax:

<table>

<thead>

<th>text</th>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

Attribute: With table tag, we used 7 attributes, which given blow:

1. Border
2. Align
3. Valign
4. Rowspan
5. Colspan
6. Height
7. Width
8. Cellpadding
9. Cellspacing

Border: To show border of table tag, we used border attribute.

Syntax: border=”1”

Align: To set content and table tag in specific place in our webpage horizontally, we used align.

Syntax: align=”left/right/center”

Valign: To set content and table tag in specific place vertically in webpage, we used valign.

Syntax: valign=”top/middle/bottom”

Colspan: To marge two or more than two column, we use Colspan.

Syntax: Colspan=”columns value”

Rowspan: To marge two or more than two rows, we use rowspan.

Syntax: rowspan=”columns value.”

Height: To set height of table tag, we use height.

Syntax: height=”value”

Width: To set width of table tag, we use width.

Syntax: width=”value”

Example:

<html>
<head>
</head>
<body>
<table border="2" height="300px" width="300px" align="center" valign="middle">
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
 <td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Div: This tag is used to defines a division or a section in html.This tag is also used as container of html
tag. This tag is easily styled by using the class or id attribute.
This is used as table tag. but they both are different with each other in comparison to syntax and
working.
Syntax: <div></div>
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="background-color: red; color: white; padding: 50px ;">
<h1>Hi this is Amit Kumar</h1>
</div>
</body>
</html>
Form tag: Form tag is used to create web form for user input.
Syntax: <form></form>

Form elements:Form elements are form user input tags, which help us to create a proper form.
There are multiple form elements, which given below.

Input : The <input> tag specifies an input field where the user can enter data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

Input text: This tag is used to input values such as name, father name and etc.

Syntax: <input type=”text”/>

Input email: This tag is used to input email.

Syntax: <input type=”email”/>

Input password: This tag is used to input password.

Syntax: <input type=”password”/>

Input file: This tag is used to show file upload option in webpage.

Syntax: <input type=”file”/>

Input date: This tag is used to show date picker.

Syntax: <input type=”date”/>

Input number: This tag is used to input number value.

Syntax: <input type=”number”/>

Input color: This tag is used to show color picker.

Syntax: <input type=”color”/>

Input hidden: This tag is used to hide text field.

Syntax: <input type=”hidden”/>

Input radio: To show multiple option for selecting anyone , we use this tag.

Syntax : <input type=”radio”/>

Input checkbox: This tag is used to show checkbox option in webpage.

Syntax: <input type=”checkbox”/>

Input submit: This tag is used to show submit button.

Syntax: <input type=”submit” value=”text”/>

Textarea: To show multiline text box, we use text area.

Syntax: <textarea></textarea>

Select tag: To show dropdown option tag, we used select tag.

Syntax: <select></select>

Option tag: To show option in dropdown tag (select), we used this tag.

Syntax: <option></option>

Data list tag: To show dropdown tag with text filed, we used this tag, with this tag, we also used option
tag.

Syntax: <datalist></datalist>

Label: This tag is used to define about entity name in form.

Syntax: <label>Text</label>

Button:This tag is also used to create button.

Syntax: <button>Submit</button>

Example of Form tag and form element:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label>Name</label>
<input type="text">
<br>
<label>Email</label>
<input type="email">
<br>
<label>Contact</label>
<input type="number" name="">
<br>
<label>Password</label>
<input type="password" name="">
<br>
<label>Picture</label>
<input type="file" name="">
<br>
<label>Date Of Birth</label>
<input type="date" name="">
<br>
<label>City</label>
<select>
<option>Select</option>
<option>Agra</option>
<option>Kanpur</option>
<option>Kalpi</option>
</select>
<br>
<label>State</label>
<input type="text" list="state" name="">
<datalist id="state">
<option>Uttar Pradesh</option>
<option>Madhya Pradesh</option>
<option>Maharashtra</option>
</datalist>
<br>
<label>Address</label>
<textarea></textarea>
<br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Common Attribute for input tags:

1. Name: This attribute is used to set name of any form element.

2. Value: This attribute is used to hold form element value.
3. Placeholder: This attribute is used to show message field for input.
4. Required: This attribute is used to set mendatory with each form element.

Example: <input type="text" placeholder="Please Enter Name" name="nm">

List tag: This tag is used to show list in webpage.

Type of list tag:

1. Ordered List
2. Unordered List
3. Description List

Ordered List: In order list, all list items are marked with numbers by default.The ordered list starts with
<ol> tag and the list items start with <li> tag.

Syntax:

<ol>

<li>Item</li>

<li>Item</li>

</ol>

Example:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>PHP</li>
<li>Python</li>
<li>Asp.net</li>
<li>Java</li>
</ol>
</body>
</html>
Attribute: To change the format of list we use “type” attribute.

Syntax: type=”i/a”

Example:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type=”a”>
<li>PHP</li>
<li>Python</li>
<li>Asp.net</li>
<li>Java</li>
</ol>
</body>
</html>

Unordered list: In this list tag, all list items are marked with bullet by default. The ordered list starts
with <ul> tag and the list items start with <li> tag.

Syntax:

<ul>

<li>Item</li>

<li>Item</li>

</ul>

Example:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>PHP</li>
<li>Python</li>
<li>Asp.net</li>
<li>Java</li>
</ol>
</body>
</html>
Attribute: To change the format of list we use “type” attribute.

Syntax: type=”square/circle”

Example:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type=”circle”>
<li>PHP</li>
<li>Python</li>
<li>Asp.net</li>
<li>Java</li>
</ul>
</body>
</html>

Description list: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.

2. <dt> tag defines a term.

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

Syntax:

<dl>

<dt>Term</dt>

<dd>Definition</dd>

</dl>
Iframe: This tag specifies an inline frame. An inline frame is used to embed another document within
the page.

Syntax: <iframe src=”source-url”/>

Attribute: This tag has few types of attributes. Which given below.

1. Width: To set width of tag.

Syntax: width=”value”
2. Height: to set height of tag.
Syntax: height=”value”
3. Allowfullscreen: to allow full screen iframe.
Syntax: allowfullscree=”true/false”
4. Loading: Specifies whether a browser should load an iframe immediately or to defer loading
of iframes until some conditions are met
Syntax: loading=”eazer/lazy”

Fieldset: This tag is used for group related element in form. This tag creates a box around the form.

To define the caption of form, we used legend tag also with fieldset.

<fieldset>

<legend>Caption</legend>

Form element

</fieldset>

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>Registration form</legend>
<label>Name</label>
<input type="text">
<br>
 <label>Email</label>
<input type="email">
<br>
<label>Contact</label>
<input type="number" name="">
<br>
<label>Password</label>
<input type="password" name="">
<br>
<label>Picture</label>
<input type="file" name="">
<br>
<label>Date Of Birth</label>
<input type="date" name="">
<br>
<label>City</label>
<select>
<option>Select</option>
<option>Agra</option>
<option>Kanpur</option>
<option>Kalpi</option>
</select>
<br>
<label>State</label>
<input type="text" list="state" name="">
<datalist id="state">
<option>Uttar Pradesh</option>
<option>Madhya Pradesh</option>
<option>Maharashtra</option>
</datalist>
<br>
<label>Address</label>
<textarea></textarea>
<br>
<input type="submit" value="Submit"/>
</fieldset>
</form>
</body>
</html>

Audio/Video : To show audio and video play option in web page we use audio & video tag.

Syntax of audio:

<audio controls>

<source src=”song-name.mp3” type=”mp3”/>

</audio>
Syntax of video:

<vedio controls>

<source src=”song-name.mp4” type=”mp4”/>

</vedio>

Header tag:This tag is used as a container of introductory content or navigation links. Generally a
<header> element contains one or more heading elements, logo or icons or author's information.

You can use several <header> elements in one document, but a <header> element cannot be placed
within a <footer>, <address> or another <header> element.

Syntax:

<header></header>

Example:

<html>

<head></head>

<body>

<header>
<h2>ABCOnline.com</h2>
<p> World's no.1 shopping website</p>
</header>

</body>

</html>

Nav tag: This tag is used to represent a section which contains navigation links, either within current
document or to another document.

Syntax:

<nav>Tag</nav>
Example:

<html>
<head>
</head>
<body>
<h1>Example of Nav tag</h1>
<nav>
<a href="#">Home</a> |
<a href="#">Courses</a> |
<a href="#">About-us</a> |
<a href="#">Contact-us</a> |
</nav>
</body>
</html>

Section tag: This tag is used to divide a webpage in multiple section.

Syntax: <section></section>

Example:

<html>
<head>
</head>
<body>
<section>
<h1>About me</h1>
<p>This is example of section, which is divided a web page in multiple section for writing and showing
multiple content vertically.</p>
</section>
</body>
</html>

Aside: This tag is used as container of sub-heading and its content.

Syntax: <aside></aside>
Example:

<html>

<head></head>

<body>

<p>In HTML Tag, we also used h1 tag.</p>

<aside>

<h3>h1 tag</h3>

<p>This tag is also heading tag and used as third type of heading tag for its
font-size.</p>

</aside>

</body>

</html>

Article: The article tag content makes sense on its own. It is independent and complete from other
content shown on the page. This tag is generally used on Forum post, Blog post, News story, comment
etc.

Syntax:

<article>Tag</article>
Example:

<html>

<head></head>

<body>

<article>
<h2>Narendra Modi</h2>
<i>(Naam to suna hi hoga) </i>
<p>Narendra DamodarDas Modi is the 15th and current Prime Minister of India,
Modi, a leader of the Bharatiya Janata Party (BJP), previously served as the
Chief Minister of Gujarat state from 2001 to 2014. He is currently
the Member of Parliament (MP) from Varanasi. </p>
</article>

</body>

</html>

Figure: This tag is used as container of image tag.

Syntax:

<figure>

<img src=”image-name.extension”/>

</figure>
Figcation: This tag is used to write about image caption.

Syntax: <Figcaption>Caption</Figcaption>

Example:

<html>

<head></head>

<body>

<figure>
<img src=”event.jpg”/>
<Figcaption>This image is an event image.</Figcaption>
</figure>

</body>

</html>

Footer Tag: This tag is used to create footer section of webpage.

Syntax:

<footer></footer>

Exmple:
<html>
<head></head>
<body>

<footer>
<p>&Copy Copyright By Infority IT Services.</p>
</footer>
</body>
</html>