Technical writing services by Espirian

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

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

element:


This is a normal paragraph.

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.

This is how the code looks in the browser:

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

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 element. This appears inside the

element, as shown here:


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

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 element. The hyperlink is added by using the <a> (for ‘anchor’) element with an href="" attribute.

Here’s the result in the browser:

Blockquote with a source

My browser’s default styling is to italicise text within the 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 element specifically for this sort of construction. Here it is:


I agree with Carl Sagan's take on this: Absence of evidence is not evidence of absence.

Here’s the result in the web browser:

As you can see, the quote marks appear in place of the start and end of the 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 element.

Here’s what the HTML 5.1 specification has to say about the use of the 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 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

Want relentlessly helpful emails? Join Espresso ☕️

Get writing tips, web advice & goodies.

💙 606 digital caffeine fans

🍩 No spam or the doughnuts are on me • privacy

Who wrote this?

John Espirian – the relentlessly helpful technical copywriter

I write B2B web content, blogs, user guides and case studies – all aimed at explaining how your products, services and processes work. I also offer LinkedIn profile critiquing and rewriting.

I work from home in Newport, South Wales and support the (formerly) mighty Liverpool FC 🔴⚽️