HTML
• HTML stands for HyperText Markup Language.
• HTML is used to create web pages and web applications.
• HTML is widely used language on the web.
• We can create a static website by HTML only.
• Technically, HTML is a Markup language rather than a programming language.
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• Tim Berners-Lee is known as the father of HTML.
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications.
Hyper Text:
HyperText simply means "Text within Text." A text has a link within it, is a
hypertext.
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.
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.
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</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>. Is the root element of an HTML page
<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.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
Attribute: An attribute in HTML provides extra information about the element,
and it is applied within the start tag. An HTML attribute contains two fields:
name & value.
HTML Tags
• HTML tags are like keywords which defines that how web browser will format
and display the content.
• With the help of tags, a web browser can distinguish between an HTML
content and a simple content.
• HTML tags contain three main parts: opening tag, content and closing tag.
• But some HTML tags are unclosed tags.
• When a web browser reads an HTML document, browser reads it from top to
bottom and left to right.
• All HTML tags must enclosed within < > these brackets.
• Every tag in HTML perform different tasks.
• If you have used an open tag <tag>, then you must use a close tag </tag>
(except some tags)
• HTML Tags are always written in lowercase letters.
HTML Tags
HTML Comments
• Comments are some text or code written in your code to give an explanation
about the code, and not visible to the user.
• Anything written between these tags will be ignored by the browser, so
comments will not be visible on the webpage.
• Comments of any code make code easy to understand and increase
readability of code.
• Comments are also part of the code, which gives an explanation of the code.
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
Multiline Comment
In HTML code, we can also comments multiple lines at a time. In multiline
comment we can use any description about code or multiple line code to
debug, etc.
Syntax
<!---
Your code is commented.
Write description of code.
It will not display at webpage.
-->
HTML <!DOCTYPE> tag
• On the HTML document you have often seen that there is a <!DOCTYPE html>
declaration before the <html> tag.
• HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML
used in the document.
• It is called as the document type declaration (DTD).
• Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser
about the document type.
• It is a null element which does not contain the closing tag, and must not include any
content within it.
• DOCTYPE declaration is not case sensitive.
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value“
• The Attributes name and values are case sensitive, and it is recommended
that it should be written in Lowercase only.
• You can add multiple attributes in one HTML element, but need to give
space between two attributes.
Syntax
<element attribute_name="value">content</element>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style=" color: blue">It will add style property in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
The title attribute in HTML
• The title attribute is used as text tooltip in most of the browsers.
• It display its text when user move the cursor over a link or any text.
• You can use it with any text or link to show the description about that link or
text.
• In our example, we are taking this with paragraph tag and heading tag.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title="This is heading tag">Example of title attribute</h1>
<p title="This is paragraph tag">Move the cursor over the heading and para
graph, and you will see a description as a tooltip</p>
</body>
</html>
The href attribute in HTML
• The href attribute is the main attribute of <a> anchor tag.
• This attribute gives the link address which is specified in that link.
• The href attribute provides the hyperlink, and if it is blank, then it will
remain in same page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Display of href attribute</h1>
<p>Below is the link of anchor tag, click the link and see the next page</p>
<a href=https://www.google.com> Click here for google</a>
</body>
</html>
Quotes: single quotes or double quotes?
We have used attribute with double quotes, but single quotes can also be
used in HTML.
Use of single quotes with HTML attribute, is also allowed.
The following both statements are absolutely fine.
<a href="https://www.javatpoint.com">A link to HTML.</a>
<a href='https://www.javatpoint.com'>A link to HTML.</a>
IN HTML5, you can also omit use of quotes around attribute values.
<a href=https://www.javatpoint.com>A link to HTML.</a>
The src Attribute
• The src attribute is one of the important and required attribute of <img>
element.
• It is source for the image which is required to display on browser.
• This attribute can contain image in same directory or another directory.
• The image name or source should be correct else browser will not display
the image.
• The height and width attribute, defines the height and width of image onthe
web page.
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image
source is specified in the src attribute:</p>
<img src="Jade.jpg" width="500" height="600">
</body>
</html>
HTML Elements
• An HTML file is made of elements.
• These elements are responsible for creating web pages and define content in
that webpage.
• An element in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them.
• An element is a collection of start tag, attributes, end tag, content between
them.
• Some elements does not have end tag and content, these elements are
termed as empty elements or self-closing element or void elements.
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
HTML <br> tag
• The <br> tag in HTML document is used to create a line break in a text.
• It is generally used in poem or address where the division of line is necessary.
• It is an empty tag, which means it does not need a company of end tag.
• If you place the <br> tag in the HTML code, then it works the same as
pressing the enter key in a word processor.
Difference between HTML <br> and <br/>
You can use HTML br tag two ways: <br> or <br/>. It is recommended to use
closed br tag <br/> because it is supported in HTML and XHTML both.
<!DOCTYPE HTML>
<html>
<head>
<title>
Example of BR tag
</title>
</head>
<body>
<p>If you want to break a line <br> in a paragraph, <br> use the BR element in <
br> your HTML document. </p>
</body>
</html>
HTML hr tag
• HTML <hr> tag is used to specify a paragraph-level thematic break in HTML
document.
• It is used when you abruptly change your topic in your HTML document.
• It draw a horizontal line between them.
• It is also called a Horizontal Rule in HTML.
<!DOCTYPE html>
<html>
<body>
<h2>HTML</h2>
<p>HTML is a language for describing web pages.</p>
<hr/>
<h2>HR Tag </h2>
<p> HR tag is used to draw a horizontal line within the texts to sepate
content.<p>
</body>
</html>
HTML Formatting
• HTML Formatting is a process of formatting text for better look and feel.
• HTML provides us ability to format text .
• There are many formatting tags in HTML.
• These tags are used to make text bold, italicized, or underlined.
• There are almost 14 options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
1. Physical tag: These tags are used to provide the visual appearance to the text.
2. Logical tag: These tags are used to add some logical or semantic value to the text.
1) Bold Text
• HTML<b> and <strong> formatting elements.
• The HTML <b> element is a physical tag which display text in bold font.
• If you write anything within <b>............</b> element, is shown in bold letters.
<!DOCTYPE>
<html>
<body>
<p> <b>Write Your First Paragraph in bold text.</b></p>
</body>
</html>
• The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance.
• If you write anything between <strong>???????. </strong>, is shown important text.
<!DOCTYPE>
<html>
<body>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
2) Italic Text
The HTML <i> element is physical element, which display the enclosed content in
italic font, without any added importance.
If you write anything within <i>............</i> element, is shown in italic letters.
<!DOCTYPE>
<html>
<body>
<p> <i>Write Your First Paragraph in italic text.</i></p>
</body>
</html>
The HTML <em> tag is a logical element, which will display the enclosed content in
italic font, with added semantics importance.
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
<!DOCTYPE>
<html>
<body>
<h2> I want to put a <mark> Mark</mark> on your face</h2>
</body>
</html>
4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
<!DOCTYPE>
<html>
<body>
<p> <u>Write Your First Paragraph in underlined text.</u></p>
</body>
</html>
5) Strike Text
Anything written within <strike>.......................</strike> element is displayed
with strikethrough. It is a thin line which cross the statement.
<!DOCTYPE>
<html>
<body>
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
</body>
</html>
6) Monospaced Font
If you want each letter has the same width then you should write the content
within <tt>.............</tt> element.
Monospaced Font provides similar space among every letter.
<!DOCTYPE>
<html>
<body>
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
</body>
</html>
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in
superscript; means it is displayed half a character's height above the other
characters.
<!DOCTYPE>
<html>
<body>
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
</body>
</html>
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in
subscript ; means it is displayed half a character's height below the other
characters.
<!DOCTYPE>
<html>
<body>
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
</body>
</html>
9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.
<!DOCTYPE>
<html>
<body>
<p>Hello <del>Delete your first paragraph.</del></p>
</body>
</html>
10) Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.
<!DOCTYPE>
<html>
<body>
<p> <del>Delete your first paragraph.</del><ins>Write another
paragraph.</ins></p>
</body>
</html>
11) Larger Text
If you want to put your font size larger than the rest of the text then put the
content within <big>.........</big>. It increase one font size larger than the
previous one.
<!DOCTYPE>
<html>
<body>
<p>Hello <big>Write the paragraph in larger font.</big></p>
</body>
</html>
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the
content within <small>.........</small>tag. It reduces one font size than the
previous one.
<!DOCTYPE>
<html>
<body>
<p>Hello <small>Write the paragraph in smaller font.</small></p>
</body>
</html>
HTML Heading
• A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage.
• When you place the text within the heading tags <h1>.........</h1>, it is
displayed on the browser in the bold format and size of the text depends on
the number of heading.
• There are six different HTML headings which are defined with the <h1> to <h6>
tags, from highest level h1 (main heading) to the least level h6 (least important
heading).
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
HTML Paragraph
• HTML paragraph or HTML p tag is used to define a paragraph in a webpage.
• It is a notable point that a browser itself add an empty line before and after a
paragraph
• An HTML <p> tag indicates starting of new paragraph.
• If we are using various <p> tags in one HTML file then browser automatically
adds a single blank line between the two paragraphs.
<!DOCTYPE html>
<html>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</body>
</html>
Space inside HTML Paragraph
<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>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>
Using <br> and <hr> tag with paragraph
<!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.
</p>
</body>
</html>
HTML Phrase tag
The HTML phrase tags are special purpose tags, which defines the structural
meaning of a block of text or semantics of text.
• Abbreviation tag : <abbr>
• Acronym tag: <acronym> (not supported in HTML5)
• Marked tag: <mark>
• Strong tag: <strong>
• Emphasized tag : <em>
• Definition tag: <dfn>
• Quoting tag: <blockquote>
• Short quote tag : <q>
• Code tag: <code>
• Keyboard tag: <kbd>
• Address tag: <address>
1. Text Abbreviation tag
This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr>
and </abbr> tag.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Hypertext Markup language </h2>
<p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used
to create web pages.
</p>
</body>
</html>
2. Definition tag:
When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the
content.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Example of definition element</h2>
<p><dfn>HTML </dfn> is a markup language. </p>
</body>
</html>
3.Quoting text:
The HTML <blockquote> element shows that the enclosed content is quoted
from another source. The Source URL can be given using the cite attribute, and
text representation of source can display using <cite> ..... </cite>element.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Example of blockquote element</h2>
<blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>"The
first step toward success is taken when you refuse to be a captive of the
environment in which you first find yourself."</p></blockquote>
<cite>-Mark Caine</cite>
</body>
</html>
4.Short Quotations:
An HTML <q> ....... </q> element defines a short quotation. If you will put any
content between <q> ....... </q>, then it will enclose the text in double quotes.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Great Motivational quote</p>
<p>Steve Jobs said: <q>If You Are Working On Something That You Really
Care About, You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p>
</body>
</html>
5. Code tags
The HTML <code> </code> element is used to display the part of computer code. It
will display the content in monospaced font.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>First Java program</p>
<p><code>class Simple{ public static void main(String args[]){
System.out.println("Hello Java"); }} </code>
</p>
</body>
</html>
6. Keyboard Tag
In HTML the keyboard tag, <kbd>, indicates that a section of content is a user
input from keyboard.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Keyboard input. </p>
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to
restore page on chrome.</p>
</body>
</html>
7. Address tag
An HTML <address> tag defines the contact information about the author of the
content. The content written between <address> and </address> tag, then it will
be displayed in italic font.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Address Tag</p>
<address> You can ask your queries by contact us on <a href="
">example123@newdomain.com</a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
</address>
</body>
</html>
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML image
element.
<!DOCTYPE>
<html>
<body>
<h2>HTML Image Example</h2>
<img src="jade.jpg" alt="Good Morning Friends"/>
</body>
</html>
Attributes of HTML img tag
1) src
It is a necessary attribute that describes the source or path of the image. It
instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describe the image in words.
3) width:It is used to specify the width to display the image.
4) height:It is used to specify the height of the image.
<!DOCTYPE html>
<html>
<head>
<title>Image tag</title>
</head>
<body>
<h2>HTML image example with height and width</h2>
<img src="jade.jpg" height="180" width="300" alt="animal image">
</body>
</html>
HTML 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 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.
<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.
<!DOCTYPE>
<html>
<body>
<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>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
HTML 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:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
We can create a list inside another list, which will be termed as nested List.
HTML Ordered List or Numbered List
• In the ordered HTML lists, all the list items are marked with numbers by
default.
• It is known as numbered list also.
• The ordered list starts with <ol> tag and the list items start with <li> tag.
<!DOCTYPE>
<html>
<body>
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
</body>
</html>
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)
• Capital Alphabet (A B C)
• Small Alphabet (a b c)
Type Description
Type "1" This is the default type. In this type, the list items are numbered with
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 "A" In this type, the list items are numbered with upper case letters.
Type "a" In this type, the list items are numbered with lower case letters.
<!DOCTYPE html>
<html>
<body>
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
HTML Unordered List or Bulleted List
• In HTML Unordered list, all the list items are marked with bullets.
• It is also known as bulleted list also.
• The Unordered list starts with <ul> tag and list items start with the <li> tag.
<!DOCTYPE>
<html>
<body>
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>
</html>
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 "square" In this style, the list items are marked with squares.
Type "none" In this style, the list items are not marked .
<!DOCTYPE html>
<html>
<body>
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
HTML Description List or Definition 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.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
<!DOCTYPE>
<html>
<body>
<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>
</body>
</html>
HTML – Backgrounds
By default, the webpage background is white in color.
• HTML Background with Colors
• HTML Background with Images
Html Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Background Color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Good morning all. have a great day.
</p>
</body>
</html>
Text Color
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Good morning.</p>
<p style="color:MediumSeaGreen;">Welcome to all</p>
</body>
</html>
Border Color
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Background Image
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
</p>
</body>
</html>
HTML Div Tag
• The HTML <div> tag is used to group the large section of HTML elements
together.
• The div tag is generally used by web developers to group HTML elements
together and apply CSS styles to many elements at once.
• For example: If you wrap a set of paragraph elements into a div element so
you can take the advantage of CSS styles and apply font style to all
paragraphs at once instead of coding the same style for each paragraph
element.
<!DOCTYPE>
<html>
<body>
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to Kerala, God's own country</p>
<p>Virat Kohli , King of cricket</p>
<p>This is second paragraph</p>
</div>
</body>
</html>
