Divya Manian

RSS Feed Youtube Channel Github

Emphasising with HTML

Update: I had given a wrong example of the cite element. It is corrected now.

There are several ways to quote/emphasise using HTML, you can use the <q>, <blockquote>, <cite>, <em>, <strong>, <pre>, <code> and there are subscripts <sub> and superscripts <sup>.

What does each mean?


Quote

Quote is used for short quotes within paragraphs.

Example

<q>All men and women are equal</q>
        

Opera, Safari and Firefox display quotes with double-quotes automatically. Internet Explorer does not render any quotes for text marked as quote. Here is a way to display quotes in Internet Explorer

Blockquote

Blockquotes are used to mark up long quotations which may run into a few paragraphs. Ideally, you use a <p> to mark up a paragraph within a <blockquote> (even if there is only one paragraph).

The Specs state:

Note. We recommend that style sheet implementations provide a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the degree of nesting of quotations.

However, as some authors have used BLOCKQUOTE merely as a mechanism to indent text, in order to preserve the intention of the authors, user agents should not insert quotation marks in the default style.

Monc.se has an excellent article on quotes with a special section on blockquotes that helps to understand how to insert quotation marks using stylesheets for blockquote.

Cite

Contains a citation or a reference to other sources. The HTML 5 spec states that cite is to indicate the title of a book or other citation. For example:

As <cite>The White Mughals </cite> states, 
<q>A moment's insight is sometimes worth a life's experience.</q>
            
em, strong

<em> is used to indicate emphasis, while <strong> indicates stronger emphasis.

Code

To indicate a fragment of HTML or other programming instances. For example:

<code><link type="image/x-icon" href="/blog/files/nimbupani_favicon.ico" rel="shortcut icon"/></code>
            

Code does not display the content in a fixed width font and requires CSS styling for it to do so. You also need to convert the angle brackets and other coding symbols into their respective HTML entities before they can be displayed without interfering with the HTML elements within the page.

Pre

The Pre notifies the browsers that the text within that element is “preformatted” which means browsers can:

  • leave the white space within the text intact.
  • render the text with a fixed width font (like courier).
  • disable automatic word wrap.

pre also requires the symbols of programming be converted into their respective HTML entities before they can be displayed as they would interfere with the other HTML elements within the page.

Superscripts and Subscripts

<sup>, and <sub> are used to represent superscripts and subscripts. Some people recommend that, since it is for presentational use, to use CSS for them. This article states why it is better to use unicode rather than CSS to replace them.

Comments