Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
219 lines (139 sloc) 10.8 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Emphasising with HTML | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="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 & &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/emphasising-with-html.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/being-over-enthusiastic-about-accessibility.html" title="Being over enthusiastic about accessibility">❬</a>
<a class="next" href="/book-review-for-october-08.html" title="Book Review for October 08">❭</a>
</nav>
<header>
<time datetime="2008-11-15T00:00:00-08:00" pubdate><span class='month'>Nov</span> <span class='day'>15</span> <span class='year'>2008</span></time>
<h1 class="entry-title"><a href="/emphasising-with-html.html">Emphasising with HTML</a></h1>
</header>
<div class="entry-content"><p><strong>Update:</strong> I had given a wrong example of the <code>cite</code> element. It is corrected now. </p>
<p>There are several ways to quote/emphasise using <abbr title="Hyper Text Markup Language">HTML</abbr>, you can use the <code>&lt;q&gt;</code>, <code>&lt;blockquote&gt;</code>, <code>&lt;cite&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;pre&gt;</code>, <code>&lt;code&gt;</code> and there are subscripts <code>&lt;sub&gt;</code> and superscripts <code>&lt;sup&gt;</code>. </p>
<h3>What does each mean?</h3>
<br/>
<dl>
<dt>Quote</dt>
<dd><p>Quote is used for short quotes within paragraphs.</p>
<p>Example</p>
<pre>
<code>&lt;q&gt;All men and women are equal&lt;/q&gt;</code>
</pre>
<p>Opera, Safari and Firefox display quotes with double-quotes automatically. Internet Explorer does not render any quotes for text marked as quote. <a href="http://willcode4beer.com/tips.jsp?set=fixIEQuotes">Here is a way to display quotes in Internet Explorer</a></p></dd>
<dt>Blockquote</dt>
<dd><p>Blockquotes are used to mark up long quotations which may run into a few paragraphs. Ideally, you use a <code>&lt;p&gt;</code> to mark up a paragraph within a <code>&lt;blockquote&gt;</code> (even if there is only one paragraph).</p>
<p><a href="http://www.w3.org/TR/html4/struct/text.html#h-9.2.2">The Specs</a> state: </p>
<blockquote>
<p>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.</p>
<p>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.</p>
</blockquote>
<p>Monc.se has an <a href="http://www.monc.se/kitchen/129/rendering-quotes-with-css">excellent article on quotes with a special section on blockquotes</a> that helps to understand how to insert quotation marks using stylesheets for <code>blockquote</code>.</p>
</dd>
<dt>Cite</dt>
<dd>
<p>Contains a citation or a reference to other sources. <a href="http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.7.1.1">The HTML 5 spec</a> states that <code>cite</code> is to indicate the title of a book or other citation. For example:</p>
<pre>
As &lt;cite&gt;The White Mughals &lt;/cite&gt; states,
&lt;q&gt;A moment&#x27;s insight is sometimes worth a life&#x27;s experience.&lt;/q&gt;
</pre>
</dd>
<dt>em, strong</dt>
<dd>
<p><code>&lt;em&gt;</code> is used to indicate emphasis, while <code>&lt;strong&gt;</code> indicates stronger emphasis.</p>
</dd>
<dt>Code</dt>
<dd>
<p>To indicate a fragment of HTML or other programming instances. For example:</p>
<pre>
&lt;code&gt;&lt;link type=&quot;image/x-icon&quot; href=&quot;/blog/files/nimbupani_favicon.ico&quot; rel=&quot;shortcut icon&quot;/&gt;&lt;/code&gt;
</pre>
<p>Code does not display the content in a fixed width font and requires <abbr title="Cascading Style Sheets">CSS</abbr> 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.</p>
</dd>
<dt>Pre</dt>
<dd>
<p>The <code><a href="http://www.w3.org/TR/REC-html40/struct/text.html#edef-PRE">Pre</a></code> notifies the browsers that the text within that element is &#8220;preformatted&#8221; which means browsers can:</p>
<ul>
<li>leave the white space within the text intact.</li>
<li>render the text with a fixed width font (like courier).</li>
<li>disable automatic word wrap.</li>
</ul>
<p><code>pre</code> 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.</p>
</dd>
<dt>Superscripts and Subscripts</dt>
<dd>
<p><code>&lt;sup&gt;</code>, and <code>&lt;sub&gt;</code> are used to represent superscripts and subscripts. Some people recommend that, since it is for presentational use, to use CSS for them. <a href="http://www.personal.psu.edu/ejp10/blogs/tlt/2007/02/beware-css-for-superscriptsubc.html">This article</a> states why it is better to use unicode rather than <abbr title="Cascading Style Sheets">CSS</abbr> to replace them.</p>
</dd>
</dl>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2008-11-15T00:00:00-08:00" pubdate><span class='month'>Nov</span> <span class='day'>15</span> <span class='year'>2008</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2008-11-15-emphasising-with-html.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/emphasising-with-html.html';
var disqus_identifier = 'http://nimbupani.com/emphasising-with-html.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.