In the next few articles, we will be looking at HTML text formatting. HTML text
formatting elements generally fall into two main groups, Semantic and
presentational. Semantic elements, also known as Logical elements, represent the
text’s function on the page. The way they are displayed is up to the browser, although modern
browsers have standardized on how this is done. For example you may notice
that if you were to emphasize text, you would use the <em> element. Today's modern browsers will display the text with italic formatting. However, in the future,
browsers or other web readers may display or render those elements in a different manner. Presentational elements exist to create a specific visual effect, but carry no hint to the text’s semantic meaning.
Some of the presentational elements are now deprecated in XHTML and HTML5. CSS should be used instead of presentational elements.
Here is a list of the most common elements used in HTML to format text.
| Element | Type | Description | Sample |
|---|
| <abbr> | Semantic | An abbreviation | An abbreviation |
| <acronym> | Semantic | An acronym | An acronym |
| <address> | Semantic | Contact information | Contact information |
| <b> | Presentational | Bold Text | Bold Text |
| <bdo dir="ltr"> | Presentational | Left to Right Text Direction | Text Direction |
| <bdo dir="rtl"> | Presentational | Right to Left Text Direction | Text Direction |
| <big> | Presentational | Big Text | Big Text |
| <blockquote> | Semantic | Long Quotation | Long Quotation |
| <cite> | Semantic | Citation | Citation |
| <code> | Semantic | Computer code text | Computer code text |
| <del> | Semantic | Deleted Text | Deleted Text |
| <dfn> | Semantic | Definition term | Definition term |
| <em> | Semantic | Emphasized Text | Emphasized Text |
| <i> | Presentational | Italic Text | Italic Text |
| <ins> | Semantic | Inserted Text | Inserted Text |
| <kbd> | Semantic | Keyboard text | Keyboard text |
| <pre> | Presentational | Preformatted text | Preformatted text |
| <q> | Semantic | Short Quotation | Short Quotation |
| <samp> | Semantic | Sample computer code | Sample computer code |
| <small> | Presentational | Small Text | Small Text |
| <strong> | Semantic | Strong Text | Strong Text |
| <sub> | Semantic | Subscripted Text | Subscripted Text |
| <sup> | Semantic | Superscripted Text | Superscripted Text |
| <tt> | Presentational | Teletype text | Teletype text |
| <var> | Semantic | Defines a variable | Defines a variable |
Note: The following presentational elements are deprecated and definately should not be used. Use CSS instead of these elements.
| Element | Sample |
|---|
| <center> | Centered text |
| <font color="red" face="arial" size="2"> | Defines font |
| <s> | Strikethrough |
| <strike> | Strikethrough |
| <u> | Underline text |
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
