Inline Elements
Well, the section on block-level elements ran to three pages, so you shouldn't be too surprised if another major topic is similarly extensive, should you? Yes, I'm still going to say this tutorial's brief. It is. Honestly.
Phrase Elements
A number of phrase elements can be applied to text to alter its meaning. These can be divided into two rough categories: general and computer code phrase elements. In all cases, phrase elements must be nested inside block-level elements.
General Phrase Elements
<em>…</em>- Emphasis
<strong>…</strong>- Strong emphasis
<q>…</q>Inline quotation
- This element often uses the attribute
cite="URL of source"to allow you to give cite the source of the quote. <abbr>…</abbr>- Abbreviation
- This element often takes the attribute
titleto provide a definition of the abbreviation in question. For example: <abbr title="Hypertext Markup Language">HTML</abbr>.<abbr>tags with this attribute set are usually rendered with a dotted underline.
Computer Code Phrase Elements
<code>…</code>Code snippet<samp>…</samp>- Sample output
<kbd>…</kbd>- Keyboard text
<var>…</var>- Variable
Deletion and Insertion
<del>…</del>Deleted text. Usually struck through.<ins>…</ins>- Inserted text. Usually rendered underlined. Often used in conjunction with
<del>to show deleted text and its replacement.
<del> and <ins> are rather odd tags, as block-level elements can be placed inside them.
Presentational Inline Elements
There are some inline elements that create immediate changes in appearance to text, but carry no semantic weight. Some of these are deprecated. Others are still valid but I don't recommend them. And there is one tag that you have no reason to use, ever. I include these only for the sake of completeness. Basically, HTML is about the structure of documents, and should include as few instructions as to its presentation as possible. Instead of these tags, consider using CSS instead.
<b>…</b>- Boldface text. Not deprecated yet, but use
<strong>instead. <i>…</i>- Italic text. Not deprecated yet. Consider using
<em>or<cite>instead. <strike>…</strike>Strikethrough text. Deprecated since HTML 4.01 came out, and not supported by XHTML 1.0 Strict. Use<del>instead!<s>…</s>Strikethrough text. See above.<blink>…</blink>- Blinking text. The hated blink tag. Never use this element. You have no reason whatsoever to use it. If you think you have, you are wrong. Lou Montulli, creator of the <blink> tag, considers it to be
the worst thing I've ever done for the Internet
. <font face="arial" color="#ff0000" size="+1">…</font>- Specify font face, colour and size. Deprecated since HTML 4 was specified, and not without good reason. This tag makes pages and sites a real chore to update. Use stylesheets instead. If you absolutely must provide inline font instructions, do something like this:
<span style="font-family:arial,sans-serif;color:#f00;size:large">put text here</span>. Don't use font tags if you can help it.