HTML Formatting

Sunday, February 12, 2012

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.


ElementTypeDescriptionSample
<abbr>SemanticAn abbreviationAn abbreviation
<acronym>SemanticAn acronymAn acronym
<address>SemanticContact information
Contact information
<b>PresentationalBold TextBold Text
<bdo dir="ltr">PresentationalLeft to Right Text DirectionText Direction
<bdo dir="rtl">PresentationalRight to Left Text DirectionText Direction
<big>PresentationalBig TextBig Text
<blockquote>SemanticLong Quotation
Long Quotation
<cite>SemanticCitationCitation
<code>SemanticComputer code textComputer code text
<del>SemanticDeleted TextDeleted Text
<dfn>SemanticDefinition termDefinition term
<em>SemanticEmphasized TextEmphasized Text
<i>PresentationalItalic TextItalic Text
<ins>SemanticInserted TextInserted Text
<kbd>SemanticKeyboard text Keyboard text
<pre>PresentationalPreformatted text
Preformatted text
<q>SemanticShort QuotationShort Quotation
<samp>SemanticSample computer codeSample computer code
<small>PresentationalSmall TextSmall Text
<strong>SemanticStrong TextStrong Text
<sub>SemanticSubscripted TextSubscripted Text
<sup>SemanticSuperscripted TextSuperscripted Text
<tt>PresentationalTeletype text
Teletype text
<var>SemanticDefines a variableDefines a variable


Note: The following presentational elements are deprecated and definately should not be used. Use CSS instead of these elements.



ElementSample
<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

HTML CSS and JavaScript Editor Creating Web Pages Simplified HTML CSS: The Complete Reference