advanced code snippet search

Posted By

karlhorky on 12/03/10


Tagged

css test testing html xhtml tags styling example markup styles examples


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

kirkov
newbiegeek


Test webpage for all common xhtml tags

 / Published in: XHTML
 

URL: http://w3schools.com/tags/default.asp

During the template design phase of a website, I like to break down my work into identifiable phases. One of such phases that I go through is writing the markup for the website. I typically write the markup for the website before I write any css styles in order to come up with the most semantic xhtml possible. One last step that I take before finishing the markup and start applying styles is adding this snippet's test content to my content element. The test content in this snippet allows for testing of styles on all common xhtml tags, effectively simulating the appearance of any webpage on your site. As long as you have included styling for all of these major xhtml tags, elements on this page should appear as they do in your final product.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. 	<head>
  5. 		<title> Title </title>
  6. 	</head>
  7.  
  8. 	<body>
  9. 		<div id="content">
  10. 			<div id="content-body">
  11. 				<h1>Content Types Examples - h1</h1>
  12. 				<p>
  13. 					Sed dignissim, neque ac malesuada eleifend, diam	dolor	ullamcorper nulla, et	venenatis lectus justo et urna.
  14. 					Nulla facilisi. Suspendisse nec justo at tortor feugiat	convallis. Donec quis ligula turpis. Proin posuere erat
  15. 					quis augue placerat non mattis nisl condimentum.
  16. 				</p>
  17. 				<h2>Paragraphs and General Formatting - h2</h2>
  18. 				<p>
  19. 					Vivamus sit amet <a href="#">link</a> tortor. Sed condimentum, <em>em (emphasis)</em>, nulla turpis tincidunt dui,
  20. 					non	<strong>strong</strong> ut erat. Tristique felis. Nam sit amet <cite>cite (citation)</cite>  viverra, metus
  21. 					sed cursus dignissim, <dfn>dfn (definition)</dfn> mauris, lobortis elit massa ut risus. Suspendisse semper ornare
  22. 					elit ac sagittis. Nunc id <del>del (deleted)</del> <ins>ins (inserted)</ins> at at ligula. In lacus dui, lacinia
  23. 					eget adipiscing id,	<span>span</span> cursus in erat<sub>sub (subscript)</sub>. Proin<sup>sup (superscript)</sup>
  24. 					et massa mauris.
  25. 				</p>
  26. 				<blockquote>
  27. 					Blockquote text: Curabitur sed odio eu lacus volutpat hendrerit eu in justo. Etiam vitae orci nunc. Phasellus
  28. 					egestas auctor urna, tristique vestibulum elit consequat vel. Aliquam erat volutpat. Vivamus eu odio at orci
  29. 					dignissim dignissim ac quis diam. Sed dui nisl, laoreet vel viverra sit amet, interdum eget risus. Vivamus ut augue
  30. 					a eros pellentesque dapibus.
  31. 				</blockquote>
  32. 				<h3>Example of header - h3</h3> 
  33. 				<p>
  34. 					Sed dignissim, neque ac malesuada eleifend,	diam dolor ullamcorper nulla,	et venenatis lectus justo et urna. Nulla
  35. 					facilisi.
  36. 				</p>
  37. 				<h4>Example of header - h4</h4> 
  38. 				<p>
  39. 					Suspendisse sit amet nunc id sem ullamcorper porttitor. 
  40. 				</p>
  41. 				<h5>Example of header - h5</h5> 
  42. 				<p>
  43. 					Curabitur a rutrum dui. 
  44. 				</p>
  45. 				<h6>Example of header - h6</h6> 
  46. 				<p>
  47. 					Vestibulum eu erat id enim pellentesque gravida.
  48. 				</p>
  49. 				<h2>Lists and Floats - h2</h2>
  50. 				<p>
  51. 				  Nulla mattis enim nec turpis volutpat convallis.
  52. 				</p>
  53. 				<div class="left">
  54. 				  <h3>Float left - h3</h3> 
  55. 					<ul>
  56. 					  <li>Unordered List Item 1</li>
  57. 					  <li>Unordered List Item 2</li>
  58. 						<li>
  59. 						  <h4>Unordered List Item 3 (with Children) - h4</h4>
  60. 						  <ul>
  61. 						  	<li>Second Level Unordered List Item 1</li>
  62. 						  	<li>Second Level Unordered List Item 2</li>
  63. 						  </ul>
  64. 						</li>
  65. 						<li>
  66. 						  <h4>Unordered List Item 4 (with Children) - h4</h4>
  67. 						  <ol>
  68. 						  	<li>
  69. 									<h5>Second Level Ordered List Item 1 - h5</h5>
  70. 									<p>
  71. 									  Proin pulvinar dui a ipsum lacinia sagittis. Curabitur sed odio eu lacus volutpat hendrerit eu in justo.
  72. 										Etiam vitae orci nunc. Phasellus egestas auctor urna, tristique vestibulum elit consequat vel. Aliquam
  73. 										erat volutpat.
  74. 									</p>
  75. 									<h6>Cont. Second Level Ordered List Item 1 - h6</h6>
  76. 									<p>
  77. 									  Donec lobortis purus at erat ultricies condimentum. 
  78. 									</p>
  79. 								</li>
  80. 						  	<li>Second Level Ordered List Item 2</li>
  81. 						  </ol>
  82. 						</li>
  83. 					</ul>
  84. 				</div>
  85. 				<div class="right">
  86. 				  <h3>Float right - h3</h3> 
  87. 					<ol>
  88. 						<li>Ordered List Item 1</li>
  89. 						<li>Ordered List Item 2</li>
  90. 						<li>
  91. 						  <h4>Ordered List Item 3 (with Children) - h4</h4>
  92. 						  <ul>
  93. 						  	<li>Second Level Unordered List Item 1</li>
  94. 						  	<li>Second Level Unordered List Item 2</li>
  95. 						  </ul>
  96. 						</li>
  97. 						<li>
  98. 						  <h4>Ordered List Item 4 (with Children) - h4</h4>
  99. 						  <ol>
  100. 						  	<li>
  101. 									<h5>Second Level Ordered List Item 1 - h5</h5>
  102. 									<p>
  103. 									  Proin pulvinar dui a ipsum lacinia sagittis. Curabitur sed odio eu lacus volutpat hendrerit eu in justo.
  104. 										Etiam vitae orci nunc. Phasellus egestas auctor urna, tristique vestibulum elit consequat vel. Aliquam
  105. 										erat volutpat.
  106. 									</p>
  107. 									<h6>Cont. Second Level Ordered List Item 1 - h6</h6>
  108. 									<p>
  109. 									  Donec lobortis purus at erat ultricies condimentum. 
  110. 									</p>
  111. 								</li>
  112. 						  	<li>Second Level Ordered List Item 2</li>
  113. 						  </ol>
  114. 						</li>
  115. 					</ol>
  116. 				</div>
  117. 				<h3>Middle content in between the floated divs. - h3</h3>
  118. 				<p>
  119. 				  Suspendisse sit amet nunc id sem ullamcorper porttitor. Curabitur a rutrum dui. Vestibulum ante ipsum primis in
  120. 					faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ipsum dolor, molestie sed ultricies eu, fermentum vitae
  121. 					enim. Vestibulum eu erat id enim pellentesque gravida. Mauris sed lectus velit.
  122. 				</p>
  123. 				<br class="clear" />
  124. 				<h3>Content after a clear element - h3</h3>
  125. 				<p>
  126. 					Ut et lorem sit amet ante pellentesque ultrices. Sed diam arcu, dapibus non molestie a, dignissim ac sapien. Fusce sed
  127. 					neque augue, non sagittis massa.
  128. 				</p>
  129. 				<h2>Table Example - h2</h2>
  130. 				<p>
  131. 					Nullam at dui nunc. Vestibulum ullamcorper nisl et leo iaculis porttitor iaculis erat posuere. Proin tincidunt velit in
  132. 					ante lobortis in suscipit elit pharetra.
  133. 				</p>
  134. 				<table>
  135. 					<caption>Table Caption</caption>
  136. 					<thead>
  137. 						<tr>
  138. 							<th>Table Head TH</th>
  139. 							<th>Table Head TH</th>
  140. 						</tr>
  141. 					</thead>
  142. 					<tfoot>
  143. 						<tr>
  144. 							<td>Table Foot TD</td>
  145. 							<td>Table Foot TD</td>
  146. 						</tr>
  147. 					</tfoot>
  148. 					<tbody>
  149. 						<tr>
  150. 							<td>Table Body TD</td>
  151. 							<td>Table Body TD</td>
  152. 						</tr>
  153. 						<tr>
  154. 							<td>Table Body TD</td>
  155. 							<td>Table Body TD</td>
  156. 						</tr>
  157. 					</tbody>
  158. 				</table>
  159. 				<h2>Form Example - h2</h2>
  160. 				<form>
  161. 					<fieldset>
  162. 						<legend>Fieldset Legend:</legend>
  163. 						<div class="content-body-form-row">
  164. 							<label for="lismod">File:</label>
  165. 							<input type="file" size="30" id="lismod" />
  166. 						</div>
  167. 						<div class="content-body-form-row">
  168. 							<label for="sceleris-lacinia">Radio1:</label>
  169. 							<input type="radio" name="sceleris" id="sceleris-lacinia"  />
  170. 							<label for="sceleris-mattis">Radio2:</label>
  171. 							<input type="radio" name="sceleris" id="sceleris-mattis" />
  172. 						</div>
  173. 						<div class="content-body-form-row">
  174. 							<label for="sceleris-lacerg">Textarea:</label>
  175. 							<textarea name="sceleris" id="sceleris-lacerg" cols="5" rows="5">
  176. 							  Textarea body text
  177. 							</textarea>
  178. 						</div>
  179. 					</fieldset>
  180. 					<fieldset>
  181. 						<legend>Fieldset Legend:</legend>
  182. 						<div class="content-body-form-row">
  183. 							<label for="ligula">Text:</label>
  184. 							<input type="text" size="30" id="ligula" />
  185. 						</div>
  186. 						<div class="content-body-form-row">
  187. 							<label for="auctor">Password:</label>
  188. 							<input type="password" size="30" id="auctor" />
  189. 						</div>
  190. 						<div class="content-body-form-row">
  191. 							<label for="mattis">Checkbox:</label>
  192. 							<input type="checkbox" id="mattis" />
  193. 						</div>
  194. 						<div class="content-body-form-row">
  195. 							<label for="gestas">Select:</label>
  196. 							<select id="gestas">
  197. 								<optgroup label="Swedish Cars">
  198. 									<option value="volvo">Volvo</option>
  199. 									<option value="saab">Saab</option>
  200. 								</optgroup>
  201. 								<optgroup label="German Cars">
  202. 									<option value="mercedes">Mercedes</option>
  203. 									<option value="audi">Audi</option>
  204. 								</optgroup>
  205. 							</select>
  206. 						</div>
  207. 					</fieldset>
  208. 					<button type="submit"><span class="hide-text">Search</span></button>
  209. 				</form>
  210. 				<h2>Iframe Example - h2</h2>
  211. 				<iframe src="http://www.google.com/">
  212. 					<p>Your browser does not support iframes.</p>
  213. 				</iframe>
  214. 				<h2>Linked Image Example - h2</h2>
  215. 				<a href="#"><img src="http://www.google.ca/intl/en_com/images/srpr/logo1w.png" /></a>
  216. 			</div>
  217. 		</div>
  218. 	</body>
  219. </html>

Report this snippet  

You need to login to post a comment.