Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

216 CHAPTER 5 More HTML5


Or if thou wilt not, be but sworn my love<br />
And I'll no longer be a Capulet.<br />
<footer>
<p>
by William Shakespeare,
<cite>Romeo and Juliet</cite> Act 2, scene 2
</p>
</footer>
</blockquote>
The <cite> element contains only the name of the work, not the author or the location
within the work.
When you want to add an inline quotation, use the <q> element instead of using
quotation marks. The browser will insert the quotation marks for you. You can add the cite
attribute to the <q> element, which should contain only the name of the work. Furthermore,
the <q> element can be nested within another <q> element. The following is an example of
the <q> element.
<p>
John said to the audience <q>Sally was crying when she
shouted <q>Leave me alone</q> and then she ran away.</q>
</p>

This example renders the first quotation by using double quotes and the second quotation
by using single quotes.

Documenting code by using the <code> and <samp> elements
When you’re documenting code and code examples in your HTML document, the <code>
and <samp> elements provide a means for adding semantic meaning to your code and code
output.
When you want to display source code of any type in the HTML document, use the <code>
element, as shown in the following example.
<code class="keepWhiteSpace">
sayHello('Mom');
function sayHello(name)
{
alert('Hello ' + name + '!');
}
</code>

After you run the sample code, you can document the output of the code by using the
<samp> element, as shown in the following example.
<samp class="keepWhiteSpace">
Hello Mom!
</samp>

Remember that the <code> and <samp> elements provide semantic meaning to the
HTML, but they don’t preserve the white space. For example, the preceding sample code will
Free download pdf