نمایش کد و متن فنی در صفحه
وقتی صفحهای دربارهی برنامهنویسی یا مستندات فنی مینویسید، HTML چند عنصر معنایی مخصوص همین منظور دارد که نشان میدهند بخشی از متن، کد یا خروجی برنامه است؛ نه یک جملهی معمولی.
code — قطعه کد
برای نمایش یک قطعه کد کوتاه در وسط متن، از <code> استفاده میشود. مرورگر معمولاً این عنصر را با یک فونت تکعرض (Monospace) نمایش میدهد.
code-tag.html
<p>برای چاپ متن در پایتون از <code>print()</code> استفاده کنید.</p>
pre — حفظ فاصلهها و خطوط
برخلاف رفتار عادی HTML که فاصلهها و خطوط جدید را نادیده میگیرد، عنصر <pre> دقیقاً همان فاصلهگذاری و شکست خط نوشتهشده در کد را حفظ میکند؛ بسیار مناسب برای نمایش بلوکهای چندخطی کد.
pre-tag.html
<pre> function greet() { console.log("سلام دنیا"); } </pre>
kbd — ورودی صفحهکلید
برای نشان دادن دکمهای که کاربر باید فشار دهد استفاده میشود؛ مثلاً در راهنمای میانبرهای صفحهکلید.
kbd-tag.html
<p>برای ذخیره، کلیدهای <kbd>Ctrl</kbd> + <kbd>S</kbd> را بزنید.</p>
samp و var
<samp> برای نمایش خروجی یک برنامه یا سیستم، و <var> برای نشان دادن یک متغیر در یک فرمول یا قطعه کد استفاده میشود.
samp-var.html
<p>خروجی برنامه: <samp>File not found</samp></p> <p>فرمول مساحت: <var>a</var> × <var>b</var></p>
نکته: ترکیب رایج
<pre><code>...</code></pre> برای نمایش بلوکهای کد چندخطی با فونت تکعرض و حفظ کامل فاصلهگذاری، در بسیاری از سایتهای مستندات فنی دیده میشود.