Headings and Paragraphs
HTML headings serve as titles or subtitles intended for display on a webpage. They are designated using the
to tags, where <h1> represents the most significant heading and <h6> indicates the least important one, which creates at hierarchical structure.
​
​
Search engines rely on headings to organize and index the structure and content of your web pages. You should consider using <h1> for primary headings, followed by <h2> for subheadings, and for less significant headings, and so forth.
​
​
​Every HTML heading comes with a default size. Nevertheless, you can define the size of any heading by using the style attribute along with the CSS font-size property.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output
The <p> tag is used to define a paragraph. Each paragraph begins on a new line, and browsers automatically insert some white space (margin) both before and after it.
HTML
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Output
You can't guarantee how HTML will appear. Different screen sizes, whether large or small, and resized windows will yield varying results. Additionally, adding extra spaces or lines in your HTML code won't affect the display. The browser will automatically eliminate any unnecessary spaces and lines when rendering the page.
HTML
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Output
Horizontal Rules in HTML
The tag creates a thematic break in an HTML document, typically shown as a horizontal line. It is utilized to divide content or indicate a shift within the page.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
Output
How to keep spaces and line breaks?
Lets supposed you want to add a poem to your site, and you need to keep spaces and line breaks. If you only add the text as paragraph, HTML will automatically delete those spaces and line breaks. See example below.
HTML
<!DOCTYPE html>
<html>
<body>
<p>The <p> tag does not preserve both spaces and line breaks:</p>
<p>
And the Raven, never flitting, still is sitting, still is sitting
On the pallid bust of Pallas just above my chamber door;
And his eyes have all the seeming of a demon's that is dreaming,
And the lamplight o'er him streaming
throws his shadow on the floor; And my soul from out that shadow that lies floating on the
floor;
Shall be lifted–nevermore!
</p>
</body>
</html>
Output
There are two ways of keeping line breaks on texts.
-
Adding a <br> element at the end of each line. ​​
HTML
<!DOCTYPE html>
<html>
<body>
<p>The <p> tag does not preserve both spaces and line breaks:</p>
<p>
And the Raven, never flitting, still is sitting, still is sitting<br>
On the pallid bust of Pallas just above my chamber door;<br>
And his eyes have all the seeming of a demon's that is dreaming,<br>
And the lamplight o'er him streaming<br>
throws his shadow on the floor; And my soul from out that shadow<br> that lies floating on the
floor;<br>
Shall be lifted–nevermore!
</p>
</body>
</html>
Output
-
Using the <pre> element.
​
Note: the text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
​
HTML
<!DOCTYPE html>
<html>
<body>
<p>The <pre> tag does preserve both spaces and line breaks:</p>
<pre>
And the Raven, never flitting, still is sitting, still is sitting
On the pallid bust of Pallas just above my chamber door;
And his eyes have all the seeming of a demon's that is dreaming,
And the lamplight o'er him streaming throws his shadow on the
floor;
And my soul from out that shadow that lies floating on the floor
Shall be lifted–nevermore!
</pre>
</body>
</html>
Output