جلسه بیست و ششم: آموزش کامل تگ pre در HTML

نگه‌داشتن فاصله‌ها، نظم و ساختار دقیق متن، مثل یه حرفه‌ای! به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! توی این جلسه از سری آموزش‌های آوای وب، قراره با تگ خفنی آشنا بشی که کارش حفظ دقت، نظم و ظاهر اصلی متنه: تگ <pre>! اگه می‌خوای کدی رو طوری نشون بدی که دقیقاً مثل همونی باشه که نوشتی، یا مثلاً فاصله‌ها و خطوط یه شعر یا خروجی ترمینال رو همون‌جور که هست نشون بدی، تگ <pre> انتخاب توئه.

🏷️ تگ pre چیه و دقیقاً چی‌کار می‌کنه؟

تگ <pre> که مخفف Preformatted Text هست، تو HTML برای نمایش متن‌هایی به کار می‌ره که قالب‌بندیشون مهمه. یعنی چی؟ یعنی فضاهای خالی، تب‌ها (Tab)، و خطوط جدید همون‌طور که تو کد HTML نوشتی، بدون تغییر نمایش داده می‌شن.

چرا مهمه؟

چون گاهی نظم متن همه‌چیزه! مثلاً توی این موارد:

• نمایش کدهای برنامه‌نویسی
• خروجی‌های خط فرمان یا ترمینال
• شعر یا متون با ساختار خاص
• جداول ساده متنی

🧱 ساختار کلی تگ <pre>

استفاده از تگ <pre> خیلی ساده‌ست. فقط متنت رو بینش بذار:

<pre>
خط اول
   خط دوم با فاصله
خط سوم
</pre>

نمایش این کد در مرورگر دقیقاً با همین فاصله‌ها و چینش خواهد بود.

✨ ویژگی‌های مهم تگ pre

🌟 ترکیب تگ pre با تگ‌های دیگه (مثل یک حرفه‌ای!)

بیشترین استفاده‌ی <pre> تو نمایش کدهای برنامه‌نویسیه. برای این کار، معمولاً با تگ <code> ترکیب می‌شه:

<pre>
 <code>
   <p>این یک پاراگراف است.</p>
 </code>
</pre>

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

💡 چه زمانی از pre استفاده کنیم؟

• وقتی می‌خوای کد برنامه‌نویسی رو نشون بدی.
• برای خروجی دستورات ترمینال یا CLI.
• نمایش شعرها با فاصله و چینش دقیق.

🚀 نکات سئویی و دسترسی‌پذیری

استفاده از تگ <pre> به تنهایی باعث معجزه در سئو نمی‌شه، ولی:

• به درک معنای محتوا توسط خزنده‌های گوگل کمک می‌کنه.
• برای صفحه‌خوان‌ها (مثلاً برای نابینایان)، ساختار قابل درکی از محتوا فراهم می‌کنه.
• اگه کدت رو با <code> هم ترکیب کنی، سئوی تخصصی‌تر و هدفمندتری می‌گیری.

📝 پروژه عملی: ترکیب شعر و کد

می‌خوایم یه صفحه وب بسازیم که توش یه شعر سنتی فارسی با حفظ دقیق فاصله‌ها و قالب اصلی نمایش داده بشه، و بعدش یه قطعه کد HTML مربوط به ساختار همون شعر (مثلاً داخل <blockquote>) نشون داده بشه. در ضمن یادت نره اگه مبتدی هستی کد هات رو تو  W3C Validator می‌تونی چک کنی و ببینی درست نوشتی یا نه.

🏁 نتیجه‌گیری

تگ <pre> یکی از پایه‌های اصلی نمایش درست و دقیق متنه. اگه می‌خوای چیزی رو همون‌طور که هست، با تمام فاصله‌ها، خطوط و نظم خاصش نشون بدی، این تگ انتخاب اولته.
از نمایش کدها تا خروجی‌های خط فرمان، شعر، جدول و خیلی چیزای دیگه، این تگ همیشه همراهته.

✨ استفاده از <pre> رو تو پروژه‌هات جدی بگیر، چون تجربه کاربری و حرفه‌ای بودن سایتت رو چند سطح بالا می‌بره.

💬 ایده‌هات رو فریاد بزن!

نظرت راجع به تگ <pre> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سؤالی داری؟ تو بخش نظرات برامون بنویس، تیم حرفه‌ای آوای وب با جون و دل جوابت رو می‌ده!

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.