facebook google plus twitter
Webucator's Free HTML Training Tutorial

Lesson: Paragraphs, Headings, and Text

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

YOU WILL LIKELY NEED TO CLEAN UP THE FOLLOWING INTRODUCTION:

This lesson discusses how to properly mark up 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

  • To add paragraphs to the page.
  • To use HTML headings.
  • To separate sections with breaks and horizontal rules.
  • To create quoted text.
  • To create preformatted text.
  • To use phrase elements.

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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/br-and-hr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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:Horizontal Rules

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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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; 2020 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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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; 2020 Runners Home. All rights reserved.</p>
</body>
</html>

Code Explanation

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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quotes</title>
</head>
<body>
<h1>The Declaration of Independence</h1>
<p>The Declaration of Independence begins with the 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 also supposed to wrap text nested in <q> tags with quotes. Google Chrome 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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 meaningful information about the content they contain. The most common 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 table below lists other text-level semantic elements:

Text-Level Semantic Elements
Tag Description Default rendering
<b> For "text to be stylistically offset from the normal prose without conveying any extra importance" (source) Bold
<i> For "text in an alternate voice or mood" (source) Italic
<em> For "text that has stress emphasis" (source) Italic
<strong> For text that is of "strong importance, seriousness, or urgency" (source) Bold
<small> For text that is to be represented as a side comment or "small print" (source) Smaller than surrounding text
<mark> Used to mark text of special interest or importance (source) Highlighted
<dfn> Used to indicate a term being defined (source) Italic
<abbr> Used for abbreviations. Use the title attribute for the unabbreviated version (source) No special formatting.
<cite> For text that describes "a reference to a cited creative work" (source) Italic

The example below shows how these inline tags are used.

Code Sample:

Text/Demos/inline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meaningful Inline Elements</title>
</head>
<body>
<h1>Meaningful Inline Elements</h1>
<p>
  The man yelled for his dog, <q><em>Come here, Snoopy!</em></q>
  When Snoopy didn't come, he yelled louder, 
  <q><strong>Get over here now, Snoopy!</strong></q>
  He had named his dog <b>Snoopy</b> after the dog in 
  <cite>Peanuts</cite>. After having called for him repeatedly,
  he finally remembered that Snoopy didn't speak English.
  He yelled, <q><dfn>Ven aca!</dfn></q>, which means 
  <i>Come here!</i> in Spanish.a
</p>
<p>
  <mark>
    Note that none of these tags should be used for formatting
    purposes. 
    All formatting should be handled with
    <abbr title="Cascading Style Sheets">CSS</abbr>.
  </mark>
</p>
<p><small>This is just legalese. Don't read it.</small></p>
</body>
</html>

Code Explanation

The page is rendered as follows:Inline Elements

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.