Basic HTML Elements

This chapter is from the book

HTML and CSS: Visual QuickStart Guide, 9th Edition

Learn More Buy

This chapter is from the book

This chapter is from the book 

HTML and CSS: Visual QuickStart Guide, 9th Edition

Learn More Buy

Formatting Text Inline

The last of the basic elements we’ll cover are inline elements—that is, elements that are used inside other elements.

Paragraphs, headings, and lists are “block-level” elements. They are self-contained sections that start on a new line and take up the entire width of the container. But inline elements do not start on a new line and are only as wide as the content. An example is the <strong> tag.

In the following task you'll create a short paragraph (a block element) and change the formatting of some of the text in the middle of it (an inline element).

To bold text with the <strong> tag:

1. Type <p>We use the strong tag to.

2. Type <strong>draw attention</strong>.

3. Type to text by bolding it.</p>.

   You can see the result in FIGURE 4.5.

FIGURE 4.5 The paragraph produced by the code in this example

Notice that the <strong> tag is inside the <p> tag but still inline with the text. And by default, the browser bolds <strong> text. However, there’s another benefit to using the <strong> tag. It tells browsers and search engines that this text is slightly more important than the normally formatted text.

The catalog of tags for formatting inline text is extensive; here are the most common ones (FIGURE 4.6):

• <em> is used for emphasis. It shows as italicized text. Use the <i> tag if you want to set the text apart without semantically noting “emphasis.”

• <u> is used to underline text. It shows as text with a line drawn under it.

• <s> is used to cross something out because it is no longer correct. It shows as text with a line through it. You may also come across <strike> in older code, but it’s now been replaced by <s>.

• <del> looks similar to <s>, but lends a slightly different meaning to text. <del> marks something that has been deleted from the original document.

• <ins>, which is usually underlined by default, notes something that has been inserted into the document.

• <mark> is used to highlight text. It adds a yellow background to text, as if a highlighter pen has been drawn across it.

• <small>, which renders text smaller than the default size, is used for notes, side comments, and fine print.

• <sup> is superscript, and makes text appear smaller and raised slightly above the baseline. This is often used for exponents, or bibliographic citations.

• <sub> is used to display subscript text. Like <sup> reduces text size but is lowered below the baseline than normal text.

• <time> represents a specific time and is often combined with the datetime attribute to convert human readable time into a machine-readable format.

  You’ll find a list of valid datetime values here: developer.mozilla.org/en-US/docs/Web/HTML/Element/time.

• <abbr> represents an abbreviation and is usually rendered with a dotted underline. You can include the fully expanded version of the abbreviation in the title attribute, which is usually displayed in a tooltip on mouseover.

• <br> creates a line break. It’s useful for situations when you want to make lines a specific length, as in poetry or in a mailing address.

FIGURE 4.6 All of the listed formatting markup and their default styles in Chrome.