Combining HTML Font Codes

bold and italics text

Here's how to combine HTML font codes on your web page. We'll start off with a rundown on...

Inline Elements

The font element and all of the font style and special elements are known as inline elements. Unlike block level elements, the end tag of an inline element does not force a line break in the visible text.

Generally, inline elements may appear consecutively or may be combined so that one inline element contains one or more other inline elements. When inline elements appear consecutively, the first element terminates with its end tag before the second element begins with its start tag. This is best visualized by thinking of each element's start tag, content (visible text) and end tag all working together as one complete unit.

Nesting and Overlapping Tags

In Examples 1A and 1B, we'll break from conventions used on this website by color coding the visible text for demonstrational purposes:

Example 1A - Elements as Complete and Separate Units - RIGHT


Bold text


Italics text


Example 1B - Elements with Overlapped Tags - WRONG


Bold text

THIS TAG IS OVERLAPPING.
Italics text


In Example 1B, the first element's end tag  'overlaps' into the second element. In HTML coding, this is 'bad grammar' and should be avoided at all costs.

When two inline elements are used to produce a combined effect on the same text, the first element's start and end tags appear at the beginning and at the end of the combined set respectively while the second element's start and end tags are 'nested' within the first. This may be illustrated as follows:

Example 2A - Nested Tags - RIGHT

<b>

<i>

Bold and italics text 

</i>

</b>

In Example 2A (above), the ... tags are nested inside the ... tags. The elements' tags must never be overlapped. To illustrate below:

Example 2B - Overlapped Tags - WRONG



Bold and italics text

THIS TAG IS OVERLAPPING.

When combining inline elements (which are also known as text level elements), it doesn't matter which pairs of element tags are nested within others just as long as they are nested. Hence the following two examples are correct and produce identical results:

Example 3A



Times New Roman typeface rendered in Italics.



Example 3B



Times New Roman typeface rendered in Italics.



The following is a more complex example of correctly combining inline elements to apply to the same text as well as using inline elements consecutively. It also illustrates how text inherits formatting from the preceding text when one inline element is contained within another. In Example 4A, the elements' tags are color coded to illustrate the association between start and end tags and the code is expanded and stacked vertically for clarity:

Example 4A



Arial font at size 3.



This text inherits all the formatting from the preceding text but is now displayed in bold. Hence it is Arial, size 3, bold.



This text likewise inherits all the formatting from the preceding text and adds on italics. (Arial, size 3, bold, italics.)



Italics has now ended but all other formatting continues. (Arial, size 3, bold.)



Now the font face changes to Times New Roman but continues as bold and size 3.



Now the Times New Roman font face has ended so the text returns to the Arial, size 3, bold.



Now the bold text style has ended and the text returns to its original Arial font at size 3.



(Note that web browsers will ignore all extra white space and line breaks created in the source code. See Making Paragraphs for more information.)

Click here to see the result of Example 4A on a web page...

Example 4B removes all the visible text and just displays the HTML coding:

Example 4B










Note that there are no overlapping tags because:

The ... tags are nested within the ... tags.
The ... tags are nested within the ... tags.
The ... tags are also nested within the ... tags.
The ... tags terminate before the ... tags begin.

This rule of making sure that there is no overlapping of tags applies not only to inline elements but to all HTML elements. If you review the basic HTML web page structure, you will see the no-overlapping rule clearly in action:

The <head>...</head> tags terminate before the <body>...</body> tags begin and thus they run consecutively without overlapping.
The <title>...</title> tags are nested inside the <head>...</head> tags.
Likewise both the <head>...</head> tags and the <body>...</body> tags are nested inside the <html>...</html> tags.

When you construct source code free of any overlapping tags, you are writing good HTML and your web pages will be far more likely to display as you intended.

Now that you are familiar with the concept of nesting HTML tags, let's move on and learn how to set your text into paragraphs using larger formatting structures called block elements...

See also:

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates