Syntax ها در HTML

Syntax ها در HTML قوانین و قراردادهایی هستند که نحوه استفاده صحیح از زبان نشانه گذاری HTML را تعریف و تعیین می‌کنند؛ برای استفاده کامل و بدون نقص از HTML قطعاً باید این نکات را رعایت کنید تا بتوانید طبق استاندارد جهانی کار طراحی سایت را انجام دهید.

مبانی Syntax ها در HTML

در ادامه این مقاله نحو، قواعد و ساختاری (Syntax) که برای نوشتن کدهای HTML باید رعایت شوند را بررسی می‌کنیم.

تگ‌ها (Tags)

اولین و مهم‌ترین نکته در ساختار زبان HTML استفاده درست از عناصر یا تگ‌هاست؛ در HTML هر تگ با یک علامت کوچک‌تر < شروع می‌شود و با علامت بزرگ‌تر > به پایان می‌رسد.

به طور کلی در HTML تگ‌ها به دو دسته اصلی از نظر باز یا بسته بودن تقسیم می‌شوند:

• Closing tags که به تگ باز (Opening Tag) و تگ بسته (Closing Tag) نیاز دارند.
• Self-closing tags که فقط به تگ باز (Opening Tag) نیاز دارند.

برای درک کردن مفهوم تگ باز و بسته به تصویر و کد زیر دقت کنید:

<title>دویکس</title>

همانطور که در تصویر و کد بالا مشاهده می‌کنید تگ title از نوع Closing tags است و باید تگ باز و تگ بسته را برای آن نوشت؛ تفاوت تگ باز و تگ بسته وجود علامت اسلش ( / ) در ابتدای تگ بسته است.

حالا به مثال زیر نگاه کنید:

<img src="example.jpg" alt="نمونه">

بعضی تگ‌ها مانند تگ img از نوع Self-closing tags هستند و به تگ تکمیلی شهرت دارند؛ این تگ‌ها فقط به تگ باز نیاز دارند.

بستن همه تگ‌ها در HTML5 ضروری نیست و اکثر تگ‌ها بدون تگ بسته نیز عمل می‌کنند اما این کار غیر استاندارد است و توصیه می‌شود که تمام تگ‌ها را به درستی ببندید تا کد HTML شما به درستی تجزیه و تحلیل شود و از مشکلات ناشی از ترکیب نادرست تگ‌ها جلوگیری شود.

دقت داشته باشید که برای بستن تگ علامت اسلش ( / ) باید در ابتدای تگ بسته قرار گیرد نه در انتها:

<tag>محتوا</tag> ---> درست
<tag>محتوا<tag/> ---> نادرست

ویژگی‌ها (Attributes)

گاهی برای اعمال یک استایل خاص با CSS یا تکمیل عملکرد یک تگ باید به آن تگ یک سری خاصیت یا ویژگی افزود؛ برای آشنایی با نحوه استفاده از خاصیت‌ها برای تگ‌های HTML مقاله مقدمه ای از HTML را مطالعه کنید.

• ویژگی‌ها به تگ‌ها افزوده می‌شوند تا اطلاعات اضافی ارائه دهند.
• ویژگی‌ها با نام و مقدار به صورت “name=”value نوشته می‌شوند.

برای درک بهتر ساختار نوشتن ویژگی برای یک تگ به مثال زیر دقت کنید:

<a href="devix.academy">آکادمی آموزشی دویکس</a>

در مثال بالا href همان name یا نام خاصیت است و آدرس devix.academy همان value یا مقدار است؛ این ویژگی مخصوص تگ a است.

نگارش HTML

زبان HTML حساس به حروف (Case sensitivity) نیست؛ یعنی این زبان در هنگام نوشتار به بزرگی و کوچکی حروف حساس نیست اما معمولاً از حروف کوچک برای نوشتن تگ‌ها استفاده می‌شود.

به مثال زیر دقت کنید:

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

<P>این یک تگ پاراگراف است</P>

