facebook 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.

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, a separate technology, 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.

Paragraphs

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

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>
<!-- From Little Women by Louisa May Alcott-->
<p>Jo immediately sat up, put her hands in her pockets,
	and began to whistle.</p>
<p>"Don't, Jo. It's so boyish!"</p>
<p>"That's why I do it."</p>
<p>"I detest rude, unladylike girls!"</p>
<p>"I hate affected, niminy-piminy chits!"</p>
<p>"Birds in their little nests agree," sang Beth, the peacemaker,
	with such a funny face that both sharp voices softened to a laugh,
	and the "pecking" ended for that time.</p>
</body>
</html>

Code Explanation

This page will be rendered as follows:Little Women Paragraphs

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.

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>

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:

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

The <div> Tag

The <div> tag is used to create a content division. That is, it divides a segment of content from the surrounding content. Visually, this results in placing the content on its own block, similar in effect to putting a <br> tag before and after the content.

The following demo shows how div elements works:

Text/Demos/div-haiku.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>div Haiku</title>
</head>
<body>
<h1>div Haiku</h1>
<div>I am the first div.</div>
<div>I'm the div in the middle.</div>
<div>I am the third div.</div>
</body>
</html>

Code Explanation

The screenshot below shows how this will appear in the browser:div haiku

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>

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>

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:

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. Cascading Style Sheets (CSS) should 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.

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>

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>. Other text-level semantic elements are discussed on the W3 website. 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.

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 acá!</dfn></q>, which means 
  <i>Come here!</i> in Spanish.
</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 formatting 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.