Use of the Paragraph Element in HTML 5

Mastering HTML5 - Part 10

Forward: In this part of the series we look at the use of the paragraph element in HTML 5.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 10 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series we look at the use of the paragraph element in HTML 5.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Expectation in HTML 5 of the Paragraph Element
HTML 5 does not expect you, the coder, to type text and small HTML elements arbitrarily in the body element. You should type text and small elements in some bigger element or in the paragraph element.

The Paragraph and Text
If you have text to type, no matter how short it is, place the text in the paragraph element as in,

    <p>
        text text text …
    </p>

The Paragraph Element and Form Controls
If you have form controls to type, one per line, you type the controls, one per paragraph element per line, as in:

    <p><label>First Name: <input type="text"></label></p>
    <p><label>Middle Name: <input type="text"></label></p>
    <p><label>Last Name: <input type="text"></label></p>

If you want to have the controls displayed in one line, you type them in one paragraph element as in:

    <p><label>First Name: <input type="text"> </label><label>Middle Name: <input type="text"> </label><label>Last Name: <input type="text"> </label></p>

These three input text elements in the one paragraph element as they are, will not very much be separated at the browser. When you will learn CSS3 in my blog, you will learn how to separate them, using CSS.

The Paragraph Elements and Hyperlinks
If you have several hyperlinks to be displayed in one line, type them in a paragraph element as in:

    <p><a href="url1">title1</a><a href="url2">title2</a><a href="url3">title3</a></p>

These three hyperlinks typed as such will not be separated at the browser. When you will learn CSS3, you will learn how to separate them with CSS.

Imagine a nav element floated to one end of the screen (browser window). In such an element the hyperlinks are displayed, one per line. In this case you type the hyperlinks, one per paragraph element per line, as in:

<nav style="display:inline;float:left">
    <p><a href="url1">title1</a></p>
    <p><a href="url2">title2</a></p>
    <p><a href="url3">title3</a></p>
    <p><a href="url4">title4</a></p>
    <p><a href="url5">title5</a></p>
</nav>

The use of the paragraph element avoids the use of the line break element (<br>), and this makes coding convenient. You use the paragraph element for ordinary text, for form controls and for hyperlinks.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Use of the Paragraph Element in HTML 5

Mastering HTML5 - Part 10

Introduction

Related Links

Comments