Mastering Text

13 Feb

There is still much overuse of the br tag when p should be used for paragraphs, but it is generally accepted that p tags should be used to represent paragraphs. By the same logic, there are a number of tags that should be used to define certain text elements such as quotations, abbreviations and computer code.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

It should be kept in mind that although most browsers will render these tags in various ways, the important point to remember is that it isn’t what each element looks like, but rather what meaning it applies.

Abbreviations and acronyms

abbr and acronym are used for abbreviations and acronyms respectively.

An abbreviation is a shortened form of a phrase. Very general. An acronym however is an abbreviation made up of the initial letters (or parts of words) of the phrase it is representing. So CSS is a valid acronym, whereas HTML and XHTML are not (if ‘Hypertext markup language’ was an acronym, it would be ‘HML’. Similarly, XHTML would be EHML).

For optimum accessibility, the phrase that the acronym or abbreviation is representing should be used in the title attribute.

 <p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <acronym title="Cascading Style Sheets">CSS</acronym>.</p> 

For some baffling reason, Internet Explorer, the most common web browser, doesn’t support the abbr tag. Luckily, a guy called Marek Prokop has developed a clever Javascript workaround for this.

There is a lot of discussion about the use of abbreviation and acronym elements. Lars Holst provides perhaps the most detailed insight.

Quotations

blockquote, q and cite are used for quotations. blockquote is block-line and used for large citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.

Again, the title attribute can be used to show where the citation has come from.

Note: q does not usually change the appearance of the enclosed text – you need to use CSS if you want to apply a style.

 <p>So I asked Bob about quotations and he said <cite>I know as much about quotations as I do about pigeon fancying</cite>. Luckily, I found HTML Dog and it said...</p> <blockquote title="From HTML Dog, http://www.htmldog.com/"> <p>blockquote, q and cite are used for quotations. blockquote is block-line and used for large or citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.</p> </blockquote> 

Code

There are a few tags, code and var that are specifically for computer code and pre and samp, which are, in practice, also used mainly for code.

code is used for computer code.

var is used to indicate a variable within code.

 <code><var>ronankeatingisbland</var> = true;</code> 

samp is similar to code, but is supposed to be used for a sample of outputted code.

pre is preformatted text and is unusual in HTML tags that is preserves the white space within it. It is most commonly used for blocks of code.

 <pre> &lt;div id="intro"&gt; &lt;h1&gt;Some heading&lt;/h1&gt; &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt; &lt;/div&gt; </pre> 

Definition terms

dfn is a definition term and is used to highlight the first use of a term. Like abbr and acronym, the title attribute can be used to describe the term.

 <p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p> 

Addresses

address should be used for an address.

 <address> HMTL Dog House<br /> HTML Street<br /> Dogsville<br /> HT16 3ML </address> 

Obscure rarities

There are some tags that are worth noting, but are rarely used because of their super specific nature.

bdo can be used to reverse the direction of the text, and can be used to display languages that read right to left. The value of the required attribute dir can be ltr (left to right) or rtl (right to left).

 <bdo dir="rtl">god lmth</bdo> 

kbd is used to indicate text that should be typed by the user.

 <p>Now type <kbd>woo hoo</kbd></p> 

ins and del are used to display editorial insertions and deletions of text respectively. It can have the attributes datetime (in the format of YYYYMMDD) and cite (a URL to a description as to why the insertion or the deletion has been made).

The ins element is usually shown underlined and the del element is usually displayed with a strikethrough.

 <p>This is some <del datetime="20030522">nonsense</del> <ins cite="http://www.htmldog.com">very informative stuff</ins> that I've written.</p> 

Presentational elements

b, i, tt, sub, sup, big and small are all presentational elements and as such, by their very definition, shouldn’t be used when attempting to separate meaning and presentation. b defines a bold element for example, which has no meaning at all – these tags define purely visual characteristics, which should be the job of CSS. Even though they are valid tags, there are others (such as strong and em, which are examples of ‘phrase elements’) that actually add meaning. If you want to solely replicate specific styles of these tags, without any intended meaning, then you should apply CSS to span tags.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: