Anatomy of an HTML page – part 4

Anatomy of an HTML page – part 4

In this post:

Many people will be familiar with the common HTML elements used to write headings and paragraphs. But what about displaying quotations?

Let’s start by looking at blockquotes.

Blockquotes

In HTML, the <blockquote> element is used to set content (often just text) apart from the copy above and below. This gives us a good way to display quotations and other notes.

Here’s an example of the <blockquote> element:

<p>This is a normal paragraph.</p>
<!-- Note the default indentation of the blockquote when viewed in the browser  -->
<blockquote>
<p>This text has been placed into a blockquote element to show what happens when using one of the most basic quoting features in HTML. All web browsers handle blockquotes slightly differently, but the general behaviour is pretty much the same across the board.</p>
</blockquote>

This is how the code looks in the browser:

Blockquote example

A normal paragraph followed by a blockquote

Quotation marks are not automatically added to the content. This is consistent with the treatment of most ‘displayed’ material in print.

The default style is for a generous left indent to be applied to the content within the blockquote, thus clearly setting it apart from any content above and below.

It’s not good form to use the <blockquote> element only to move content across the page.

Such changes are better handled by Cascading Style Sheets (CSS), which allow us to apply margins and padding. As I’ve mentioned before, we’ll discuss CSS in a future post.

Citing a source

As anyone who works in the editorial field will know, it’s important to include a source whenever quoting someone else. So far as HTML goes, though, this isn’t essential: blockquotes do not require a citation.

If you wish to include a citation, the correct method is to use the <cite> element. This appears inside the <blockquote> element, as shown here:

<blockquote>
<p>Be a yardstick of quality. Some people aren't used to an environment where excellence is expected.</p>
<cite>
<a href="http://www.brainyquote.com/quotes/quotes/s/stevejobs126246.html">Steve Jobs</a>
</cite>
</blockquote>

It makes sense to include not only the name of the person being quoted but also a source on the web (if there is one), so I’ve placed a hyperlink to the quote in the <cite> element. The hyperlink is added by using the <a> (for ‘anchor’) element with an href="" attribute.

Here’s the result in the browser:

Blockquote example

Blockquote with a source

My browser’s default styling is to italicise text within the <cite> element.

Inline quotations

To include a quotation in running text, we usually place quotation marks around the content to be quoted and then follow it with the source in brackets.

A quick digression on notes

In print, it’s common to use numbered cues to point to footnotes (at the bottom of the page) or endnotes (at the end of a chapter or book). This approach isn’t best suited to the web.

The good news is that hyperlinks allow us to point directly to sources on the web.

Now, back to inline quotations. HTML has its own <q> element specifically for this sort of construction. Here it is:

<p>I agree with Carl Sagan's take on this: <q>Absence of evidence is not evidence of absence.</q></p>

Here’s the result in the web browser:

The q element

As you can see, the quote marks appear in place of the start and end of the <q> element. It may seem academic to use this element when you could just as well write the quote marks directly into the HTML, but there can be styling and semantic reasons for retaining the use of the <q> element.

Here’s what the HTML 5.1 specification has to say about the use of the <q> element:

The q element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the q element for marking up sarcastic statements.

The use of q elements to mark up quotations is entirely optional; using explicit quotation punctuation without q elements is just as correct.

I’ve also used this example to show off my own style of blockquotes. And to see a slightly fancier set of blockquotes, look at what I’ve done on my Testimonials page.

The result

As with previous parts in the series, I’ve rolled up the information in this part and placed it at the bottom of an HTML file that you can download and inspect here: sample4.html.

End of part 4

Next time, we’ll change tack as we look at the <head> section of our HTML pages.

As usual, I’m interested to know what you think of the content, so please leave a comment below or drop me a line on Twitter (@espirian). For other ways to get in touch, take a look at my Contact page.

Read the whole HTML series

  • Series index – an overview of each part
  • Part 1 – building blocks of HTML
  • Part 2 – headings, images, links and lists
  • Part 3 – comments, tables and special characters
  • Part 4 – quoting and citing
  • Part 5 – the head element, CSS and metadata
  • HTML lists – ordered and unordered lists

Thanks for reading,

John Espirian

Subscribe for tips

Join 417 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy