Scribd
Upload
10 views4 pages

Grouping Elements - Notes

Uploaded by

singhakki306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views4 pages

Grouping Elements - Notes

Uploaded by

singhakki306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Grouping Element in HTML

Topics Covered:
● What is the <div> tag and its purpose in HTML?
● What is the <span> tag and its purpose in HTML?
● How is the <div> different from <span>?

Topics in Detail:
<div> tag:
● <div> tag in HTML defines the division/section in the document.
● <div> tag is the container of HTML elements.
● It is easy to apply styles and scripts to the HTML elements when they are inside the
<div> tag with help of the attributes of the <div> tag.
● The class and id attributes help in styling and applying scripts to the HTML elements
inside the <div> </div>.
● <div> is a block-level element, so there will be a line before and after the <div> </div>.
● <div> is the most important tag in web development, because it helps us to separate the
content/data in the web page, and helps us to apply different styles and behaviors to
different divisions.
● <div> tag is used to group the large section of HTML elements together.
● <div> tag encapsulates HTML elements and divides the HTML document into sections.
● <div> tag cannot be used inside <p> element.
● Example:

Divisions in the web page

1
Few sub divisions inside the <div class= “header”> </div>

2
<span> tag:
● <span> tag is an inline container.
● <span> tag is used to markup part of text/ content in an element.
● <span> tag also helps to apply styles and scripts easily with help of id and class
attributes similar to <div> tag, but <div> is a block-level element and <span> is an inline
element.
● <span> can be used inside <p> tags, to apply different styles to part of the content in the
<p> tag.
● Example:

span tags used inside the div tags in the web page

3
Difference between div and span tags:

<div> <span>

The <div> tag is a block level element. The <span> tag is an inline element.

It is best to attach it to a section of a web It is best to attach a CSS to a small section of


page. a line in a web page.

It accepts/supports align attribute. It does not accept/support align attribute.

This tag should be used to wrap a section, for This tag should be used to wrap any specific
highlighting that section. word that you want to highlight in your
webpage.

Used for CSS based HTML Layouts. Used to stylise text.

<div> tag displayed in a new line. <span> tag does not begin a new line.

You might also like