Bhavitha Cherukuri: HTML Paragraphs

HTML Paragraphs

A paragraph always starts in a new line.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example

<!doctype html>
<html>
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At consectetur ea assumenda doloribus, harum, quasi ab cum, eaque ullam illo provident repellat excepturi a alias commodi vitae quas dolorem dolore!</p>
        
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non harum quasi voluptatem id optio eaque, magni nostrum inventore, sapiente, fugit natus atque consectetur repellat. Voluptas vero earum autem saepe a.</p>
    </body>
</html>

There are two paragraphs and each paragraph is started in a new line as shown below:

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

Example

<!doctype html>
<html>
    <head>
        <title>paragraphs</title>
    </head>
    <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>
    </body>
</html>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis expedita commodi fugit explicabo est culpa consequatur eaque minima velit delectus, maiores soluta exercitationem corrupti reiciendis ipsam ex accusantium, odit deserunt!</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 3</h2>
<p>This is some other text.</p>

</body>
</html>