The following is what we use to lay down the most common text styles. This is honestly more than we usually need, but it helps ensure we don’t miss anything when real content is flowed into a design. I thought it might be useful for folks to use in their own projects.
I’ve got a live version here on the site.
<h1>H1 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#"><a> Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede. <abbr title="ABBR"><abbr></abbr> or <acronym title="this isn't really an acronym"><acronym></acronym> extended text when mouseover.</p>
<p>Donec nec <em><em></em> emphasis justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean <strong><strong></strong> dignissim pellentesque felis.</p>
<p><img src="path-to-your-image.jpg" alt="this is your image" width="500" height="375" /> </p>
<h2>H2 Header for topics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing </h2>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<h3>H3 Header for subtopics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing Elit</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<h4>H4 Header for subsubtopics Lorem Ipsum Dolor Sit Amet, Consector Adipiscing Elit Donec Odio Quisque</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<h5>H5 Header will rarely get used</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<blockquote>
<p>Blockquote - A blockquote is used when quoting text from another source, usually another website. Blockquotes are intended to accommodate a larger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences. Remember to link back to the source. </p>
<p><cite><cite> <a href="#">NAME OF WORK</a></cite> </p>
</blockquote>
<p>Abbas, quibus, nonummy, facilisi sit accumsan interdico et, vindico conventio in quis nunc tamen. Nostrud ymo esca ibidem consequat quae populus opes ingenium pneum distineo meus causa saepius. Reprobo sagaciter scisco minim nobis accumsan suscipit esse. Vel antehabeo vel odio huic aliquip hendrerit dolore opto exerci virtus sit molior adsum. Nulla diam minim verto pneum dignissim, eu, fatua distineo. </p>
<ul>
<li> Bulleted List Item 1 </li>
<li> Bulleted List Item 2
<ul>
<li>Nested unordered list item</li>
<li>Nested unordered list item</li>
</ul>
</li>
<li>Bulleted List Item 3 </li>
<li>Bulleted List Item 4 </li>
</ul>
<p>Abbas, quibus, nonummy, facilisi sit accumsan interdico et, vindico conventio in quis nunc tamen. Nostrud ymo esca ibidem consequat quae populus opes ingenium pneum distineo meus causa saepius. </p>
<ol>
<li> Ordered List Item 1 </li>
<li> Ordered List Item 2 </li>
<li>Ordered List Item 3 </li>
<li>Ordered List Item 4 </li>
</ol>
<p>Abbas, quibus, nonummy, facilisi sit accumsan interdico et, vindico conventio in quis nunc tamen. Nostrud ymo esca ibidem consequat quae populus opes ingenium pneum distineo meus causa saepius. Reprobo sagaciter scisco minim nobis accumsan suscipit esse. Vel antehabeo vel odio huic aliquip hendrerit dolore opto exerci virtus sit molior adsum. Nulla diam minim verto pneum dignissim, eu, fatua distineo. </p>
<p> </p>
<table>
<caption>
<caption> for the table
</caption>
<tr>
<th>Abbas </th>
<th>Abbas </th>
<th>Abbas </th>
</tr>
<tr>
<td>Quibus Nonummy </td>
<td>Quibus Nonummy </td>
<td>Quibus Nonummy </td>
</tr>
<tr>
<td>Facilisi sit accumsan </td>
<td>Facilisi sit accumsan </td>
<td>Facilisi sit accumsan </td>
</tr>
<tr>
<td> Vindico conventio</td>
<td> Vindico conventio</td>
<td> Vindico conventio</td>
</tr>
<tr>
<td> Nostrud ymo </td>
<td> Nostrud ymo </td>
<td> Nostrud ymo </td>
</tr>
<tr>
<td>Esca ibidem </td>
<td>Esca ibidem </td>
<td>Esca ibidem </td>
</tr>
</table>
<p> </p>
<p>Veniam ne gemino luctus nisl sino augue iriure. Saluto lenis metuo abluo feugiat, lucidus. Ideo, consequat erat reprobo lobortis, minim. Blandit qui aliquam ea eum quis tego. Oppeto valetudo typicus esca, os transverbero, vero autem pecus delenit ullamcorper patria elit populus. Erat natu bene at, ne vel abico comis iusto dignissim abigo, eum vulputate duis.</p>
<p><code><code> function getJello() {
echo $aDeliciousSnack;
}</code></p>
<p>Veniam ne gemino luctus nisl sino augue iriure. Saluto lenis metuo abluo feugiat, lucidus. Ideo, consequat erat reprobo lobortis, minim. Blandit qui aliquam ea eum quis tego. Oppeto valetudo typicus esca, os transverbero, vero autem pecus delenit ullamcorper patria elit populus. Erat natu bene at, ne vel abico comis iusto dignissim abigo, eum vulputate duis.</p>
<dl>
<dt><dt> This is a term</dt>
<dd><dd> The is a definition of that term. Veniam ne gemino luctus nisl sino augue iriure. Saluto
lenis metuo abluo feugiat, lucidus. Ideo, consequat erat. </dd>
<dt><dt> This is a term</dt>
<dd><dd> The is a definition of that term. Veniam ne gemino luctus nisl sino augue iriure. Saluto
lenis metuo abluo feugiat, lucidus. Ideo, consequat erat. </dd>
<dt><dt> This is a term</dt>
<dd><dd> The is a definition of that term. Veniam ne gemino luctus nisl sino augue iriure. Saluto
lenis metuo abluo feugiat, lucidus. Ideo, consequat erat. </dd>
</dl>
Interestingly, this very site fails on the DL and Table elements. I best get cracking.