Edit in JSFiddle

$(function(){
    // init checkboxes
    $('#preview .section').each(function(){
        $('#'+$(this).attr('id').replace('contents','snippet')).attr('checked',$(this).is(':visible'));
    });
    
    $('input').change(function(){
        toggleSection($(this));
    });
    
    updateOutput();
});

function toggleSection(_obj) {
    if ($(_obj).attr('checked')) {
        $('#'+$(_obj).attr('id').replace('snippet','contents')).show();
    } else {
        $('#'+$(_obj).attr('id').replace('snippet','contents')).hide();
    }
    
    updateOutput();
}

function updateOutput(){
    var output = $('#htmlHeaders').text();
    $('#preview .section:visible').each(function(){
        output += $(this).html();
    });
    output += $('#htmlFooters').text();
    $('#output').text(output);
}

<ul>
    <li><textarea id="htmlHeaders" style="height: 5em; width: 100%;">
&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;

&lt;title&gt;&lt;/title&gt; 
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/html5kit/style.css&quot;&gt;
&lt;/head&gt;
    &lt;body&gt;
        </textarea></li>
    <li><input type="checkbox" id="snippet-header"><label for="snippet-header">header</label></li>
    <li><input type="checkbox" id="snippet-one"><label for="snippet-one">one</label></li>
    <li><input type="checkbox" id="snippet-two"><label for="snippet-two">two</label></li>
    <li><input type="checkbox" id="snippet-three"><label for="snippet-three">three</label></li>
    <li><input type="checkbox" id="snippet-footer"><label for="snippet-footer">footer</label></li>
    <li><textarea id="htmlFooters" style="height: 5em; width: 100%;">    &lt;/body&gt;
&lt;/html&gt;
        </textarea></li>
</ul>
<div id="left">
    <div id="preview">
        <div id="contents-header" class="section">
            <h1>Header</h1>
        </div>
        <div id="contents-one" class="section">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat imperdiet ante ac condimentum. Aenean consectetur ligula sapien. Sed vulputate consectetur orci a tristique. Donec condimentum rhoncus condimentum. Suspendisse eget velit libero, posuere tincidunt turpis. In vestibulum justo nec augue facilisis eget pretium diam mattis. Aliquam interdum odio quis lectus pellentesque vulputate porttitor eros tempus. Nullam semper viverra sollicitudin. Nulla orci dolor, varius eget consequat consequat, sollicitudin sed urna. Maecenas porta volutpat nibh non viverra.</p>
            <p>Nullam sit amet mauris sem, et posuere elit. Suspendisse potenti. Proin tempor metus quis felis congue tempus pretium justo condimentum. Phasellus ornare suscipit dolor non laoreet. Aenean quis sem tortor, sed ullamcorper purus. Maecenas quis dapibus ipsum. Nullam a orci non nisl placerat tempor consequat id mauris. Integer at orci et lacus tincidunt pretium ornare eu nibh. Cras hendrerit, risus ut pulvinar lacinia, ipsum arcu dignissim odio, nec auctor arcu est ultricies tortor. Fusce sit amet viverra enim. Nullam leo mauris, sodales et sagittis at, auctor feugiat leo.</p>
        </div>
        <div id="contents-two" class="section">
            <img src="http://placekitten.com/500/300" style="width: 200px; height: 100px;">
        </div>
        <div id="contents-three" class="section">
            <table>
                <tr>
                    <th>a</th>
                    <th>b</th>
                    <th>c</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>0</td>
                    <td>#</td>
                </tr>
            </table>    
        </div>
        <div id="contents-footer" class="section">
            <small>&copy; 2012 @davechiu</small>
        </div>
    </div>
</div>
<div id="right">
    <pre id="output"></pre>
</div>

body { padding: 1em; }
ul {
    border: 1px solid #666;
}
ul li {
    padding: 5px;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #999;
}
label { padding-left: .5em; }

#left, #right {
    width: 48%;
    border: 1px solid #666;
    display: inline-block;
    margin-top: 1em;
    vertical-align: top;
}
#right {
    margin-left: 1em;
}
#preview, #output {
    padding: 1em;
    border: 1px solid #999;
}
#output {
    overflow: scroll;
}
#preview h1 {
    margin-top: 1em;
    margin-bottom: .5em;
    font-size: 2em;
    font-weight: bolder;
}
#preview p {
    margin: .75em 0;
    line-height: 1.4;
}
#preview table {
    border: 1px solid #999;
}
#preview table td,
#preview table th {
    border: 1px solid #CCC;
    padding: 5px 10px;
}