-
-
Save ThomasWallace/0d545f9f923bc82ab91622ef77a1e2e5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section id="practice"> | |
<h2>Properly Marking up an HTML Document</h2> | |
<!--(Primary Content Heading)--> | |
<p>This is a paragraph. <em>Often times designers</em> will use <q>Dummy Text</q> as a <strong>placeholder</strong> in a document. An example of that text follows...Lorem ipsum dolor sit amet, consectetuer <del>adipiscing elit</del>. Praesent volutpat | |
velit sed massa. In volutpat eros sagittis ipsum. Donec fringilla risus nec nunc. Fusce tellus arcu, blandit quis, posuere in, porta vitae, lorem.</p> | |
<p> <a href="#">Quisque feugiat arcu eget sapien</a>. <span class="foo">Aenean</span> eget ipsum id arcu bibendum porttitor. Vivamus id lectus non eros eleifend aliquet.</p> | |
<p> <img src="https://thomaswallace.net/wp-content/uploads/2018/02/ualr.png" alt="UA Little Rock Logo" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris volutpat. Integer dignissim consequat enim. Praesent velit felis, | |
tempus malesuada, sagittis et, condimentum in, ante. Nulla lobortis, ligula sit amet laoreet sollicitudin, sem arcu lacinia tellus, id lobortis arcu urna tincidunt turpis. <sup><a href="#">1</a></sup> </p> | |
<h3>This is a Subsection of the Primary Content</h3> | |
<!-- (Subsection I)--> | |
<table> | |
<caption>Grocery List</caption> | |
<thead> | |
<!--Design Time Attribute - Remove before Prodution--> | |
<tr> | |
<th scope="col">Item</th> | |
<th scope="col">Quantity</th> | |
<th scope="col">Cost</th> | |
</tr> | |
</thead> | |
<tr> | |
<td>Jolt Extra</td> | |
<td>3</td> | |
<td>.99</td> | |
</tr> | |
<tr> | |
<td>Jolt</td> | |
<td>3</td> | |
<td>.99</td> | |
</tr> | |
<tr> | |
<td>Jolt</td> | |
<td>3</td> | |
<td>.99</td> | |
</tr> | |
<tr> | |
<td>Jolt</td> | |
<td>3</td> | |
<td>.99</td> | |
</tr> | |
<tr> | |
<td>Jolt</td> | |
<td>3</td> | |
<td>.99</td> | |
</tr> | |
<tr> | |
<td>Jolt</td> | |
<td>3</td> | |
<td>.99</td> | |
</tr> | |
</table> | |
<p>This is a paragraph. Often times designers will use "Dummy Text" as a placeholder in a document. An example of that text follows...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent volutpat velit sed massa. In volutpat eros sagittis | |
ipsum. Donec fringilla risus nec nunc. Fusce tellus arcu, blandit quis, posuere in, porta vitae, lorem. Quisque feugiat arcu eget sapien. Aenean eget ipsum id arcu bibendum porttitor. Vivamus id lectus non eros eleifend aliquet. Cum sociis natoque | |
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris volutpat. Integer dignissim consequat enim. Praesent velit felis, tempus malesuada, sagittis et, condimentum in, ante. Nulla lobortis, ligula sit amet laoreet sollicitudin, | |
sem arcu lacinia tellus, id lobortis arcu urna tincidunt turpis.</p> | |
<!--This is a list of instructions.--> | |
<ol> | |
<li>Instruction</li> | |
<li>Instruction</li> | |
<li>Instruction</li> | |
<li>Instruction</li> | |
<li>Instruction</li> | |
<li>Instruction</li> | |
</ol> | |
<!--This is a list of items to purchase at the grocery store.--> | |
<ul> | |
<li>Ramen</li> | |
<li>Cheetos | |
<ul> | |
<li>Ramen</li> | |
<li>Cheetos</li> | |
<li>Jolt</li> | |
<li>Bread</li> | |
</ul> | |
</li> | |
<li>Jolt</li> | |
<li>Bread</li> | |
</ul> | |
<!--This is an Example of how we should mark up a term and its description(s)--> | |
<dl> | |
<dt>Term</dt> | |
<dd>Description 1</dd> | |
<dd>Description 2</dd> | |
<dt>Term</dt> | |
<dd>Description 1</dd> | |
<dd>Description 2</dd> | |
<dd>Description 3</dd> | |
<dd>Description 4</dd> | |
<dt>Term</dt> | |
<dd>Description 1</dd> | |
</dl> | |
<h4>This is a Subsection of Subsection I</h4> | |
<blockquote>This is a Quote. Content precedes design. Design in the absence of content is not design, it's decoration. <cite>From Designing with Web Standards by Jeffery Zeldman.</cite></blockquote> | |
<h3>This is a Subsection of the Primary Content</h3> | |
<!--(Subsection II)--> | |
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent volutpat velit sed massa. In volutpat eros sagittis ipsum. Donec fringilla risus nec nunc. Fusce tellus arcu, blandit quis, posuere in, porta vitae, lorem. Quisque | |
feugiat arcu eget sapien. Aenean eget ipsum id arcu bibendum porttitor. Vivamus id lectus non eros eleifend aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris volutpat. Integer dignissim consequat | |
enim. Praesent velit felis, tempus malesuada, sagittis et, condimentum in, ante. Nulla lobortis, ligula sit amet laoreet sollicitudin, sem arcu lacinia tellus, id lobortis arcu urna tincidunt turpis. Proin adipiscing ultrices dui. Duis porttitor, | |
libero ut eleifend pellentesque, risus turpis fermentum est, vel nonummy lorem est id nisl. Nulla facilisi. In sagittis tortor. Vestibulum dictum leo vitae augue. Morbi in odio sed nulla luctus sodales.</p> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment