XHTML Tutorial
XHTML Tags Types
XHTML Documents
First Web Page
Page Content
List Structure
Color Styles
Span and Division
Style & Classes
Font Tags
Special Characters
Lists Style
Element Position
Text Links
Redirecting Pages
Traversing Folders
Table Borders
Table Colors
Table Groupings
Creating Framesets
Form Controls
Group Boxes
Form Submission

Free Tutorials
What is Internet
Internet Games
Learn TCP IP
Learn HTML
Learn CSS
Learn XML
Learn WML
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt
Font Tags

Previous Next

Text characters can take on styles such as bold, italic, underscore, and others to highlight or emphasize letters and words. Although these styles can be achieved with style sheet settings, there are stand-alone tags that can be used to directly format text characters.

Physical Style Tags

Physical style tags are container tags that enclose the string of characters to be displayed in the specified style. These tags are common to all browsers and are displayed the same in all browsers.

Font-style Tag Browser Display
<big>big</big> big
<b>bold</b> bold
<i>italic</i> italic
<small>small</small> small
<u>underscore</u> underscore
<s>strikeout</s> strikeout
<strike>strikeout</strike> strikeout
<tt>typewriter</tt> typewriter

As shown in the above table, surrounding a text string with <b>...</b> tags, for example, converts the text to bold characters in exactly the same style as the font-weight:bold property setting. Whether you use these physical style tags or font properties is a matter of personal choice.

It should be noted that these tags can also have style properties associated with them. For example, the style sheet declaration b {color:red} associates a color with the b selector. Therefore, any text made bold with the <b> tag also displays in red.

Logical Style Tags

Logical style tags do not have standardized meanings in all browsers, and XHTML does not specify exactly how they should be displayed. However, they are more broadly applicable than physical style tags in permitting both visual and non-visual rendering of styles.

For people who are visually impaired, for example, the <b> physical style tag may be meaningless since it renders text visually in bold characters. However, by using the visually comparable <strong> logical style tag, a person using special reader software hears the text with audio emphasis. As a general rule, then, logical style tags are preferred over physical style tags to meet these sorts of browsing contingencies.

The following table shows the logical style tags. Their display might not be noticeably different from the default style in the browser you are currently using. Some browsers have not fully implemented all styles.

Phrase-style Tag Browser Display
<abbr>abbreviation</abbr> abbreviation
<acronym>acronym</acronym> acronym
<cite>citation</cite> citation
<code>code</code> code
<dfn>definition</dfn> definition
<em>emphasis</em> emphasis
<kbd>keyboard</kbd> keyboard
<q>quotation</q> quotation
<samp>sample</samp> sample
<strong>strong</strong> strong
<sub>subscript</sub> subscript
<sup>superscript</sup> superscript
<var>variable</var> variable

Style Sheet Alternatives

There are, of course, style sheet alternatives to the physical and logical font tags. Below are style classes that duplicate selected tags and are applied with <span> tags

  .bold      {font-weight:bold}
  .italic    {font-style:italic}
  .underline {text-decoration:underline}
  .strike    {text-decoration:line-through}
  .super     {font-size:8pt; vertical-align:super}
  .sub       {font-size:8pt; vertical-align:sub}
  .type      {font-family:courier new}

This is <span class="bold">bold</span> text.
This is <span class="italic">italic</span> text.
This is <span class="underline">underlined</span> text.
This is <span class="strike">strike through</span> text.
This is <span class="super">superscript</span> text.
This is <span class="sub">subscript</span> text.
This is <span class="type">typewriter></span> text.

Whether you use the special formatting tags or create your own style classes is pretty much a personal choice. There are typing efficiencies in using the predefined tags; plus, the logical style tags can be rendered with audio emphasis for visitors using reader software. On the other hand, there is convenience in placing all styling within an embedded style sheet rather than having scattered styles throughout the Web document.

Recall that the <hn> heading tags enclose strings of text for display in one of six heading styles. The number n in the tag ranges from 1 (largest) to 6 (smallest). Headings are displayed in bold characters in the default font face. Of course, you can apply a style sheet to a heading tag to modify its settings. For instance, the style declaration

h2 {font-family:arial; font-style:italic}

displays the heading at size 2, but with italicized Arial font face overriding the normal heading display in Times New Roman. Other stylings can be applied to the tag to display the heading with additional style characteristics that augment standard display of <h2> headings.

In the same way that physical and logical font tags can be emulated with style sheets, so can headings be created with style sheets rather than using the special <hn> tags. The following stylesheet declares style classes identical to the six heading types.

  .head1 {font:bold 24pt}
  .head2 {font:bold 18pt}
  .head3 {font:bold 13.5pt}
  .head4 {font:bold 11pt}
  .head5 {font:bold 10pt}
  .head6 {font:bold 7.5pt}

