تگ‌های کاربردی: br (شکست خط)، hr (خط افقی) و کامنت‌گذاری

تگ‌های کاربردی: شکست خط، خط افقی و کامنت‌گذاری – جزئیات کوچک، تأثیر بزرگ! 🤏

سلام به همگی! توی این فصل می‌خوایم با سه تا از تگ‌های کوچولو ولی کاربردی در HTML آشنا بشیم که به ما کمک می‌کنن ظاهر و ساختار صفحاتمون رو بهتر کنترل کنیم. این تگ‌ها شامل شکست خط (<br>)، خط افقی (<hr>) و البته، کامنت‌گذاری (Comment) هستن.

این تگ‌ها مثل ابزارهای کمکی کوچیکی هستن که به ما اجازه می‌دن جزئیات بصری و نظم‌دهی رو راحت‌تر انجام بدیم.

۱. تگ <br> (Line Break): وقتی می‌خوایم خط عوض کنیم! ↩️

تگ <br> یه تگ خودبسته (Self-closing) هست، یعنی تگ پایان‌دهنده نداره. کارش اینه که بعد از خودش، یه شکست خط ایجاد می‌کنه. یعنی اگه توی یه پاراگراف خواستید متن رو به خط بعدی ببرید، از این تگ استفاده می‌کنید.

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

مثال:

<p>
  آدرس ما:
  <br>
  تهران، خیابان آزادی، کوچه گل‌ها، پلاک ۱۲
  <br>
  کد پستی: ۱۴۵۷۸۹۶۳۲۱
</p>

<p>
  شعر کوتاه:
  <br>
  به
  <br>
  کوی
  <br>
  می‌روم.
</p>

۲. تگ <hr> (Horizontal Rule): خط جداکننده افقی! ➖

تگ <hr> هم یه تگ خودبسته است و یه خط افقی رو بین محتوای صفحه ایجاد می‌کنه. این تگ برای جدا کردن بصری دو بخش مختلف از محتوا استفاده می‌شه و به سازماندهی بهتر صفحه کمک می‌کنه. فکر کنید مثل یه جداکننده توی دفترچه یادداشت شماست.

مثال:

<h1>معرفی محصول</h1>
<p>این محصول جدیدترین نوآوری ماست...</p>

<hr> <!-- یک خط افقی برای جدا کردن بخش معرفی از بخش مشخصات -->

<h2>مشخصات فنی</h2>
<p>پردازنده: ...</p>
<p>حافظه: ...</p>

نکته: از نظر معنایی، تگ <hr> نشون‌دهنده یه تغییر موضوعی بین محتواست. در گذشته، این تگ برای نمایش خط افقی زیاد استفاده می‌شد، اما امروزه برای ایجاد جداکننده‌های بصری، بیشتر از CSS استفاده می‌کنیم. با این حال، دونستن کاربردش مفیده.

۳. کامنت‌گذاری (Comments): یادداشت‌های خصوصی شما! ✍️

کامنت‌ها یا نظرات در HTML، بخشی از کد هستن که توسط مرورگر نادیده گرفته می‌شن و در صفحه نمایش داده نمی‌شن. از کامنت‌ها برای نوشتن توضیحات، یادداشت‌ها، یا غیرفعال کردن موقت بخشی از کد استفاده می‌شه. این کار به خودتون یا همکارانتون کمک می‌کنه که بعداً کد رو بهتر بفهمید.

نحوه نوشتن کامنت:

کافیه متن مورد نظرتون رو بین تگ <!– و –> قرار بدید.

مثال:

<!-- این یک کامنت برای توضیح بخش بعدی است -->
<h2>گالری تصاویر</h2>

<!--
  این بخش در حال تکمیل است.
  به زودی تصاویر بیشتری اضافه خواهد شد.
  کد CSS مربوط به این بخش هنوز نوشته نشده است.
-->
<div>
  <img src="image1.jpg" alt="تصویر اول">
  <img src="image2.jpg" alt="تصویر دوم">
</div>

<!-- این تگ h3 فعلاً غیرفعال شده است -->
<!-- <h3>بخش ویژه</h3> -->

کامنت‌گذاری، مثل یادداشت‌برداری در کتاب کدنویسی شماست! به خوانایی و نگهداری کدتون کمک زیادی می‌کنه.

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