Dummy Content for CSS and HTML Mockups

Home/Dummy Content for CSS and HTML Mockups

With any web design project it’s always good to have a page where all the necessary content elements are shown to ensure they’re in perfect working order for the rest of your site.

I’ve lost track of the amount of times I have done this manually, so with that in mind here’s the code containing the main HTML/CSS dummy components.

Why didn’t I think of this earlier?  Feel free to copy and paste the text to your own web page mockups and designs.
 

Web Design Text Elements Sample

<h1>Heading One</h1>
<p>
 No sir, I'm gonna make something out of myself, I'm going to night school and one day I'm gonna be somebody. Oh, I've been so worried about you ever since you ran off the other night. Are you okay? I'm sorry I have to go. Isn't he a dream boat? She's just trying to keep you respectable. Doc, you don't just walk into a store and ask for plutonium. Did you rip this off? Marty, such a nice name.
</p>
<h2>Heading Two</h2>
<p>
 Doc, Doc, it's me, Marty. Who's are these? I got enough practical jokes for one evening. Good night, future boy. His head's gone, it's like it's been erased. George, there's nothing to be scared of. All it takes is a little self confidence. You know, if you put your mind to it, you could accomplish anything.
</p>
<h3>Heading Three</h3>
<p>
 Well, they're your parents, you must know them. What are their common interests, what do they like to do together? I followed you. Ah. Whoa. Just turn around, McFly, and walk away. Are you deaf, McFly? Close the door and beat it. Right.
</p>
<h4>Heading Four</h4>
<p>
 On the night I go back in time, you get- Doc. Whoa, whoa, kid, kid, stop, stop, stop, stop. You know what I do in those situations? Uh, you mean nobody's asked you? George. George.
</p>
<h5>Heading Five</h5>
<p>
 I have to tell you about the future. Nothing. Good, you could start by sweeping the floor. Are those my clocks I hear? Radiation suit, of course, cause all of the fall out from the atomic wars. This is truly amazing, a portable television studio. No wonder your president has to be an actor, he's gotta look good on television.
</p>
<h6>Heading Six</h6>
<p>
 Ah. One point twenty-one gigawatts. One point twenty-one gigawatts. Great Scott. What, I don't get what happened. You do? I don't know, Doc, I guess she felt sorry for him cause her did hit him with the car, hit me with the car.
</p>
<hr>
<p>
 <em>This is italic text, made with em.</em> <i>This is italic text as well, made with i.</i>
</p>
<p>
 <strong>This is bold text, made with strong.</strong> <b>This is bold text, made with b.</b>
</p>
<p>
 <u>This is underlined text, made with u.</u> <ins>This is inserted text, made with ins.</ins>
</p>
<p>
 <strike>This is deleted (strikethrough) text, made with strike.</strike> <s>This is also strikethrough text, but made with s.</s> <del>This is deleted text, made with del.</del>
</p>
<p>
 <code>This is computer code, made with code.</code> <tt>This is teletype text, made with tt.</tt>
</p>
<p>
 <kbd>This is text the user is supposed to enter in, or keyboard, made with kbd.</kbd> <var>This is a variable, made with var.</var> <samp>This is sample program output, made with samp.</samp>
</p>
<p>
 <small>This is small text, made with small.</small> <big>This is big text, made with big.</big>
</p>
<p>
 <cite>This is a citation, made with cite.</cite> This is a <q>short quotation</q> in the middle of a sentence, made with q.
</p>
<p>
 This sentence ends with a <sup>superscript</sup>. This sentence ends with a <sub>subscript</sub>.
</p>
<p>
 This is an abbreviation, made with abbr: <abbr>WWW</abbr>. This is an acronym, made with acronym: <acronym>NATO</acronym>. This is a term that needs a definition, made with dfn: <dfn>Yog-Sothoth</dfn>.
</p>
<p>
 This is an unordered list:
</p>
<ul>
 <li>Doc</li>
 <li>Marty</li>
 <li>Jennifer</li>
</ul>
<p>
 This is an ordered list:
</p>
<ol>
 <li>Biff</li>
 <li>George</li>
 <li>Lorraine</li>
</ol>
<p>
 This is a definition list:
</p>
<dl>
 <dt>Definition Term</dt>
 <dd>Definition data defining the previous term</dd>
 <dt>Another Definition Term</dt>
 <dd>Definition data defining the previous term</dd>
</dl>
<p>
 This is an address with breaks:
</p>
<address>
 Marty McFly<br />
 9303 Lyon Drive,<br />
 Hill Valley, CA<br />
</address>
<p>
 This is a long quotation inside a blockquote:
</p>
<blockquote>
 <p>
 “Maybe you were adopted. Oh, what I meant to day was- Evening, Doctor Brown, what's with the wire? Science Fiction Theater. Don't worry, I'll take care of the lightning, you take care of your pop. By the way, what happened today, did he ask her out?” ~ Doc Brown
 </p>
</blockquote>
<p>
 This is pre-formatted:
</p>
<pre>
Start in column one.
 Then indent to column ten.
 Then back five spaces.
</pre>
<p>
 Here's a table with a border, a caption, colgroups, cols, thead, tfoot, & tbody:
</p>
<table border="1">
 <caption>This is a table caption, made with caption</caption>
 <colgroup span="2">
 <col>
 <col>
 </colgroup>
 <colgroup></colgroup>
 <thead>
 <tr>
 <th>Table Header 1</th>
 <th>Table Header 2</th>
 <th>Table Header 3</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td>Table Footer 1</td>
 <td>Table Footer 2</td>
 <td>Table Footer 3</td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <td>TD 1.1</td>
 <td>TD 1.2</td>
 <td>TD 1.3</td>
 </tr>
 <tr>
 <td>TD 2.1</td>
 <td>TD 2.2</td>
 <td>TD 2.3</td>
 </tr>
 <tr>
 <td>TD 3.1</td>
 <td>TD 3.2</td>
 <td>TD 3.3</td>
 </tr>
 </tbody>
</table>
2017-05-19T15:48:04+00:00 November 8th, 2016|CSS Tricks, Web Design|0 Comments

About the Author:

Warren Chandler is a freelance web programmer and web developer, based in Frinton on Sea, Essex. Warren specialises in web programming, web design, corporate identity, copy writing, SEO, logo and print media for home, work, and mobile platforms.

Leave A Comment