Did you find this useful?
Socialize it today.


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

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

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