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

Introduction

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.

Pre-Knowledge
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.

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

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

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

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

 In this situation, you cannot say that.

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

b
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 sword glows brighter.

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

strong
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:

 Warning. High voltage is dangerous.

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

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

 Cats are pretty and attractive animals.

small
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:

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

sub
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:

 An example of a base two number is, 11012 .

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

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

This is the 5th student in the class.

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

s
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.

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

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

mark
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:

I also have some kittens who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a kitten.

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

span
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.

Chrys

Broad Network

Related Articles

Basic Formatting Elements in HTML

Text Elements in HTML – Part 1

Introduction

Related Links

Comments