A number of elements are designed to group content on a web page.
Div element
The div element is used to structure content on a web page, to enclose the content in separate blocks. The div creates a block that, by default, stretches to the full width of the browser, and the element following the div wraps to a new line. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping HTML5</title>
</head>
<body>
<div> HTML5 Document Title </div>
<div> HTML5 document text </div>
</body>
</html>
Paragraphs
Paragraphs are created using <p> and </p> tags that enclose some content. Each new paragraph is placed on a new line. Let’s apply the paragraphs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping HTML5</title>
</head>
<body>
<div>Grouping HTML5</div>
<div>
<p>This is a Paragraph</p>
<p>This is another Paragraph</p>
</div>
</body>
</html>
If, within the framework of one paragraph, we need to wrap the text on another line, then we can use the <br/> element :
<p>First line.<br/>Second line.</p>
Pre element
The pre element outputs the preformatted text as defined:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping HTML5</title>
</head>
<body>
<pre>
First line
Second line
Third line
</pre>
</body>
</html>
Span element
The span element wraps around some text along its entire length, and is primarily used to style the text content it contains. Unlike divs or paragraphs, it span does not wrap content on the next line:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping HTML5</title>
</head>
<body>
<div>HTML5 Document Title</div>
<div>
<p><span style="color:red;">Red</span> Paragraph</p>
<p><span>Simple</span> Paragraph</p>
</div>
</body>
</html>
It should be noted that it does span nothing by itself . So, in the second paragraph, it span did not affect the internal text content in any way. And in the first paragraph, the element span contains a: style attribute style=”color:red;”that sets the embedded text to a red background color.
It should be noted that the elements div and pare block, div element can comprise any other elements, and element p – lowercase elements. In contrast, the element span is inline, that is, it seems to embed its content into an outer container – the same div or paragraph. However, you should not wrap block elements in an inline span element.