Font Style and Semantic Tags

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 also stand-alone tags that can be used to directly enclose and format text characters. In an older version of HTML, these tags were used purely stylistically without imparting meaning to their content; however, HTML5 has re-purposed many tags to give semantic meaning to the content they enclose. As such, these tags should only be used in their proper context, and not simply for their stylistic properties. These tags are known as phrase elements.

Phrase Elements

Phrase Elements, or logical style tags, have standardized meanings in all browsers. One reason for using them alongside CSS is to provide accessibility features for individuals with disabilities. For example, people who are visually impaired may not benefit from simply styling a word through CSS in bold font because it renders text visually in bold characters, but does not ensure that a visually impaired individual will be able to see it. On the other hand, by using the visually comparable <strong> logical style tag, a person using special reader software hears the text with audio emphasis.

The following table shows the logical style tags.

Figure 4-12. Logical style tags.

The logical style tags are designed for situations in which the visual appearance of text in the browser needs to be augmented by other special renderings or information content. Using them where appropriate, helps promote web accessibility for everyone. It should be noted that these tags can also have style properties associated with them. For example, the style sheet declaration code {color:red} associates a color with the code selector. Therefore, any text marked as computer code with the <code> tag also displays in red.

Style Sheet Alternatives to Headings

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

<style>
  h2 {font-family:arial; font-style:italic}
</style>

Listing 4-12. Styling a heading tag.

displays the heading at size 2, but with italicized Arial font face overriding the normal heading display in Times New Roman. Other styles 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 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. This coding is displayed in the browser as shown in Figure 4-13.

<style>
  .head1 {font:2em bold}
  .head2 {font:1.5em bold}
  .head3 {font:1.125em bold}
  .head4 {font:0.95em bold}
  .head5 {font:0.8em bold}
  .head6 {font:0.625em bold}
</style>

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

Listing 4-13. Styling heading tags.

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

Figure 4-13. Browser display of headings created with style declarations.

There are several alternatives for creating headings. You can either use <hn> tags with their default stylings, tags with modified stylings, or forego 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. While differing in sizes and alignments, headings often have the same font faces and colors. 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, and establishes a common visual style for all headings used on the page.

<style>
  h1, h2, h3 {font-family:verdana; color:goldenrod}
</style>

Listing 4-14. Using group selectors to style a group of tags.

The selector h1, h2, h3 is a group selector. This means that 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 to produce the display shown in Figure 4-14.

<style>
  h1, h2, h3 {font-family:verdana; color:goldenrod}
  h1         {text-align:center}
  h2, h3     {text-align:left}
  h3         {font-style:italic}
</style>

Listing 4-15. Using group selectors to further style groups of tags.

Major Heading

Side Heading

Side Heading

Figure 4-14. Browser display of headings styled with group selectors.

Group selectors are no 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 inheritance. 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 inheritance, 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 shown in Listing 4-16 indicates that all paragraphs, spans, and divisions on a page share the same type face and size.

<style>
  p, span, div {font-family:verdana; font-size:0.8em;}
</style>

Listing 4-16. Using group selectors to style different tags.

The <pre> Tag

Normally, no formatting of text takes place in the browser unless it is surrounded with HTML 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> ("preformatted" or "preserve" spacing) block-level 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 HTML 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. For example, the following code produces a table that is displayed in the browser identical to the way it is typed in the editor.

<pre>
                  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
----------------------------------------------
</pre>

Listing 4-17. Using the <pre> tag to retain editor spacing.

Since 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 amount of space between letters. For example, the following code, dresses up the previous table with bold and italic font styles along with a text color. When practicing, make sure that you align the information in the table properly before adding extra style tags that visually displace the aligned text when viewed in the editor. These extra tags inside the <pre> tag 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
----------------------------------------------
</pre>

Listing 4-18. Adding styling to text formatted with the <pre> tag.

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

Figure 4-15. Browser display of styled table formatted with <pre> tag.

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.

TOP | NEXT: Text & Background Colors