گاهی توی صفحات وب لازم داریم کدهای برنامه‌نویسی، دستورات سیستم یا نتیجه اجرای برنامه رو نمایش بدیم.
برای این کار HTML چند تگ مخصوص نمایش کد داره.

📌 تگ‌های اصلی برای نمایش کد

1. <code>

برای نمایش کدهای برنامه‌نویسی.

<p>کد جاوااسکریپت زیر یک پیام نمایش می‌دهد:</p>
<code>console.log("Hello World");</code>

2. <kbd>

برای نمایش ورودی کاربر از کیبورد (keyboard input).

<p>برای کپی متن کلید <kbd>Ctrl</kbd> + <kbd>C</kbd> را بزنید.</p>

3. <samp>

برای نمایش خروجی برنامه (sample output).

<p>نتیجه اجرای برنامه:</p>
<samp>Hello World</samp>

4. <pre>

برای نمایش متن یا کد با حفظ فاصله‌ها و خط‌ها.
خیلی کاربردی برای نمایش کدهای طولانی.

<pre>
function sayHello() {
    console.log("Hello World");
}
</pre>

5. ترکیب <pre> و <code>

بهترین روش برای نمایش کدهای واقعی در وب:

<pre>
<code>
function add(a, b) {
    return a + b;
}
console.log(add(5, 10));
</code>
</pre>

📌 خروجی مرورگر

👆 در مثال بالا مرورگر دقیقاً همون شکلی که کد رو نوشتی (با فاصله‌ها و خط‌ها) نمایش می‌ده.

✅ نکته

• معمولاً برای زیباتر کردن کدها از CSS یا کتابخونه‌هایی مثل PrismJS یا Highlight.js استفاده می‌کنن تا کدها رنگی بشن (Syntax Highlighting).