<p class="head1">This is Heading Level 1</p>
<p class="head2">This is Heading Level 2</p>
<p class="head3">This is Heading Level 3</p>
<p class="head4">This is Heading Level 4</p>
<p class="head5">This is Heading Level 5</p>
<p class="head6">This is Heading Level 6</p>

This is Heading Level 1

This is Heading Level 2

This is Heading Level 3

This is Heading Level 4

This is Heading Level 5

This is Heading Level 6

There are several alternatives, then, for creating headings. You can use <hn> tags with their default stylings, use the tags with modified stylings, or forego the tags altogether and create your own heading classes. No one option is a best solution in all cases.

Group Selectors

Major and minor headings on a Web page should share common styling as visual clues to their common function as section breaks in page content. Often, headings have the same font faces and colors while differing in their sizes and alignments. Use of <hn> tags makes it easy to control heading styles within embedded style sheets through use of group selectors.

A group selector is two or more tag selectors, separated by commas, that share in the same styling. For example, the following style sheet declares a common font face and color for a set of <hn> tags, establishing a common visual style for all headings used on the page.

  h1, h2, h3 { font-family:verdana; color:rgb(255,165,0) }

The selector h1, h2, h3 is a group selector, meaning the associated style declarations apply to all tags in this list. Assume further that <h1> headings are centered for major content breaks, that <h2> and <h3> headings are left aligned, and that <h3> headings are displayed in italic style. These additional group and individual stylings can be added to the above style sheet.

  h1, h2, h3 { font-family:verdana; color:rgb(255,165,0) }
  h1         { text-align:center }
  h2, h3     { text-align:left }
  h3         { font-style:italic }

Major Heading

Side Heading

Side Heading

Group selectors are not different in effect from simple selectors. They just permit a shorthand way to declare shared styles. They also illustrate quite clearly the concept of style interitence. In the above example, all three headings inherit the same font face and color from their participation in the overall h1, h2, h3 group selector; <h2> and <h3> headings inherit left alignment from their participation in the h2, h3 group selector. By taking advantage of such inheritence it saves from having to code separate, duplicate styles for each and every tag selector.

Incidentally, it is not necessary that group selectors be composed of the same tag type. All tags that share the same style can be part of the group selector. For example, the group selector

p, blockquote, div {font-family:verdana; font-size:10pt}

indicates that all paragraphs, blockquotes, and divisions on a page are to share the same type face and size.

The <pre> Tag

Normally, no formatting of text takes place in the browser unless it is surrounded with XHTML tags. Although editor code may be indented and line-spaced by using the Space Bar and Enter keys, all contiguous spaces and lines are collapsed to a single blank space in the browser. There is one case, though, where text as formatted in the editor can be displayed in identical fashion in the browser.

A block of text surrounded by the <pre> tag is displayed in a monospace font in precisely the way it is formatted in the editor. That is, blank spaces and blank lines used to format XHTML code in the editor are faithfully reproduced in the browser, space by space and line by line. The <pre> tag is often used to create simple tables where alignment of columns is produced with embedded blank spaces. The following code, for example, produces a table that is displayed in the browser identical to the way it is typed in the editor.

                  Table 1
              Sales by Region
Region/Year   2000     2001     2002     2003
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4

Because all text lines are surrounded by the <pre> tag, columns can be aligned with the Space Bar and line breaks made with the Enter key. This alignment and spacing is possible because both the editor and browser display characters in a monospace font producing equally spaced characters. You need to make sure that your editor uses a monospace font such as Courier New in order to accurately space the text. Browser output is not shown here because it is identical to the table arrangement produced in the editor.

You can include minor styling of the monospaced text as long as the formatting does not change character sizes, thereby changing the space count between letters. The following code, for example, dresses up the previous table with bold and italic font styles along with a text color. Just make sure that you align the information in the table properly before adding extra style tags, which visually displace the aligned text when viewed in the editor. These extra tags inside the <pre> tag, however, do not add spacing to the table when viewed in the browser.

<pre style="color:blue">
                  <b>Table 1</b>
              <b>Sales by Region</b>
<b><i>Region/Year   2000     2001     2002     2003</i></b>
<b>East</b>          35.2     37.4     39.8     40.0
<b>West</b>          28.0     25.6     27.4     29.8
<b>South</b>        102.3     86.1     98.6    100.2
<b>North</b>         10.5      8.6      9.8     10.4
                  Table 1
              Sales by Region
Region/Year   2000     2001     2002     2003
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4

Although the above examples show coding for a data table, a later tutorial describes use of formatting tags especially designed for laying out tables. Although these table tags are the most common way to display rows and columns of tabular information, you can use the <pre> tag as a quick and easy way to accomplish similar displays.

Previous Next

|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |

2013 Soft Lookup Corp. Privacy Statement