Mastering Text Easily
Using various tags in different browsers, you should note that the most important thing is not what each element looks like, but what meaning it applies. In this article you will find the information concerning a number of tags that should be used to define various text elements such as abbreviations, quotations and computer code.
Abbreviations and Acronyms
abbr – used for abbreviations
acronym – used for acronyms
An abbreviation is a shorten form of phrase. An acronym is an abbreviation made up of the initial letters of the phrase it represents. For example, CSS is an acronym while HTML is not, because the acronym of ‘Hypertext markup language’ is ‘HML’.
You should use the phrase that is represented with acronym or abbreviation 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>
Internet Explorer doesn’t support the abbr tag, but you can use clever Javascript workaround as well.
Quotations
blockquote, q and cite are used for quotations.
blockquote – used for large citations.
q – used for smaller phrases.
cite – is in-line as q and can be used in case of future deprecation of q.
The title attribute is used to show where the citation has come from.
Note: as a rule, q does not change the appearance of the enclosed text. CSS should be used 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 Webdea and it said…</p>
<blockquote title=”From WEBDEA, http://www.webdea.com/”>
<p> Using various tags in different browsers, you should note that the most important thing is not what each element looks like, but what meaning it applies. In this article you will find the information concerning a number of tags that should be used to define various text elements such as abbreviations, quotations and computer code. </p>
</blockquote>
Code
code is used for computer code.
var is used to indicate a variable within code.
For example:
<code><var>ronankeatingisbland</var> = true;</code>
samp is 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>
<div id=”intro”>
<h1>Some heading</h1>
<p>Some paragraph paragraph thing thing thingy.</p>
</div>
</pre>
pre and samp – also used mainly for code.
Definition Terms
dfn – used to highlight the first use of a term.
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 – used for an address.
<address>
Webdea House<br />
HTML Street<br />
Webdea city<br />
HT19 4ML
</address>
Obscure rarities
There are also some tags that are used because of their super specific nature.
bdo – used to reverse the direction of the text (for example, it 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”>aedbew</bdo>
kbd – used to indicate text that the user should type.
<p>Now type <kbd>woo hoo</kbd></p>
ins and del – used to display editorial insertions and deletions of text accordingly. It can have the attributes datetime (in the format of YYYYMMDD) and cite (a URL to a description discribing why the insertion or the deletion has been made).
The ins element is as a rule underlined while the del element is with a strikethrough.
<p>This is some <del datetime=”20030522″>nonsense</del> <ins cite=”http://www.webdea.com”>very informative stuff</ins> that I’ve written.</p>
Presentational Elements
Such presentation elements as b, i, tt, sub, sup, big and small should not be used to separate meaning and presentation. For example, b can define a bold element that has no meaning at all, because such tags define visual characteristics only.
There are such tags as strong and em (samples of ‘phrase elements’) that add meaning. In case you just want to replicate specific styles of these tags without any intended meaning, you should apply CSS to span tags.