Standard HTML elements for styling with CSS
2009 March 2
I use the following code to demonstrate what the content of a web site is going to look like. This goes over the typical HTML elements within a page, you might need to add more for your specific site but this should get you started. This code can also be used as a demo to a designer on what styles you need made within the design file before it starts development.
<h1>The H1 tag looks like this</h1> <p>The paragraph after an H1 looks like this</p> <h2>The H2 tag looks like this</h2> <p>The paragraph after an H2 looks like this</p> <h3>The H3 tag looks like this</h3> <p>The paragraph after an H3 looks like this</p> <h4>The H4 tag looks like this</h4> <p>The paragraph after an H4 looks like this</p> <h5>The H5 tag looks like this</h5> <p>The paragraph after an H5 looks like this</p> <ol> <li>This is a normal list element in an ordered list</li> <li><strong>This is a strong element in an ordered list</strong></li> <li><em>This is an italic element in an ordered list</em></li> </ol> <ul> <li>This is a normal list element in an ordered list</li> <li><strong>This is a strong element in an ordered list</strong></li> <li><em>This is an italic element in an ordered list</em></li> </ul> <blockquote>A blockquote looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. </blockquote> <code> A code looks like this. Nullam nec dolor. In, A code looks like this. Nullam nec dolor. In </code> <span> This is what a span tag looks like </span> <a href="">A basic link </a> <p> A long paragraph. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. <a href="">A link in the middle of a paragraph</a> Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl. </p> <p> Another long paragraph stacked below the one above. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl. </p>
No comments yet
