Grouping The Text
In HTML, you can group the text using the <div> tag and style it, as you want using the <span> tag. The purpose of grouping a text is to apply a common style of formatting to the selected text. Two important formatting elements used in grouping the text are the <div> and <span> tags.
Grouping Text as Blocks
The <div> tag provides an easy way to refer to a block of text. This tag defines logical divisions or sections in a Web page. It acts like the <p> tag, but divides the page into larger sections. You can define a section of Web page and give that section a different style with the help of the tag. This tag places a line break before and after the <div> element.
Let’s do the following steps to group text as blocks:
<!DOCTYPE html>
<head>
<title> Grouping Text as Blocks</title>
</head>
<body>
<p>This is an example of grouping text as blocks.</p>
<div style=”color:red”>
<h4> This is an example of header in div section.</h4>
<p> This is an example of paragraph in div section. </p>
</div>
<p> The formatting style is not applied in this line.</p>
</body>
</html> Save the document with the name GroupingText.html and Open the HTML document in browser, as shown look like:
This is an example of grouping text as blocks.
This is an example of header in div section.
This is an example of paragraph in div section.
The formatting style is not applied in this line.
In this output you can see the text grouped as blocks. The text between the opening <div> and closing </div> tags appears in red color; whereas, the text outside the <div> tags appears in black color.
Grouping Inline Text
In case you do not have a well-defined black of text to work with, you can use the <span> tag to select and apply style rules to it. To be more specific, you can use the <span> tag to apply inline styles. You can use the <span> tag to apply styles to the text, which is written in the middle of other texts. The <span> tag tells the Web browser to apply the style rules to the text within it.
Let’s do the following steps to group inline text:
<!DOCTYPE html>
<head>
<title> Grouping Text as Blocks</title>
</head>
<body>
<p>This is an example of grouping text as blocks.
<span style=”color:blue”>
This text should be in different line.
</span>
The text is grouped.
</p>
<p>
<span style=”red”>
This text comes in different paragraph.
</span>
</p>
</body>
</html> Save the document with the name GroupingInlineText.html and Open the HTML document in browser, as shown look like:
This is an example of grouping text as blocks.
This text should be in different line.
The text is grouped.
This text comes in different paragraph.
The major difference between the <div> and <span> tags is that the <span> tag does not perform formatting on its own.
In this section, we using the inline styles in the examples. You learn more about the inline styles in further tutorial.
Let’s learn about how to indent the text as quotations. Click next button.
Indenting Quotations
In HTML, you can indent and style the text as quotations. The <blockquote> tag is used for long and multiline quotations. The blockquote element begins with the <blockquote> tag and ends with the </blockquote> tag. The <blockquote> tag contains only block-level elements within it, and not just the plain text. In a block-level element, you do not need to set margins on the Web page. The <blockquote> tag simplifies the task of setting margins for quotations on the Web page. You can use the <q> tag for shorter quotations on the Web page.
Let’s do the following steps to indent quotations:
<!DOCTYPE html>
<head>
<title> Indenting quotations</title>
</head>
<body>
This is a long quotations:
<blockquote>
The blockquote element insert line break and sets margin. You do not need to set margins when using blockquote element.
</blockquote>
Here comes a short quotation”
<q> This is a short quotation:</q>
<p><b>Note:</b> The Blockquote defines the start of a long quotation.</p>
</body>
</html>
This is a long quotations:
The blockquote element insert line break and sets margin. You do not need to set margins when using blockquote element.
Here comes a short quotationâ€
This is a short quotation:
Note: The Blockquote defines the start of a long quotation.