FranMich Logo

HTML/HTML5/XHTML - Lesson 4

All the hands-on labs are here for quick access.

Paragraphs, Headings, and Textual Emphasis When we started writing HTML in the previous lessons, they were very plain. If you wrote any paragraphs they all ran together into one long page. Today's lesson will show you how to create paragraphs out of your text. Plus, we'll look at creating headlines and how to emphasize text within your paragraphs.
Correct Use of the P and BR Tag The tag creates paragraphs and the tag creates line breaks. These two tags are very useful for breaking up the flow of your web page text into sections just like you would a print document.
Headings, Bold, and Italic Headings are a useful way to divide up your web page into different sections. Headings in HTML are in a hierarchy: H1 is the first, H2 the second, and so on down to H6. If you think of these headlines like writing an outline, you will better understand how to use them. It's best practice to have only one H1 headline on a page-this defines the entire page.

Bold and italic is rendered in HTML with the STRONG and EM tags. You use them to surround blocks of text that you want to display as either bold or italic.
Nesting HTML Tags Now that you have learned several new HTML tags (P, BR, H1 through H6, STRONG, and EM),you need to learn about nesting these tags. Nesting means the placement of one HTML tag inside another HTML tag. Items are said to be inside a tag when they appear after the start tag and before the end tag. In other words:

<p>this text is nested in the P tag.</p>this text is not.
Working with Paragraphs If you're interested in learning more about HTML paragraphs, this is a great article to read. It includes references to common mistakes and some ways to style paragraphs using CSS. While CSS is beyond the scope of this class, this article will give you an idea of what is possible to do with paragraphs.
Heading Tag Definition Learn more about the H1, H2, H3, H4, H5, and H6 tags by reading their definition.
BR Tag Definition Understand the BR tag and how it works by reviewing the definition. All HTML tags are listed in the HTML Tag Library
Activity This is the homework for the "Paragraphs and Headings" of the HTML class. It includes a short quiz (answers below) and a project you can do to practice what you've learned in this lesson.
Paragraphs and Headings Quiz 1. Is the paragraph <p>) tag valid within the <html> tag?

2. How many <h1> tags can appear on a page? And how many are recommended?

3. Why would you use a trailing slash in the <br> tag?

4. Is this correctly written HTML: <p>This is the <strong><em>most</strong> important</em> part of the text. If it is incorrect, how could you correct it?
Paragraphs and Headings Project Write a new HTML document that has at least two headlines and three paragraphs of text. Indicate the items of importance in the document by highlighting the text with bold or italics. Be sure to next your tags correctly. If you are sharing your work on the forum, upload your page to your web hosting provider and share your URL on the forum. If you have questions about this lesson, you should post your URL or attach your HTML so that we can help figure out what's wrong.