آموزش و یادگیری تگ code در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <code> آشنا مي‌شويم. اين تگ براي نمايش کدهاي برنامه‌نويسي در صفحات وب استفاده مي‌شود و يکي از تگ‌هاي معنايي پرکاربرد در مستندات فني و آموزش‌هاي برنامه‌نويسي است.

تگ code در HTML چيست؟

تگ <code> براي نمايش کدهاي کامپيوتري يا دستورات برنامه‌نويسي در يک صفحه وب استفاده مي‌شود. مرورگرها معمولاً متن داخل اين تگ را با فونت monospace (تک‌عرض) نمايش مي‌دهند تا از ساير متن‌ها متمايز شود.

مثال ساده از تگ code

<p>براي چاپ متن در پايتون از دستور <code>print("Hello World")</code> استفاده مي‌کنيم.</p>

در اين مثال، بخش print("Hello World") به عنوان يک قطعه کد درون متن نمايش داده مي‌شود.

نمايش کدهاي چندخطي

براي نمايش کدهاي چندخطي بهتر است از ترکيب تگ‌هاي <pre> و <code> استفاده کنيد تا قالب‌بندي (فاصله‌ها و سطرها) حفظ شود.

<pre><code>
function sayHello() {
  console.log("Hello, world!");
}
</code></pre>

در اين مثال، تگ <pre> باعث حفظ فاصله‌ها و چينش اصلي کد مي‌شود و تگ <code> محتواي کد را مشخص مي‌کند.

استايل‌دهي به code با CSS

مي‌توانيد ظاهر پيش‌فرض تگ <code> را با CSS تغيير دهيد تا خواناتر و زيباتر شود.

<style>
  code {
    background-color: #f5f5f5;
    padding: 4px 6px;
    border-radius: 4px;
    font-family: "Courier New", monospace;
    color: #e53935;
  }
</style>

<p>مثال: <code>document.getElementById("demo")</code></p>

با اين تنظيمات، قطعه‌کد شما خواناتر و شبيه به کد در محيط‌هاي ويرايشگر نمايش داده مي‌شود.

تفاوت code با samp و kbd و var

نکات مهم درباره تگ code

• تگ <code> محتواي معنايي دارد و براي سئو فني و آموزش‌هاي برنامه‌نويسي بسيار مفيد است.
• براي نمايش دقيق قالب‌بندي از <pre> در کنار آن استفاده کنيد.
• براي افزايش خوانايي، استايل‌دهي سفارشي با CSS را فراموش نکنيد.
• در صورت نياز مي‌توانيد از تگ <mark> براي برجسته کردن بخش‌هايي از کد استفاده کنيد.

براي يادگيري کامل تگ‌هاي معنايي HTML و نحوه نمايش کدها در وب، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده ديگر آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.