HTML Filler Text

As a Web Designer you have to get a general idea about how a page/site is going to look like before the customer has given you the final website content. add to this the need to style the content with CSS we need somthing to style. I have put together a selection of common HTML tags or HTML Filler text that should give you a good starting point.

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

<h5>Ordered List</h5>
<ol>
<li>Option 1</li>
<li>Option 2</li>
<li>option 3</li>
</ol>
<br />
<h5>Unordered List</h5>

<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>option 3</li>
</ul>
<br />
<h5>Unordered List With Links</h5>

<ul>
<li><a href=”#”>Option 1</a></li>
<li><a href=”#”>Option 2</a></li>
<li><a href=”#”>Option 3</a></li>
</ul>

<p>This is a paragraph Lorem ipsum dolor sit amet, recipe consectetur adipiscing elit. Pellentesque blandit, nulla a dignissim vestibulum,
elit erat aliquet nulla, sit amet dignissim felis purus nec magna. Nulla non
imperdiet arcu. Sed consequat auctor pulvinar. Aliquam viverra molestie nulla sit amet elementum. Vivamus consequat pellentesque
libero, eget consectetur ante elementum in. Aliquam ultrices eros quis magna ullamcorper suscipit. Cras ornare leo ut dolor interdum
vitae lacinia est euismod. Fusce molestie velit quis justo lacinia faucibus. Aliquam erat volutpat. Donec ornare scelerisque tristique.
Cras at posuere lectus. Ut interdum metus eget orci tempus hendrerit. Phasellus malesuada tellus eu diam aliquam sed tincidunt nisl
endrerit. Cras mattis placerat nisi, ut tempus dolor lobortis eu. Nam consectetur turpis id risus dignissim vitae ultricies diam
ultricies. Duis consectetur nulla nec tortor mollis quis malesuada nisl rutrum. Phasellus id velit nibh, eu adipiscing elit. Sed
lobortis consequat mollis.</p>

<p>This is a paragraph Quisque nisl turpis, rhoncus ut vulputate in, semper sit amet dui. Etiam nisi sapien, sagittis id luctus non,
suscipit ut libero. Phasellus et massa ut magna pretium aliquam in sed lectus. Mauris placerat molestie tortor vitae tempus. Donec
faucibus, dui dictum euismod interdum, nisi augue venenatis arcu, quis bibendum nisi risus quis mi. Pellentesque ornare, felis
pretium elementum hendrerit, odio lacus vehicula nisl, eu gravida nulla arcu in tellus. Nulla tincidunt posuere metus eu
scelerisque. Fusce quis neque et ligula consequat sodales. Nunc ultricies imperdiet mauris quis scelerisque. Aenean gravida magna
eget nibh euismod semper. </p>

<p>This is a paragraph Quisque nisl turpis, rhoncus ut vulputate in, semper sit amet dui. Etiam nisi sapien, sagittis id luctus non,
suscipit ut libero. Phasellus et massa ut magna pretium aliquam in sed lectus. Mauris placerat molestie tortor vitae tempus. Donec
faucibus, dui dictum euismod interdum, nisi augue venenatis arcu, quis bibendum nisi risus quis mi. Pellentesque ornare, felis
pretium elementum hendrerit, odio lacus vehicula nisl, eu gravida nulla arcu in tellus. Nulla tincidunt posuere metus eu
scelerisque. Fusce quis neque et ligula consequat sodales. Nunc ultricies imperdiet mauris quis scelerisque. Aenean gravida magna
eget nibh euismod semper. </p>

<h5>Image</h5>

<img src=”http://webmojo.co.uk/wp-content/uploads/2010/08/logo.png” alt=””>

<h5>Image With Link</h5>

<a href=”http://webmojo.co.uk/” title=”Web Design Doncaster”><img src=”http://webmojo.co.uk/wp-content/uploads/2010/08/logo.png” alt=””></a>

<h5>Image start of paragraph</h5>

<p><img src=”http://webmojo.co.uk/wp-content/uploads/2010/08/logo.png” alt=””> This is a paragraph Quisque nisl turpis, rhoncus ut vulputate in, semper sit amet dui. Etiam nisi sapien, sagittis id luctus non,
suscipit ut libero. Phasellus et massa ut magna pretium aliquam in sed lectus. Mauris placerat molestie tortor vitae tempus. Donec
faucibus, dui dictum euismod interdum, nisi augue venenatis arcu, quis bibendum nisi risus quis mi. Pellentesque ornare, felis
pretium elementum hendrerit, odio lacus vehicula nisl, eu gravida nulla arcu in tellus. Nulla tincidunt posuere metus eu
scelerisque. Fusce quis neque et ligula consequat sodales. Nunc ultricies imperdiet mauris quis scelerisque. Aenean gravida magna
eget nibh euismod semper. </p>

<h5>Forms</h5>

<form action=”” method=”post” >

<legend>Contact Form</legend>
<p>Your Name (required)<br />

<input type=”text” name=”your-name” value=””  size=”40″ /></p>
<p>Your Email (required)<br />
<input type=”text” name=”your-email” value=”” size=”40″ /></span> </p>
<p>Your Message<br />
<span ><textarea name=”your-message” cols=”40″ rows=”5″></textarea></span> </p>
<p>Radio Button Single<br />
<span><input type=”radio” name=”radio_buttons” value=”1″></span></p>

<p>Radio Button Selection<br />
<optgroup label=”options”>
<span>option 1 <input type=”radio” name=”radio_buttons” value=”1″></span><br />
<span>option 2 <input type=”radio” name=”radio_buttons” value=”2″></span><br />
<span>option 3 <input type=”radio” name=”radio_buttons” value=”3″></span><br />
<span>option 4 <input type=”radio” name=”radio_buttons” value=”4″></span><br />
</optgroup></p>

<p>Dropdown Menu<br />
<select name=”dropdown” size=”1″>
<option value=”1″ label=”option 1″>Option 1</option>
<option value=”1″ label=”option 2″>Option 2</option>
<option value=”1″ label=”option 3″>Option 3</option>
<option value=”1″ label=”option 4″>Option 4</option>
</select></p>

<p>Submit Button Image <br />
<input type=”image” src=”http://webmojo.co.uk/wp-content/uploads/2011/04/submit.png” height=”30″ width=”46″ border=”0″ alt=”Submit”></p>
<p>Submit Button Standard<br />
<input type=”submit” name=”Submit” value=”Submit”></p>
</form>

Leave a Reply

Your email address will not be published. Required fields are marked *