Ross Merriam, Web Developer & Designer

Style Guide

Block Quotes

Block Quotes, Citations and Q

The blockquote element represents a section of content that is quoted from another source, sometimes with a citation that must be inside a footer or cite element.

The <q> element is for quoting something inline and also supports using the site attribute.

The information regarding blockquotes around the web can be quite conflicting.

Previously in HTML5 it was not conforming to include citations within blockquote elements. Now it is, as long as the citation content is within a cite or footer element.

The q element is designed to be used to quote from other sources This means we can’t use q for sarcasm or other non-quotation uses of quote marks (“”). In those cases, add punctuation manually.

		<p>The information regarding blockquotes around the web can be quite conflicting.</p>

<blockquote>
Previously in HTML5 it was not conforming to include citations within blockquote elements. Now it is, as long as the citation content is within a cite or footer element.

<footer>
    &#x2014; <cite><a href="http://html5doctor.com/cite-and-blockquote-reloaded/">HTML5 Doctor</a></cite>
</footer>
</blockquote>

<p>The q element is designed to be used to quote from other sources <q cite="http://html5doctor.com/blockquote-q-cite/">This means we can&#x2019;t use q for sarcasm or other non-quotation uses of quote marks (&#x201C;&#x201D;). In those cases, add punctuation manually.</q>
</p>
		

Headers

Header Elements

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6
		<h1>This is an H1</h1>
<h2>This is an H2</h2>
<h3>This is an H3</h3>
<h4>This is an H4</h4>
<h5>This is an H5</h5>
<h6>This is an H6</h6>
		

Lists

Lists If you want to include a heading class "list-heading" on the header tag and wrap the header and the list in a section tag.

An Ordered List
  1. First element
  2. Second element
  3. Third element
  4. Fourth element
  5. Fifth element
An Unordered List
  • First element
  • Second element
  • Third element
  • Fourth element
  • Fifth element
An Unstyled List
  • First element
  • Second element
  • Third element
  • Fourth element
  • Fifth element
A List With No Indent
  • First element
  • Second element
  • Third element
  • Fourth element
  • Fifth element
		<section>
<h5 class="list-heading">An Ordered List</h5>
<ol>
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
    <li>Fourth element</li>
    <li>Fifth element</li>
</ol>
</section>

<section>
<h5 class="list-heading">An Unordered List</h5>
<ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
    <li>Fourth element</li>
    <li>Fifth element</li>
</ul>
</section>

<section>
<h5 class="list-heading">An Unstyled List</h5>
<ul class="unstyled">
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
    <li>Fourth element</li>
    <li>Fifth element</li>
</ul>
</section>

<section>
<h5 class="list-heading">A List With No Indent</h5>
<ul class="no-indent">
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
    <li>Fourth element</li>
    <li>Fifth element</li>
</ul>
</section>