Tags for this article: css, html, style sheets, tutorial
Paragraphs serve the text’s optical construction. When producing HTML files, it is not enough to only add a break in the editor. Internet browsers ignore such breaks.
An Example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Text Paragraphs</title>
</head>
<body>
<h1> Defining Text Paragraphs </h1>
<p>A new paragraph begins here, and ends here</p>
<p>A new paragraph begins here, and ends here</p>
</body>
</html>
Explanation:
<p> (p = paragraph) introduces a paragraph of text. </p> ends the paragraph of text and stands at the end of the paragraph.
Take Note:
The </p> end tag is optional in HTML, which means it doesn’t necessarily have to be included. On the other hand, in XHTML it is required. Moreover, it is also good HTML style to include the closing </p> tag. It also makes the meaning of such a tag clearer: It surrounds a block of text – it does not stand for the space in between two paragraphs. If you format the <p> element with style sheets, then that means you already have to write a <p> before the first text block in order for all the paragraphs to have the same formatting.
The <p> element cannot include any block producing elements such as headings, paragraphs or lists. For HTML this means: the paragraph will be implicitly closed (with an internally included </p>) at the first appearance of a tag that is no longer allowed in the current paragraph (such as <ul> or <table>) – an eventually later following </p> will then be alone without any start tag and therefore a mistake. In XHTML the </p> must come before any block producing elements.
The rules regarding the character set, special characters and HTML characters apply to the paragraph text.
Aligning Paragraphs
Paragraphs are aligned left by default. But you can also align a paragraph to the right or centre. Justifying the text is also possible.
An Example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Paragraphs</title>
</head>
<body>
<h1>Aligning Paragraphs</h1>
<p align=”center”>This is a paragraph that has been centred</p>
<p align=”right”>This is a paragraph that has been aligned to the right</p>
<p align=”left”> This is a paragraph that has been aligned to the left</p>
<p align=”justify”> This is a paragraph that has been justified</p>
</body>
</html>
Explanation:
With the align=“center” in the introductory <p> tag you centrally align the paragraph text. With align=“right” the paragraph is aligned to the right. With align=“justify” the paragraph text is justified. With align=“left” the paragraph is aligned to the left as usual.
Take Note:
Not all browsers interpret justifying. Justifying is not suited for small passages of text, because here the relatively large distance between words disrupts the reading flow.
align has been classified as deprecated in the HTML-4 standard. Instead it is recommended to use style sheets in such a manner for example:
<p style= “text-align:center”>…</p>
Formatting Paragraphs with CSS
HTML has no influence on how exactly a paragraph text will be displayed. The browsers use default formats in order to display the texts. However, with style sheets you can format the paragraphs in any way you please. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.
An Example:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Paragraphs with CSS</title>
</head>
<body>
<h1>Formatting Paragraphs with CSS</h1>
<p style=”font-family:Arial,sans-serif; font-size:18px; color:blue”>A formatted paragraph </p>
<p style=”background-color:yellow”>Another formatted paragraph</p>
</body>
</html>
Explanation:
Two paragraphs are defined in the example. The first paragraph is defined to be displayed in Arial font, 18 pixel font size, and in the colour blue. The second paragraph will receive a yellow background.