بخش دیگری از آموزش طراحی سایت و آموزش html مربوط به قالب‌بندی کد کامپیوتر در HTML است. به طور معمول html در طراحی سایت از اندازه حروف و فاصله‌های متغیر استفاده می‌کند. عناصر <kbd> و <samp> و <code> تماما از اندازه حروف و فواصل ثابت پشتیبانی می‌کنند.

از تگ <kbd> برای تعریف ورودی صفحه کلید استفاده می‌کنیم. در طراحی سایت از عنصر <samp> در html برای بیان نمونه‌ای از خروجی برای یک برنامه کامپیوتر به کار می‌رود. تگ <code> نیز در طراحی سایت با html، بیانگر یک قطعه از کد برنامه نویسی است.
<samp>

demo.example.com login: Apr 12 09:10:17

Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

</samp>

<code>

var x = 5;

var y = 6;

document.getElementById("demo").innerHTML = x + y;

</code>


توجه داشته باشید که تگ <code> در طراحی سایت، فضای سفید اضافی و شکست‌های خط را حفظ نمی‌کند. برای تثبیت این‌ها شما می‌توانید تگ <code> را در داخل یک تگ <pre> قرار دهید. <pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>

عنصر <var> نیز در طراحی سایت معرف متغیرها است. یک متغیر می‌تواند یک متغیر در عبارت ریاضی باشد و یا یک متغیر در زمینه برنامه‌نویسی. Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>