facebook google plus twitter
Webucator's Free HTML Tutorial

Lesson: Paragraphs, Headings, and Text

Welcome to our free HTML tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

This lesson discusses how to 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.

Lesson Goals

  • Learn to add paragraphs to the page.
  • Learn to use HTML headings.
  • Learn to separate sections with breaks and horizontal rules.
  • Learn to create quoted text.
  • Learn to create preformatted text.
  • Learn to use phrase elements.
  • Learn to use non-deprecated formatting elements.
  • Learn to note document version changes.

Paragraphs

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

Code Sample:

Text/Demos/Paragraphs.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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 excited 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>
---- C O D E   O M I T T E D ----

Code Explanation

This page will be rendered as follows:Pooh Paragraphs

If you would like to read more, the whole story of "Pooh Goes Visiting" is available at http://www.just-pooh.com/stories.html. It was originally published in Winnie the Pooh on October 14, 1926 by Methuen & Company.

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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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>

Code Explanation

The screenshot below shows how they are formatted by default:Heading Levels

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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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:Brand HR Code Explanation

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:Exercise Solution

  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 &#8226;

Solution:

Text/Solutions/index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Runners Home&trade;</title>
</head>
<body>
<div>Home | Races | Resources | Calculator | Running Log | My Account | Log out</div>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p>
	Runners Home&trade; is dedicated to providing you with:<br>
	 - the most up-to-date information on running races.<br>
	 - the best resources for runners.
</p>
<hr>
<p>&copy; 2018 Runners Home. All rights reserved.</p>
</body>
</html>

Code Explanation

Solution:

Text/Solutions/index-challenge.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Runners Home&trade;</title>
</head>
<body>
<div>Home | Races | Resources | Calculator | Running Log | My Account | Log out</div>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p>
	Runners Home&trade; is dedicated to providing you with:<br>
	&#8226; the most up-to-date information on running races.<br>
	&#8226; the best resources for runners.
</p>
<hr>
<p>&copy; 2018 Runners Home. All rights reserved.</p>
</body>
</html>

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>
<html lang="en">
<head>
<meta 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.html"><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.html">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. Firefox renders this page as follows:Display of Quote Example Declaration of Independence

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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preformatted Text</title>
</head>
<body>
<h1>Your First HTML Page</h1>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&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:First HTML Page

Text-level Semantic Elements

Text-level semantic elements provide structural information about the content they contain. The most elements of this type are <em> and <strong>. 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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:Example of Strong Tags Used for Emphasis

HTML5 and the HTML 4 Formatting Elements

In HTML 4 and XHTML, all but five formatting tags were deprecated. But in HTML5, none of these are considered formatting elements any more and two of the elements are no longer available. The table indicates how HTML5 treats these tags now.

Obsolete Formatting Tags
Tag Description Notes
<b> Bolds text For "text to be stylistically offset from the normal prose without conveying any extra importance" (https://www.w3.org/wiki/Html/Elements/b)
<i> Italicizes text For "text in an alternate voice or mood" (https://www.w3.org/wiki/HTML/Elements/i)
<tt> Renders teletype text ** Deprecated **
<big> Increases font size ** Deprecated **
<small> Decreases font size For "side comments and small print" (https://www.w3.org/wiki/HTML/Elements/small)

The example below shows how the three remaining "formatting" tags are used:

Code Sample:

Text/Demos/Formatting.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formatting tags</title>
</head>
<body>
<h1>Formatting tags</h1>
<p>
<b>Bold</b>
<i>Italicized</i>
<small>Small font</small>
</p>
</body>
</html>

Code Explanation

The page is rendered as follows:Formatting Tags

All of these effects can be created with CSS, so if you just want to change the formatting without implying any specific meaning, you should use CSS instead.

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. 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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="2015-08-01" cite="http://mlb.mlb.com" title="Not anymore">Hank Aaron</del><ins datetime="2015-08-07" cite="http://mlb.mlb.com" title="Steroids?">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.":Change Tracking Page Result