آموزش و يادگيري تگ pre در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <pre> آشنا مي‌شويم. اين تگ براي نمايش متن با فرمت‌بندي اوليه (مثل فاصله‌ها و خطوط جديد) استفاده مي‌شود و اغلب براي کدهاي برنامه‌نويسي يا متن‌هايي با ساختار خاص کاربرد دارد.

تگ pre در HTML چيست؟

تگ <pre> متني که داخل آن قرار دارد را دقيقاً همان‌طور که نوشته شده است، نمايش مي‌دهد. اين يعني فضاها، خطوط جديد و تورفتگي‌ها حفظ مي‌شوند و مرورگر آن‌ها را تغيير نمي‌دهد.

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

<pre>
اين يک متن با
فاصله‌ها و خطوط
اصلي خود است.
</pre>

در اين مثال، متن همان‌طور که در کد نوشته شده است، با فواصل و خطوط جديد نمايش داده مي‌شود.

استفاده از pre براي نمايش کد

<pre>
<html>
  <head></head>
  <body>
    <p>سلام دنيا!</p>
  </body>
</html>
</pre>

اين روش براي نمايش نمونه‌هاي کد در صفحات آموزشي يا مستندات بسيار مفيد است.

ويژگي‌هاي مهم تگ pre

ويژگي	توضيح
class / id	براي اعمال استايل CSS سفارشي
style	براي تغيير ظاهر متن، رنگ، فونت و ...

مثال با CSS

<style>
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}
</style>

<pre>
function greet() {
  console.log("سلام دنيا!");
}
</pre>

در اين مثال، با CSS، پيش‌زمينه خاکستري و گوشه‌هاي گرد براي بلوک کد ايجاد شده است و اسکرول افقي در صورت نياز فعال مي‌شود.