جلسه بیست و هفتم: آمورش کامل تگ code در HTML
به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! اینجا قراره تگ code رو مثل یه حرفه‌ای بترکونی. این تگ برای نمایش کدهای برنامه‌نویسیه! با code می‌تونی دستورات یا هر کدی که نوشتی رو تو وب به کاربرات نشون بدی، تجربه‌شون رو بهتر کنی، و گوگل رو عاشق محتوات کنی. تو این مقاله، از صفر تا صد تگ code رو با مثالای باحال، نکات خفن، و ترفندهای سئو یاد می‌گیری آماده‌ای که کدنویسی‌ات رو بترکونی؟ بزن بریم!
آنچه در این مقاله می‌خوانید :
🏷️ تگ code چیه و چه کاربردی داره؟
تگ <code> یک تگ معنایی (semantic) در HTML هست که برای نمایش کدهای برنامه‌نویسی، دستورات و توابع استفاده می‌شه.
این تگ به مرورگر می‌گه: «این متن، یک قطعه کده!»
✏️ مثلاً:
<p>برای چاپ در کنسول از <code>console.log()</code> استفاده می‌کنیم.</p>
ساختار تگ code ساده و تمیز
تگ <code> یه تگ جفتیه. یعنی باید باز و بسته بشه:
<code><html lang="fa"></html></code>اما اگه بخوای چند خط کد رو نشون بدی و فاصله‌ها و خط‌ها رو حفظ کنی، ترکیبش با <pre> واجبه:
<pre><code>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
</code></pre>🔍 چرا این ترکیب مهمه؟
چون <pre> باعث می‌شه قالب‌بندی (مثل فاصله‌ها و اینتر) همون‌طور که هست، نمایش داده بشه.
💡 تفاوت تگ <code> با تگ‌های مشابه
| تگ | کاربرد |
|---|---|
<code> | برای نمایش کد برنامه‌نویسی |
<pre> | برای حفظ قالب‌بندی متن (مخصوص کدهای چندخطی) |
<kbd> | برای نمایش کلیدهای ورودی مثل <kbd>Ctrl</kbd> |
<samp> | برای نمایش خروجی برنامه‌ها مثل <samp>Hello</samp> |
<var> | برای نمایش متغیرها، معمولاً داخل فرمول‌ها |
❗ نکته: برای نشون دادن یه کد چندخطی، معمولاً از ترکیب
<pre><code>استفاده می‌شه، نه فقط<code>.
🌟 نکات مهم برای سئو و دسترس‌پذیری
- این تگ چون معناییه، برای موتورهای جستجو مشخص می‌کنه این متن کده.
- باعث بهبود خوانایی برای کاربرهای فنی می‌شه.
- صفحه‌خوان‌ها هم راحت‌تر درک می‌کنن این متن مربوط به کده.
پروژه عملی: ساخت جعبه نمایش کد در یک صفحه HTML
حالا وقتشه خودت دست به کار شی! یه پروژه کوچیک برات داریم، چند تا از تگ‌های HTML که تا الان توی دوره یاد گرفتی رو داخل تگ <code> بذار و توی یک صفحه نمایش بده.
🏁 جمع‌بندی: حرفه‌ای کد بزن!
تگ <code> یکی از ساده‌ترین و در عین حال مفیدترین تگ‌های HTML برای نشون دادن دستورات برنامه‌نویسیه. با استفاده درست ازش:
- تجربه کاربرات بهتر می‌شه
- سئوی صفحه‌ات حرفه‌ای‌تر می‌شه
- صفحه‌خوان‌ها راحت‌تر کار می‌کنن
- سایتت یه قدم دیگه به استاندارد جهانی نزدیک می‌شه
یادت نره تمرین کنی. همین حالا یه فایل HTML باز کن و یه کد داخل <code> بذار ساده، حرفه‌ای، و شفاف! در ضمن یادت نره اگه مبتدی هستی کد هات رو تو W3C Validator می‌تونی چک کنی و ببینی درست نوشتی یا نه.
💬 ایده‌هات رو فریاد بزن:
نظرت راجب تگ code چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی داری؟ تو نظرات برامون بگو تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!
شهرام نجفی
همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.
برای نوشتن دیدگاه باید وارد بشوید.