FranMich Logo

HTML/HTML5/XHTML - Lesson 6

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

Quotes, Lines, and Characters Today's lesson returns us to HTML, you will learn tags to add quotations of two different types to your pages. You will also learn how to add lines to separate breaks in the content. And finally, you will learn how to add special characters to your text for adding non-English languages, typographical characters, and codes like copyright marks.
Long Quotations Use BLOCKQUOTE A long quotation is a quote that is too long to include in the body of the text. They are usually at least one sentence or longer. Another use for quotations is the pull-quote. They are called pull-quotes because they are pulled out of the body of the text and styled to bring attention to the quote. You see this a lot in magazine articles.

I use the BLOCKQUOTE tag to highlight code samples (with the CODE tag as well) as well as for bringing attention to quotations. The only thing you should not use BLOCKQUOTE for is just to indent text. You should use CSS to move the margins around items you want indented, and leave BLOCKQUOTE for the quotations.
Short, Inline Quotations Use Q But when we add quotes to text we don't always want to separate them from the block of text. While it is a simple matter to just write the quotation inside the paragraph, if you are trying to keep your HTML semantic, enclosing that quote with the tag will tell the browser it's a quotation.
Break Up Your Content with Lines HTML has a tag that is specifically for creating lines to separate your content. It is the HR tag. Semantically, this tag indicates a thematic break between topics in an article. So if you want to add a horizontal line to your HTML, it's very easy with this tag.
Adding Special Characters and Non-English Letters HTML s based on the English language, as are most computer languages, and as such, it uses primarily English characters. This means if you want to type résumé in your HTML, you need to tell the browser that these are special characters. To do this, you use the ampersand character (&). This is followed by a code that indicates which special character you want to use. For é that is "eacute." You complete your special character with the semi-colon character (;). It might be tempting to just copy and paste these characters into your HTML code, but this is not reliable. If you write in non-English languages on your web page or need to use special characters in English, you should know the codes.

Note: if the eacute above shows as a strange character rather than an e with an accent on it, that is because your email client doesn't like character.
Pre-formatted Text Pre-formatted text is not found in a lot of web pages these days, because most designers prefer to control the look of their text more closely. But it is a type of semantic tag in HTML that can help you create text pictures and simple layouts that would be otherwise difficult in standard HTML. (You'll learn more about why it's difficult in a later lesson.) The pre-formatted text tag is usually used by designers to show code samples.
Why Semantic HTML? In this lesson I've been discussing a lot of tags that don't necessarily do a lot for how your web pages look. Instead they are semantic tags that define the contents of your web pages. Many web designers completely ignore these tags as they don't think they are important. But if you are trying to convey information on your web pages, then using semantic HTML tags is important.
Activity This is the homework for “Quotes, Lines, and Characters” 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.
Quotes, Lines, and Characters Quiz  1. What tags can you use to define quotations in your HTML?

 2. Why would you use the Q tag rather than the BLOCKQUOTE tag?

 3. What is the semantic meaning of the HR tag?

 4. What is the format of a special character in HTML?
Quotes , Lines, and Characters Project Edit your existing project page or create a new one that includes at least one long quotation that you would like to share with other people. If you are keeping all your projects in one HTML document, you should divide up the sections with the HR tag.

If you are sharing your work on the forum, you should upload your page to a hosting provider and provide a URL for us to look at. Or you can upload the file to the forum for us to look at.