Broad Network

Basic Formatting Elements in HTML

Text Elements in HTML – Part 1

Foreword: In this part of the series I talk about the u, i, b, strong, em, small, sub, sup, s, mark and span elements.

By: Chrysanthus Date Published: 31 May 2015


This is part 1 of my series, Text Elements in HTML. A text element is an element whose normal content is text. The HTML specification refers to most of them as text-level semantic elements. In this part of the series I talk about the u, i, b, strong, em, small, sub, sup, s, mark and span elements. Apart from the line break element (br) any text element is an inline element. Inline means the element does not have an inherent line break above and below it. Text elements are not element modifiers; they are actual elements with attributes like the image element. The difference between text elements is in their purposes. In this part of the series, I talk about basic formatting elements in HTML. You should try all the code samples in this series.

This series is part of a volume. At the bottom of this page, you have links to the different series in the volume. You should read the series in the order given.

The u element is used for underlining text. It has a start tag and an end tag. You can have code like:

    I love <u>music<\u> because it is an international language.

With this, at the browser, “music” will be underlined.

This is the italic element. It has a start and end tag. You can have code like:

    In this <i>situation</i>, you cannot say that.

With this, at the browser, “situation” will be in italic.

This element is used to bold text. It has a start tag and an end tag. So you can have an ancient text like:

    You enter a small room. Your <b>sword</b> glows brighter.

The word, “sword” becomes bold at the browser.

The strong element is a double tag element. You use it when the phrase or word is more important. You can use it in a heading or caption. The HTML specification also says: The strong element can be used to mark up a warning or caution notice. The strong element can be used to denote contents that the user needs to see sooner than other parts of the document. So you can have code like:

    <strong>Warning.</strong> High voltage is dangerous.

The browser may not show much difference between a strong and a bold text.

This is a double tag element and is used for stress emphasis. You can have something like:

    <p>Cats <em>are</em> pretty and attractive animals.</p>

This is a double tag element. It is for small print. Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements. The small element is only intended for short runs of text. The following paragraph illustrates the use of a small element:

<p>The company today announced record profits for the second quarter <small>(Full Disclosure: Foo News is a subsidiary of the company)</small>, leading to speculation about a third quarter merger with Season’s Group.</p>

The sub element is for subscript. It is a double tag element. Do not confuse between a sub element and a small element. An example of its use is in:

    <p>An example of a base two number is, 1101<sub>2</sub> .</p>

At the browser, 2 will be small and will descend below the line.

The sup element is for superscript. It is a double tag element. An example of its use is in:

    This is the 5<sup>th</sup> student in the class.

At the browser, th after 5 will be small but raised up.

This is a double tag element. It represents contents that are no longer accurate or no longer relevant. In the following code, a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $4.99 per bottle</s></p>
<p><strong>Now selling for just $3.99 a bottle!</strong></p>

For my browser, the second paragraph is cancelled (a line drawn across).

This is a double tag element. Here is what the HTML specification says about the mark element: The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

In the following paragraph, the keyword, “kitten” that a user might have searched (through search engine) is marked:

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

For my browser, the background of the words, “kitten” is yellow.

This is a double tag element. The span element is a general-purpose text element. It can have zero, one or more of the above text elements within its content. Whenever you cannot think of any of the above elements that is relevant to what you want, use the span element. You can then use cascaded style sheet (CSS) to style the texts in the span elements.

That is it for this part of the series. We stop here and continue in the next part.


Related Links

Basics of HTML 5
Basics of ECMAScript
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course



Become the Writer's Fan
Send the Writer a Message