Markup for Paragraphs - HTML

As with most word processors, HTML includes several tags to delimit, and hence, format paragraphs of text. These tags include the following:

  • <p>—Formatted paragraphs
  • &l;h1> through <h6>—Headings
  • <blockquote>—Quoted text
  • <pre>—Preformatted text
  • <ul>,<ol>, <dl>—Unnumbered, ordered, and definition lists
  • <center>—Centered text
  • <div>—A division of the document

Each of the block elements results in a line break and noticeable space padding after the closing tag. As such, the block elements only work when used to format paragraph-like chunks of text—they cannot be used as inline styles. More detail about each of these tags is covered in the following sections.

Formatted paragraphs
The paragraph tag (<p>) is used to delimit entire paragraphs of text. For example, the following HTML code results in the output :

<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p> <p> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>

Paragraph tags break text into distinct paragraphs.

Paragraph tags break text into distinct paragraphs.

As with most tags, you could define several formatting elements (font, alignment, spacing, and so on) of the <p> tag. For example, you can center a paragraph by adding an align attribute

<p> tag: <p align=“center”> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>

However, such formatting has been deprecated in favor of specifying formatting via style sheets. The following is an example of using style sheets to achieve the same results as the align attribute:

Using either of the preceding methods results in the paragraph being center-justified in the browser.

Headings

HTML supports six levels of headings. Each heading uses a large, usually bold character-formatting style to identify itself as a heading.

HTML supports six levels of headings.

HTML supports six levels of headings.

The six levels begin with Level 1, highest, most important, and go to Level 6, the lowest, least important. Although there are six predefined levels of headings, you probably will only find yourself using three or four levels in your documents. Also, because there is no limit on being able to use specific levels, you can pick and choose which levels you use—you don’t have to use <h1> and <h2> in order to be able to use <h3>. Also, keep in mind that you can tailor the formatting imposed by each level by using styles.

Quoted text
The <blockquote> tag is used to delimit blocks of quoted text. For example, the following code identifies the beginning paragraph of the Declaration of Independence as a quote:

<body><p>The Declaration of Independence begins with the following paragraph:</p><blockquote> When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature’s God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</blockquote></body>

The <blockquote> indents the paragraph to offset it from surrounding text.

The <blockquote> tag indents the paragraph.

The <blockquote> tag indents the paragraph.
List elements
HTML specifies three different types of lists:

  • Ordered lists (usually numbered)
  • Unordered lists (usually bulleted)
  • Definition lists (list items with integrated definitions)

The ordered and unordered lists both use a list item element (<li>) for each of the items in the list. The definition list has two tags, one for list items (<dt>) and another for the definition of the item (<dd>).

The following HTML code results in the output.

A sample list in HTML.

A sample list in HTML.

Because of the amount of customization allowed for each type of list, you can create many substyles of each type of list. For example, you can specify that an ordered list be ordered by letters instead of numbers. The following HTML code does just that, resulting in the output.

Using various list styles, you can customize each list in your document. The list shown uses the list-style lower-alpha.

Using various list styles, you can customize each list in your document. The list shown uses the list-style lower-alpha.

Preformatted text
Occasionally, you will want to hand format text in your document or maintain the formatting already present in particular text. Typically, the text comes from another source—cut and pasted into the document—and can be formatted with spaces, tabs, and so on. The preformatted tag (<pre>) causes the HTML client to treat white space literally and not to condense it as it usually would.

For example, the following table will be rendered just as shown below:

Preformatted text

Divisions

Divisions are a higher level of block formatting, usually reserved for groups of related paragraphs, entire pages, or sometimes only a single paragraph. The division tag (<div>) provides a simple solution for formatting larger sections of a document. For example, if you need a particular section of a document outlined with a border, you can define an appropriate style and delimit that part of the document with

<div> tags, as in the following example:

This code results in the output.

<div> tags are used to delimit large sections of text.

tags are used to delimit large sections of text.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics