CodePen

HTML

            
              <article>
  
<h1>Title of Your Article</h1>

<p class="time">
  Published
  <time datetime="2013-06-13">
    June 13, 2013
  </time>
  by Guest Author
</p>

<em class="explanation">This top paragraph is where I introduce you and explain how this guest post came about. I will write it, but you can provide links that you want used. It's an `<em>` for various syndication reasons.</em>
  
This is <em>your</em> intro paragraph. This is where you explain briefly what this article is going to be about. Hopefully it's quite enticing and interesting.

<strong>Note</strong> that there are no `<p>` tags around these paragraphs. I publish in WordPress and use their auto-p functionality. Not a big deal, just easier if you don't use them. So here on CodePen, we're using Markdown which automatically does that. <strong>Don't use Markdown for anything else though.</strong> While I love it, I don't use it while publishing articles on CSS-Tricks (legacy reasons).

<strong>Also note</strong> there are no super hard-and-fast rules for post formatting. If you want to do something usual or fancy or whatever, I'm typically down.

<h3>Subheads are &lt;h3> tags</h3>

They probably should be `<h2>` tags but again for legacy reasons they are not. h3's have a bunch of margin above them to set them apart.

Breaking articles into sections is a good idea. It just flows better and is easier to scan.

You can use `<strong>`, `<b>`, `<em>`, and `<i>` as needed, but don't nest them as I don't load the bold-and-italic version of my body font for performance reasons.

<h4>Sub-subheads</h4>

Sub-sections using `<h4>` tags. Like if you were going going to make a section all about the font property and then sub-heads for each of the sub-properties. Sub-sections should be related to the larger section they are a part of.

<h4>Another sub-subhead</h4>

These don't have as much space above or below them as the h3's.

<h3>The HTML (Example Section Title)</h3>

A common thing when demonstrating a front end technique is to break into sections by language.

<pre rel="HTML"><code markup="tt" class="language-markup"><div>
<h3 class="title">Example Code</h3>
<ul>
  <li>This</li>
  <li>Little</li>
  <li>Piggy</li>
</ul>
</div>

Don't worry about & ampersands.</code></pre>

Things to note about posting code blocks:

<ul>
 <li>Do not escape HTML</li>
 <li>Don't worry about & ampersands. They will show up encoded in this preview but not in the article.</li>
 <li>Use two spaces for indenting</li>
 <li>HTML uses &lt;pre rel="HTML">&lt;code markup="tt" class="language-markup"></li>
 <li>CSS uses &lt;pre rel="CSS">&lt;code class="language-css"></li>
 <li>JS uses &lt;pre rel="jQuery">&lt;code class="language-javascript"></li>
 <li>For any JS library, replace the rel="" with that library name, like "jQuery"</li>
 <li>No extra lines at top or bottom of the code block</li>
</ul>
  
Use `backticks` for inline code. That way you won't have to escape them.

<h3>The CSS (Example Header)</h3>

Block quotes are like this:

<blockquote>To live is to love or something.</blockquote>

You don't need paragraph tags inside blockquotes unless they are more than one paragraph. Then put paragraph tags around both.

<blockquote><p>This is the first paragraph of a multi-paragraph quote.</p>
<p>And this is the second.</p></blockquote>

<pre rel="CSS"><code class="language-css">.selector {
  property: value;
}</code></pre>

<h3>The JavaScript (...just another example)</h3>

<ul>
  <li>Oh by the way you can nest lists if you need to.
    <ol>
     <li>Itty</li>
     <li>Bitty</li>
     <li>Titty</li>
    </ol>
  </li>
  <li>They can be of any type.</li>
</ul>

<pre rel="jQuery"><code class="language-javascript">$("pre code").each(function() {
 var content = $(this).html();
 $(this).text(content);
});</code></pre>

yadda yadda yadda.

<h3>On Images</h3>

I host all images in articles right on the CSS-Tricks CDN. Link them up however you need to temporarily and I'll upload them.

If the image blending into white makes sense  (<a href="http://css-tricks.com/poll-results-mobile-web-design-responsibility/">example</a>) then just use an `<img>`.

Otherwise, mark it up in a `<figure>` tag which gives it a frame and sets it apart. This is the standard.

<figure>
  <img src="http://s.cdpn.io/3/star.png" />
  <figcaption>This is a star.</figcaption>
</figure>

Use `<figcaption>` tags within the `<figure>` to write captions if needed.

Images will never scale up, but if they are wider than the column, they will scale down.

<h3>Embedded Pens are A+</h3>

Use `data-theme-id='1'`.

<p data-height="257" data-theme-id="1" data-slug-hash="Hafmz" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/Hafmz/'>Guest Post on CSS-Tricks</a> by Chris Coyier (<a href='http://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

<h3>Here's a table</h3>

<table>
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
  <tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

</article>
            
          
!
via HTML Inspector

CSS

            
              body {
  background: url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png);
}

article {
  background: white;
  border: 20px solid #D6D5D5;
  padding: 40px;
  width: 80%;
  max-width: 700px;
  margin: 20px auto;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // HTML in article should just be HTML, not escaped
// CSS-Tricks doesn't do it exactly this way, but close enough.
$("pre code").each(function() {
   var content = $(this).html();
   $(this).text(content);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................