Paragraphs, Headings and Text

Paragraphs, Headings and Text

In this lesson of the HTML tutorial, you will learn… 

  1. To add paragraphs to the page.
  2. To use HTML headings.
  3. To separate sections with breaks and horizontal rules.
  4. To create quoted text.
  5. To create preformatted text.
  6. To use phrase elements.
  7. To use non-deprecated formatting elements.
  8. To note document version changes.

This lesson discusses how properly markup text. With just a few exceptions, it does not discuss how to change the formatting or display of these elements. This is a task for CSS, which is not covered in this lesson.

Paragraphs

Paragraph text should be contained in <p> tags as shown in the following example:

Code Sample: Text/Demos/Paragraphs.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paragraphs</title>
</head>
<body>
<p>Pooh always liked a little something at eleven o'clock in the morning, and he was very glad to see Rabbit getting out the plates and mugs; and when Rabbit said, 'Honey or condensed milk with your bread?' he was so exited that he said, 'Both' and then, so as not to seem greedy, he added, 'But don't bother about the bread, please.'</p>
<p>And for a long time after that he said nothing...until at last, humming to himself in a rather sticky voice, he got up, shook Rabbit lovingly by the paw, and said that he must be going on. 'Must you?' said Rabbit politely. 'Well,' said Pooh, 'I could stay a little longer if it-if you-' and he tried very hard to look in the direction of the larder. 'As a matter of fact,' said Rabbit, 'I was going out myself directly.' 'Oh well, then, I'll be going on. Good bye.' 'Well good bye, if you're sure you won't have any more.' 'Is there any more?' asked Pooh quickly. Rabbit took the covers of the dishes, and said 'No, there wasn't.' 'I thought not,' said Pooh, nodding to himself. 'Well Good-bye, I must be going on.'</p>
---- Code Omitted ----
Code Explanation

This page will be rendered as follows:

Heading Levels

HTML supports six levels of heading. The tags are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>, descending in importance from <h1> to <h6>. Headings are block elements.

Code Sample: Text/Demos/Headings.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Heading Levels</title>
</head>
<body>
 <h1>Heading Level 1</h1>
 <p>Paragraph following heading level 1.</p>
 <h2>Heading Level 2</h2>
 <p>Paragraph following heading level 2.</p>
 <h3>Heading Level 3</h3>
 <p>Paragraph following heading level 3.</p>
 <h4>Heading Level 4</h4>
 <p>Paragraph following heading level 4.</p>
 <h5>Heading Level 5</h5>
 <p>Paragraph following heading level 5.</p>
 <h6>Heading Level 6</h6>
 <p>Paragraph following heading level 6.</p>
</body>
</html>

The screenshot below shows how they are formatted by default:

Breaks and Horizontal Rules

The <br /> tag forces a line break. The <hr /> tag creates a horizontal rule across the page. The code below shows how they are used:

Code Sample: Text/Demos/BRandHR.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Breaks and Horizontal Rules</title>
</head>
<body>
<p>Sometimes<br />it is desirable<br />to break text across lines.</p>
<hr/>
<p>And to separate text with horizontal rules.</p>
</body>
</html>
Code Explanation

The screenshot below shows how they appear by default:

Exercise: Creating an HTML Page

Duration: 15 to 25 minutes.

In this exercise, you will create an HTML page from scratch. It should look like the page in the picture below:

  1. Create a new page and save it as index.html in the Text/Exercises directory.
  2. Write code to make the page look like the one in the screenshot above.
  3. Save your work and open your new page in a browser to test it.

Use special characters instead of the dashes to make more interesting bullets. Try •

Quoted Text

The <blockquote> and <q> elements are used to designate quoted text. Both elements can take the cite attribute, which is used to reference the source. <blockquote> is a block-level element, while <q> is an inline element. See the example below:

Code Sample: Text/Demos/Quotes.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quotes</title>
</head>
<body>
<h1>The Declaration of Independence</h1>
<p>The Declaration of Independence begins with the following paragraph:</p>
<blockquote cite="http://www.ushistory.org/declaration/document/index.htm"><p>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.</p></blockquote>

