WordPress theme HTML testing template

template-htmltest.php

<?php
/*
  Template Name: HTML Test
 */
get_header();
?>
  <h1>HTML tags with lorem ipsum...</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Below you can find a paragraph with mixed text formatting tags</h2>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <b>feugiat vitae, ultricies eget,</b> tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. <i>Quisque sit amet est et sapien ullamcorper pharetra.</i> Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. <small>Aenean fermentum, elit eget tincidunt condimentum,</small> eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. Class aptent taciti sociosqu <mark>ad litora torquent per conubia nostra,</mark> per inceptos himenaeos. This is <sub>subscript</sub> and <sup>superscript</sup>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. <ins>Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</ins> Vestibulum sapien. Proin quam. Etiam ultrices. <del>Suspendisse in justo eu magna luctus suscipit. Sed lectus.</del> Integer euismod lacus luctus magna.</p>

  <h2>Few paragraphs with various text formatting are also interesting</h2>

<p><b>This text is bold</b></p>
<p><code>This is computer code</code></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p><mark>This text is marked</mark></p>
<p><strong>This text is strongly emphasized</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

  <h2>Navigation Tag is shown below</h2>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>

  <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

  <h3>Header Level 3</h3>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
  <h2>Code block are usefull to display code in beautiful format</h2>
  <pre><code>
  #header h1 a {
    display: block;
    width: 300px;
    height: 80px;
  }
  </code></pre>
<h2>Check line height with various head tags</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h1>Line height are important for various head tag. So I have added a long title for this H1 head tag. Be passionate to make errors. If still this content not alligned in two line, add few more content.</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h2>Line height are important for various head tag. So I have added a long title for this H2 head tag. Be passionate to make errors. If still this content not alligned in two line, add few more content.</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h3>Line height are important for various head tag. So I have added a long title for this H3 head tag. Be passionate to make errors. If still this content not alligned in two line, add few more content.</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h4>Line height are important for various head tag. So I have added a long title for this H4 head tag. Be passionate to make errors. If still this content not alligned in two line, add few more content.</h4>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h5>Line height are important for various head tag. So I have added a long title for this H5 head tag. Be passionate to make errors. If still this content not alligned in two line, add few more content.</h5>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2>Lists are always interesting</h2>
  <h4>Basic ordered list</h4>
  <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.</li>
  </ol>
  <h4>Basic unordered list</h4>
  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <h4>Nested ordered list</h4>
  <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.</li>
     <li>Vestibulum auctor dapibus neque.</li>
     <li>Vestibulum auctor dapibus neque.
	  <ol>
		 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		 <li>Aliquam tincidunt mauris eu risus.</li>
		 <li>Vestibulum auctor dapibus neque.</li>
		 <li>Vestibulum auctor dapibus neque.
			  <ol>
				 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				 <li>Vestibulum auctor dapibus neque.
				  <ol>
					 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					 <li>Aliquam tincidunt mauris eu risus.</li>
					 <li>Vestibulum auctor dapibus neque.
						  <ol>
							 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
							 <li>Aliquam tincidunt mauris eu risus.</li>
							 <li>Vestibulum auctor dapibus neque.</li>
							 <li>Vestibulum auctor dapibus neque.</li>     
						  </ol>						 
					 </li>
					 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					 <li>Aliquam tincidunt mauris eu risus.</li>    
				  </ol>				 
				 </li>
				 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				 <li>Vestibulum auctor dapibus neque.</li>     
			  </ol>		 
		 </li>
		 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		 <li>Aliquam tincidunt mauris eu risus.
			  <ol>
				 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				 <li>Aliquam tincidunt mauris eu risus.</li>
				 <li>Vestibulum auctor dapibus neque.</li>  
			  </ol>
		 </li>
		 <li>Vestibulum auctor dapibus neque.</li>		 
	  </ol>
     </li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.     
  </ol>
  <h4>Nested unordered list</h4>
  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.</li>
     <li>Vestibulum auctor dapibus neque.</li>
     <li>Vestibulum auctor dapibus neque.
	  <ul>
		 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		 <li>Aliquam tincidunt mauris eu risus.</li>
		 <li>Vestibulum auctor dapibus neque.</li>
		 <li>Vestibulum auctor dapibus neque.
			  <ul>
				 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				 <li>Vestibulum auctor dapibus neque.
				  <ul>
					 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					 <li>Aliquam tincidunt mauris eu risus.</li>
					 <li>Vestibulum auctor dapibus neque.
						  <ul>
							 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
							 <li>Aliquam tincidunt mauris eu risus.</li>
							 <li>Vestibulum auctor dapibus neque.</li>
							 <li>Vestibulum auctor dapibus neque.</li>     
						  </ul>						 
					 </li>
					 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
					 <li>Aliquam tincidunt mauris eu risus.</li>    
				  </ul>				 
				 </li>
				 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				 <li>Vestibulum auctor dapibus neque.</li>     
			  </ul>		 
		 </li>
		 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		 <li>Aliquam tincidunt mauris eu risus.
			  <ul>
				 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				 <li>Aliquam tincidunt mauris eu risus.</li>
				 <li>Vestibulum auctor dapibus neque.</li>  
			  </ul>
		 </li>
		 <li>Vestibulum auctor dapibus neque.</li>		 
	  </ul>
     </li>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.     
  </ul>
  <h2>Form elements are too usefull...</h2>
  <form action="#" method="post">
      <div>
           <label for="name">Text Input:</label>
           <input type="text" name="name" id="name" value="" tabindex="1" />
      </div>

      <div>
           <h4>Radio Button Choice</h4>

           <label for="radio-choice-1">Choice 1</label>
           <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

       <label for="radio-choice-2">Choice 2</label>
           <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
      </div>

    <div>
      <label for="select-choice">Select Dropdown Choice:</label>
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
        <option value="Choice 3">Choice 3</option>
      </select>
    </div>

    <div>
      <label for="textarea">Textarea:</label>
      <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

    <div>
        <label for="checkbox">Checkbox:</label>
      <input type="checkbox" name="checkbox" id="checkbox" />
      </div>

    <div>
        <input type="submit" value="Submit" />
      </div>
  </form>

  <dl>
   <dt>Definition list</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.</dd>
   <dt>Lorem ipsum dolor sit amet</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.</dd>
  </dl>

  <ul>
    <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
    <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
    <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
    <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
    <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
  </ul>

  <h1>H1 tag - Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  <h2>H2 tag - Lorem ipsum dolor sit amet</h2>
  <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
  <h3>H3 tag - Lorem ipsum dolor sit amet</h3>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
  <h4>H4 tag - Lorem ipsum dolor sit amet</h4>
  <p>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <b>Ut fringilla</b>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultricesenim. Curabitur sit amet mauris. <b>Sed non quam</b>. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. </p>
  <h5>H5 tag - Lorem ipsum dolor sit amet</h5>
  <p>Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. <b>Nulla facilisi</b>. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>

  <img src="https://dummyimage.com/600x400/000/fff">
  <p>Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. <b>Nulla facilisi</b>. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>
  <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>

  <figure>
    <img src="https://dummyimage.com/600x400/000/fff" alt="The Pulpit Rock">
    <figcaption>Figure tag and figcation</figcaption>
  </figure>

  <address>
  Address Tag by <a href="mailto:[email protected]">Jon Doe</a>.<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
  </address>

  <p>Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. <b>Nulla facilisi</b>. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. </p>

  <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody>
  </table>

  <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
  <h2>below, there is a horizontal rule tag</h2>
  <hr>
  <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>

<?php get_footer(); ?>