Posted By

iroybot on 10/08/09

Tagged

html
xhtml

Versions (?)

Last Edited at 10/08/09 09:02pm

Statistics

Viewed 1072 times

Favorited by 1 user(s)

Related snippets

Sample Markup for CSS Developers v0.1

/ Published in: HTML

no need for Lorem ipsum if you can insert something that makes more sense and even helps you address more HTML elements with the CSS you're about to write.

Highlighted TextExpand

This samplpe markup provides various HTML elements and how they would appear in your design. You might want to use the Firefox extension Firebug to spot each element.
Lorem ipsum sensibus <a href="http://www.example.com/element/examples" title="Example link, goes nowhere">link eleifend reprehendunt</a> ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel.
She said, <q>Quotation element verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel.</q> Sed at lorem legere electram.
<blockquote cite="http://www.example.com/blockquote" title="Example of blockquote">
	Partem evertitur has ex. <a href="http://www.example.com/element/link" title="Element link child">In vix hinc munere</a> oportere, vel in dicunt intellegebat. Puto soluta at sed. An vim ignota eirmod, no vulputate intellegebat vix!
	At urbanitas suscipiantur sea, dicant legimus mei et, maiorum propriae intellegat at sed!
</blockquote>
<table summary="Shows Grade Statistics.">
	<caption>This table holds weird numbers. 
		(Find out more about numbers on <a href="http://www.wikipedia.org/" title="Yep. You can place inline-elements within a table's caption">Wikipedia</a>)
	</caption>
	<thead>
		<tr>
			<th></th>
			<th scope="col">A</th>
			<th scope="col">B</th>
			<th scope="col">C</th>
			<th scope="col">D</th>
			<th scope="col">E</th>
			<th scope="col">F</th>
			<th scope="col">G</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td></td>
			<td><a href="#appendix">*</a></td>
			<td><a href="#appendix">**</a></td>
			<td><a href="#appendix">***</a></td>
			<td><a href="#appendix">1</a></td>
			<td><a href="#appendix">2</a></td>
			<td><a href="#appendix">3</a></td>
			<td><a href="#appendix">tfoot</a></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th id="th137750E80000" scope="row">Biology</th>
			<td headers="th137750E80000">65</td>
			<td headers="th137750E80000">6</td>
			<td headers="th137750E80000">5</td>
			<td headers="th137750E80000">5</td>
			<td headers="th137750E80000">6</td>
			<td headers="th137750E80000">6</td>
			<td headers="th137750E80000">6</td>
		</tr>
		<tr>
			<th id="th137750E80100" scope="row">Physics</th>
			<td headers="th137750E80100">65</td>
			<td headers="th137750E80100">6</td>
			<td headers="th137750E80100">5</td>
			<td headers="th137750E80100">5</td>
			<td headers="th137750E80100">6</td>
			<td headers="th137750E80100">6</td>
			<td headers="th137750E80100">6</td>
		</tr>
		<tr>
			<th id="th137750E80200" scope="row">Chemistry</th>
			<td headers="th137750E80200">65</td>
			<td headers="th137750E80200">6</td>
			<td headers="th137750E80200">5</td>
			<td headers="th137750E80200">5</td>
			<td headers="th137750E80200">6</td>
			<td headers="th137750E80200">6</td>
			<td headers="th137750E80200">6</td>
		</tr>
		<tr>
			<th id="th137750E80300" scope="row">Totals</th>
			<td headers="th137750E80300">65</td>
			<td headers="th137750E80300">12</td>
			<td headers="th137750E80300">45</td>
			<td headers="th137750E80300">86</td>
			<td headers="th137750E80300">56</td>
			<td headers="th137750E80300">56</td>
			<td headers="th137750E80300">56</td>
		</tr>
	</tbody>
</table>

Let's continue with... Yes! Yet another paragraph! This text is within a span element consectetuer, vel quot malorum no! Has eu mollis iracundia. Eam latine conclusionemque ne. Et cibo veritus dissentiet eum, sed legendos qualisque evertitur te.

<ol class="code php">
	<li class="t0 odd"><code>// Use of the pre element for PHP code</code></li>
	<li class="t0"><code>function get_blog_lang() {</code></li>
	<li class="t2 odd"><code>if ( function_exists('language_attributes') )</code></li>
	<li class="t3"><code>return language_attributes();</code></li><li class="t0 odd"><code>}</code></li>
</ol>
Eu facete perfecto nec, some CSS code: <code class="css">/* this is &lt;code&gt; element placed inline */ div#footer{text-align:center;}</code> libris doming eos ex, tota omnium electram ius ad. Has eu vituperatoribus mediocrem. Eam aliquid deserunt mandamus eu, vituperatoribus nonummy iudico pro no, eos dicam aeterno at.

