<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
            <span class="token selector">#outer</span> <span class="token punctuation">{</span>
                <span class="token property">border</span><span class="token punctuation">:</span> solid 1px black<span class="token punctuation">;</span>
                <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">#outer</span> <span class="token punctuation">{</span>
                <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 1fr<span class="token punctuation">;</span>
                <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 64px 1fr<span class="token punctuation">;</span>
                <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'header header'</span>
                                        <span class="token string">'nav content'</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">header</span> <span class="token punctuation">{</span>
                <span class="token property">border</span><span class="token punctuation">:</span> dashed 4px red<span class="token punctuation">;</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">nav</span> <span class="token punctuation">{</span>
                <span class="token property">border</span><span class="token punctuation">:</span> dashed 4px blue<span class="token punctuation">;</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">main</span> <span class="token punctuation">{</span>
                <span class="token property">border</span><span class="token punctuation">:</span> dashed 4px green<span class="token punctuation">;</span>
                <span class="token property">grid-area</span><span class="token punctuation">:</span> content<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>This is my header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>This is my sidebar<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">></span></span>This is my content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>