در قطعه کد بالا دو تگ پاراگراف نوشته شده که یکی با حرف کوچک و دیگری با حرف بزرگ است؛ هر دو خط بالا کارساز هستند و خروجی صحیحی دارند اما همانطور که گفتیم قوانین نحوی HTML توصیه می‌کنند که هنگام کد نویسی و نامگذاری پرونده‌ها به نوشتن با حروف کوچک بپردازید زیرا سرورهای وب اغلب به حروف کوچک و بزرگ حساس هستند.

نظم داخلی HTML

نظم داخلی در نوشتن کد HTML مهم است تا کد خوانا، قابل نگهداری و سازماندهی شده باشد؛ در ادامه به برخی اصول ساختار نظم داخلی کد HTML اشاره شده است:

1. تورفتگی (Indentation):

• استفاده از فاصله‌ها برای تورفتگی کد و ایجاد ساختار بهتر از نظر ظاهری (زمانی که یک عنصر داخل یک عنصر دیگر تعریف می‌شود با ایجاد چند فاصله در ابتدای عنصر داخلی این مفهوم را برسانید):

   <div>
     <p>متن تگ پاراگراف</p>
     <ul>
       <li>مورد 1</li>
       <li>مورد 2</li>
     </ul>
   </div>

2. ترتیب المان‌ها و استفاده از تگ‌های معنایی (Element Order and Semantic Elements):

• گروه‌بندی المان‌ها و استفاده از تگ‌های معنایی به منظور نشان دادن ساختار معنایی و اهمیت صفحه (استفاده از تگ‌هایی مانند هدر، فوتر و… در کنار رعایت ترتیب اهمیت تگ‌هایی مثل h1 و h2 و…):

   <header>
     <h1>عنوان صفحه</h1>
     <nav>
       <ul>
         <li><a href="#">منوی 1</a></li>
         <li><a href="#">منوی 2</a></li>
       </ul>
     </nav>
   </header>
   <main>
     <article>
       <h2>عنوان مقاله</h2>
       <p>متن مقاله...</p>
     </article>
   </main>
   <footer>
     <p>تمامی حقوق وبسایت محفوظ است</p>
   </footer>

3. ترتیب ویژگی‌ها:

• اگر ویژگی‌های یک تگ بیش از یکی باشند، آن‌ها را به ترتیب معین شده بنویسید.

   <a href="devix.academy" target="_blank" title="link to devix">دویکس</a>

کامنت گذاری و توضیحات در HTML

در زبان HTML از توضیحات یا کامنت برای اضافه کردن یادداشت به کد استفاده می‌شود؛ توضیحات در HTML با استفاده از تگ‌های نشانگر <!-- و --> ایجاد می‌شوند، هر چیزی که بین این دو تگ قرار دارد، به عنوان یک توضیح در نظر گرفته می‌شود و توسط مرورگر نادیده گرفته می‌شود.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
  <title>صفحه نمونه</title>
</head>
<body>
  <!-- این قسمت شامل سربرگ صفحه است -->
  <header>
    <h1>عنوان اصلی صفحه</h1>
  </header>

  <p>متنی در مورد صفحه نمونه...</p>

  <!-- این قسمت شامل پاورقی صفحه است -->
  <footer>
    <p>تمامی حقوق وبسایت محفوظ است</p>
  </footer>
</body>
</html>

در این مثال، توضیحات با استفاده از تگ‌های <!-- و --> اضافه شده‌اند؛ توضیحات می‌توانند به شما و دیگران که با کد شما کار می‌کنند کمک کنند تا کد را بهتر درک کنند و در صورت نیاز تغییرات و اصلاحات لازم را اعمال کنند.

همچنین اگر بخواهید بخشی از کد را موقتاً غیرفعال کنید می‌توانید از توضیحات استفاده کنید تا آن بخش از کد نادیده گرفته شود؛ به طور مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال کامنت گذاری در HTML</title>
</head>
<body>

    <!-- این قسمت از کد غیرفعال شده است -->
    <!--<div>
        <p>این یک مثال است.</p>
    </div>-->
    
    <p>این قسمت فعال است.</p>

</body>
</html>

در این مثال، تگ <div> با دستورکامنت گذاری (<!-- و -->) احاطه شده است و به همین دلیل دیگر تاثیری در نمایش صفحه نخواهد داشت.

مقاله Syntax ها در HTML را در اینجا تمام می‌کنیم؛ در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.