<pre>&lt;?php
/**
 * This code snippet is
 * actually placed within
 * a &lt;pre&gt; block.
 * @uses DefaultClass
 * @see http://example.com/DefaultClass/
 * 
 */
$main = MainClass::getInstance();
$main->setDoctype('xhtml');
$main->show();
?&gt;
</pre>

Let's leave those boring data tables and code behind and move on to something fun: lists
<ul>
	<li>Unordered list example item first</li>
	<li>Magna everti <a href="http://www.example.com/element/link" title="Element link child">diceret</a> no qui</li>
	<li>d discere urbanitas definitiones quo 
		<ul>
			<li>a nested list.</li>
			<li>argumentum quo id 
				<ul>
					<li>second level <samp>&lt;ul&gt;-nesting</li>
					<li>Ei nibh similique eam</li>
					<li>Vix mediocrem sententiae ne</li>
				</ul>
			</li>
			<li>takimata eloquentiam</li>
		</ul>
	</li>
	<li>Usu libris albucius cu, kasd contentiones no eos</li>
	<li>Zzril forensibus dissentias ex pro</li>
</ul>
Ea has emphasis text is here vocent aliquid dolorem, te utinam discere eripuit cum! Id cum strong emphasis text epicuri evertitur, cu summo nullam mucius vim? Quo an iuvaret invenire disputationi, cu vim commune suavitate, assum libris per id?
Ius bold text is here probatus rationibus id. Novum italicized text is here utinam democritum ad vim! Illud fabellas imperdiet vis et, et stet essent appareat quo!
<ol>
	<li>Ordered list example item first</li>
	<li>Magna everti <a href="http://www.example.com/element/link" title="Element link child">diceret</a> no qui</li>
	<li>d discere urbanitas definitiones quo 
		<ol>
			<li>nested, ordered list. aeterno consulatu</li>
			<li>argumentum quo id 
				<ol>
					<li>latine scribentur</li>
					<li>possim menandri</li>
				</ol>
			</li>
			<li>takimata eloquentiam</li>
		</ol>
	</li>
	<li>Usu libris albucius cu, kasd contentiones no eos</li>
	<li>Zzril forensibus dissentias ex pro</li>
</ol>
Eum error accommodare ea! Cu nam modo iusto! His in quot a citation from <cite title="Example citation">Designing with Web Standards</cite> Paulo efficiendi, in aliquip nostrum eam! Cu sea dicunt intellegam consequuntur, omnis adipiscing id est?
An abbreviation of <abbr title="Journal of the American Medical Association">JAMA</abbr> reque illum audiam nam, aeterno consulatu argumentum quo id, soluta mandamus ei vix? Eu qui alii nobis propriae, has dolor molestiae ut. His aliquid pertinax in, alterum facilis takimata in mea. Nec mazim aeque an. Ius ad errem saperet postulant, equidem perpetua mediocrem est at.
<blockquote cite="http://www.example.com/" title="Example of nested blockquote">
	Et mea elit perpetua torquatos, id qui aeque albucius instructior? Te eum quis doctus delicata. Vim alia erant salutatus ad. Ius etiam scriptorem ne? Iracundia appellantur vix at, ut debitis vituperatoribus mea!
	<blockquote>
		Nested Blockquote. Lorem ipsum sensibus eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel. Verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel.
	</blockquote>
	Magna everti diceret no qui, id discere urbanitas definitiones quo? Dicant recusabo interesset ne vim, in mei ignota deterruisset!
</blockquote>
Ferri graece prompta ex duo, latine scribentur eu cum, nam voluptua oportere definitiones id.
Deleted text: <del>Duo in odio aliquam, sit aliquam comprehensam eu. Liber virtute detraxit ei vix! Ex eam wisi aliquam adipisci. An usu platonem qualisque, ex platonem maluisset constituam sea.</del>
Inserted text: <ins>Eos ex tractatos definitiones. Choro timeam sed ut, te qui cibo semper phaedrum, appetere delicata cu eos. Periculis dignissim ex per.</ins>
<div>
	This last paragraph is wrapped in a <samp>$lt;div&gt;<samp> Lorem inermis cotidieque usu no, delenit scripserit reprehendunt qui ad. Ne eum recteque splendide. Qui possim menandri referrentur ea, assentior theophrastus id vis, id feugiat persecuti est!
</div>

URL: http://contactsheet.de/sample-markup-for-css-developers.xhtml

Report this snippet Tweet