Drew's Web Design Site: Inline tags

The page on block-level tags noted, first, that those tags mostly caused blank spaces to open up between the blocks. It also noted that you should not normally nest block-level tags within one another.

Inline tags, on the other hand, are so called because they cause the text within them to continue to appear "in line" with the rest of the text as it appears in the source code. The first word of this paragraph is an example. <i> is an inline tag, and so is <b>. They can happily be nested within one another. Note also that inline tags are always nested within block-level tags.

Inline tags are fairly numerous and I've listed the rest below. Most are used only rarely, although we will come across them now and again, such as on the page about non-visual browsers. Note however that the <a> tag is an inline tag - and the majority of lecture 3 is devoted to that one.

<acronym>	Enclose acronyms or abbreviations in this tag, and use the attribute title to provide a full version of the acronym. Why? Well, try it with this one - hover your cursor over this acronym (unless you're using Netscape 4 or some other older browser where it won't work): BHAFC. Really why? Because Google can now index the full version of the acronym as well as the acronym itself, because non-visual browsers can "read out" your acronyms in full, because it makes your pages easier to use, and because it's an example of full text mark-up. Incidentally the code for that acronym looks like this: <acronym title="Brighton and Hove Albion Football Club!">BHAFC</acronym>
<big>	Makes the text one font size larger; this text has been enclosed in <big> tags.
<cite>	Denotes a citation or reference. Usually rendered in italic.
<code>	Denotes a sample of computer code, rendered in a monospace font, `like this`.
<em>	Denotes emphasised text. Usually rendered in italic.
<small>	Perhaps unsurprisingly, the opposite of <big> as with this text.
<span>	This is the inline equivalent of <div>. It has no inherent formatting of its own, but ad hoc style definitions can be applied to it either in a style sheet or via style attributes. If you want a one-off passage in another font, for example, you could do it with this code: <span style="font-family: Garamond, Times, serif; font-size: 100%;">another font</span>. <span> is also often seen with the class attribute so it makes a reappearance in lecture 4 when we talk about style sheet classes.
<strong>	Strongly emphasised text. Usually rendered in bold.
<sub>	Subscripted, or below-the-line text, like the 2 in CO₂.
<sup>	Superscripted, or above-the-line text, like the 2 in E=mc². You might notice on both these tags that the browser's line spacing is slightly thrown out, which is an argument against using them too liberally.

Are all these really necessary? They do give you opportunities to apply several different styles to your web page text without worrying about style attributes or style sheet classes, but be careful here. Remember that HTML is more about defining structure than style, and that's why many of these tags exist (as well as the more obscure block-level ones like <address>). If you have a citation in your document, then enclosing it in <cite> tags means that text-processing software knows it's a citation. What style it appears in is irrelevant to this kind of structural mark-up. Those who go on to do the Web Design option on Electronic Publishing and XML will find out more about this sort of thing: others with some time to spare may like to look at the Electronic Publishing teaching materials which will open in a second browser window.

Web Design

inline tags

main menus

help pages