<p>The second paragraph, which begins <q cite="http://www.ushistory.org/declaration/document/index.htm">We hold these truths to be self-evident, that all men are created equal...</q> is more widely known.</p>
</body>
</html>
Code Explanation

Most browsers indent blockquotes from both the left and right. They are supposed to wrap text nested in <q> tags with quotes. (see footnote)Firefox renders this page as follows:

Some notes:

  • Modern browsers don’t do anything visual with the cite attribute.
  • Blockquotes should not be used simply to indent text from both sides. CSS can be used for that purpose.
  • Blockquotes cannot be contained within paragraphs.
  • Blockquotes cannot have text as a direct child. Usually, blockquotes contain paragraphs (<p> tags).

Preformatted Text

Occasionally it is desirable to output content as it is laid out in the code, whitespace and all. The <pre> tag is used for this purpose. It is often used in online coding tutorials so that the whitespace shown in the tutorial reflects how it would appear in the document it represents. The code below shows how <pre> is used.

Code Sample: Text/Demos/Pre.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preformatted Text</title>
</head>
<body>
<h1>Your First HTML Page</h1>
<pre>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello world!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Hello world!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</body>
</html>
Code Explanation

The page is rendered as follows:

Phrase Elements

Phrase elements provide structural information about the content they contain. The most common phrase elements are <em> and <strong>. (see footnote)Both elements indicate that the element content should be emphasized. <strong> indicates stronger emphasis than <em>. Most browsers bold <strong> content and italicize <em> content. The code below illustrates how these tags can be used:

Code Sample: Text/Demos/EmAndStrong.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Emphasis</title>
</head>
<body>
<h1>Emphasis</h1>
<p>This is <em>important</em>.</p>
<p>This is <strong>really important</strong>.</p>
</body>
</html>
Code Explanation

The page is rendered as follows:

Formatting Elements

In HTML 4.0 and XHTML, most formatting tags have been deprecated. The five that remain are shown in the table below:

Non-deprecated Formatting Tags
Tag Description
<b> Bolds text
<i> Italicizes text
<tt> Renders teletype text
<big> Increases font size
<small> Decreases font size

The example below shows how they are used:

Code Sample: Text/Demos/Formatting.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Non-deprecated formatting tags</title>
</head>
<body>
<h1>Non-deprecated formatting tags</h1>
<p>
 <b>Bold</b>
 <i>Italicized</i>
 <tt>Teletype</tt>
 <big>Big font</big>
 <small>Small font</small>
</p>
</body>
</html>
Code Explanation

The page is rendered as follows:

All of these effects can be created with CSS. We recommend you avoid these tags in favor of CSS.

Documenting Changes

Sometimes it is necessary to document changes in your HTML pages. This is especially common when drafting legal documents. The specification provides <ins> and <del> elements for documenting inserted and deleted content, respectively. Both elements take a cite attribute for pointing to a resource explaining the change and a datetime attribute for indicating the time and date of the change. (see footnote) The title attribute can also be used to indicate a short reason for the change. The example below shows how they are used:

Code Sample: Text/Demos/ChangeTracking.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Change Tracking</title>
</head>
<body>
<h1>Change Tracking</h1>
<p>The baseball player with the most home runs is <del datetime="2007-08-01" cite="http://mlb.mlb.com" title="At the time of this writing, this is just a prediction.">Hank Aaron</del><ins datetime="2007-08-01" cite="http://mlb.mlb.com" title="Allegedly, steroids helped.">Barry Bonds</ins>.</p>
</body>
</html>
Code Explanation

The page is rendered as follows. The title text shows up when the user hovers the mouse over the text “Hank Aaron.”:

Paragraphs, Headings and Text Conclusion

In this lesson of the HTML tutorial, you have learned to work with paragraphs, headings, and other text elements. You can now create a basic HTML page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s