Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 2cc1469154
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 219 lines (139 sloc) 11.093 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218

<!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>
Something went wrong with that request. Please try again.