Marketing for Libraries Logo

HTML Section: Text

Most HTML document contain text in the form of heading and paragraphs that can be formatted in various ways.

Once you've created the document and added the items for the head area, it's time to develop the body content.

Heading Tags

Headings are used in HTML to help structure the content on a page. Headers can be used in your web pages like chapter names, they hierarchically divide your web page.

HTML provides up to 6 levels of headers (h1, h2, h3, h4, h5, h6). Be consistent in your use of headers. You should always arrange headers hierarchically on your page - that is don't skip levels or go from h1 to h4 - it makes your pages look odd. For accessibility reasons, header tags should only be used as section headings in an HTML document. Never to format blocks of text. Also, you don't need to include paragraph markers before or after heading tags - they are assumed. And you don't need to include a <b> tag with the header tag - it is also assumed! Be sure to include a start tag <h1> and end tag </h1>.

The <h1> heading tag defines the most important heading or main heading and <h6> the least important heading. Both start and end tags are required for heading elements.

Examine the sample code below:

<h1>This is the most important heading.</h1>
<h2>This is a less important heading.</h2>
<h3>This is my least important heading.</h3>

try itTry It!
Go to w3schools and read about Headings. Use the Try It Yourself buttons to practice coding.

Paragraph Tags

Text can be divided into paragraphs to make your document easier to read.

The <p> paragraph element is used for paragraphs. Be sure to use a start and end tag with a paragraph element.

Examine the sample code below.

<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

try itTry It!
Go to w3schools and read about Paragraphs. Use the Try It Yourself buttons to practice coding.

Line Break Tags

Sometimes you want to start a new line without starting a new paragraph.

The <br> line break tag is used to break a line. it is an empty HTML element with no end tag.

Examine the sample code below. It works great for haiku you want on multiple lines.

<p>old pond...<br>a frog leaps in<br>water's sound</p>

Text Formatting Tags

You can use some basic tags to create bold or italic text. You can also use subscript or superscript and other variations. Each of these tags should contain a start and end tag.

The <b> bold tag is for making text bold.

The <i> italic tag is for making text italic.

The <sub> tag is for subscripted text.

The <sup> tag is for superscripted text.

The <blockquote> tag is for defining a section quoted from another source.

Example the sample code below:

<p><b>This text is bold</b></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

Code is displayed as:

This text is bold
This is subscript and superscript

If you want to do more than this, you should be using styles.

try itTry It!
Go to w3schools and read about Formatting.
Use the Try It Yourself buttons to practice coding.

Horizontal Line Tags

Another way to separate content on the page is by using horizontal lines.

The <hr> element places a horizontal line on the page.

Examine the sample code below. The horizontal line is in bold so you can find it:

<h1>This is a heading.</h1>
<p>This is the content for the main section of the page.</p>
<hr>
<h2>This is a subheading of lesser importance.</h2>
<p>This is is more information on the page.</p>

Commenting Tags

Sometimes you want to place text in the code that you don't want to appear on the web page. For instance, you might want to remind yourself of something. Or, provide other programmer with information about what you did on the page. Comments are ignored by the browser and not displayed. Only people viewing the raw HTML see them.

Examine the sample code below. Notice the <!-- before and the --> after the text.

<!-- This is a comment about something I want to remember. -->

Entities

HTML isn't perfect. There are some things it's doesn't do well. For instance, you can't use your space-bar to simply add spaces.

Some characters are reserved in HTML for specific purposes. To use these characters, you'll need to use character entities in the source code. For instance, it's not possible to use the less than (<) and greater than (>) signs in your text because they are reserved for use in tags. Instead, you use a character entity.

To display a less than sign, use &lt; or &#60;

The most common use of a character entity is a non-breaking space.

To display a non-breaking space, use &nbsp;

Another common character entity is for an ampersand (&). Use &amp;

try itTry It!
Go to w3schools and read about Entities. You can also find a master list of character entities.
Use the Try It Yourself buttons to practice coding.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson