آموزش HTML - کامنت گذاری

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

کامنت‌های HTML به طور کامل توسط مرورگرهای وب نادیده گرفته می‌شوند، بنابراین بر نحوه نمایش یا عملکرد صفحه شما تأثیری نمی‌گذارند.

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

مثالی از کامنت‌های HTML

در ادامه مثالی از کامنت‌های HTML آورده شده است:

<!DOCTYPE html>
<html>
<head>
   <!-- Document Header Starts -->
   <title>This is document title</title>
</head>
<!-- Document Header Ends -->
<body>
   <p>Document content goes here.....</p>
</body>
</html>

اگر برنامه بالا را اجرا کنید، جمله "Document content goes here....." را نمایش می‌دهد و از محتوایی که به عنوان بخشی از کامنت‌ها داده شده است صرف‌نظر می‌کند.

کامنت‌های معتبر در برابر نامعتبر

کامنت‌گذاری در HTML قوانین خاصی دارد که باید از آن‌ها پیروی کنید. در ادامه فهرست این قوانین آمده است −

• کامنت‌ها از تودرتویی (Nesting) پشتیبانی نمی‌کنند، به این معنی که نمی‌توان یک کامنت را داخل کامنت دیگری قرار داد.

• شما نمی‌توانید از دنباله "--" در داخل یک کامنت استفاده کنید، مگر برای بستن آن.

• همچنین باید مطمئن شوید که در رشته شروع کامنت هیچ فاصله‌ای (Space) وجود ندارد.

مثال

در اینجا، کامنت داده‌شده یک کامنت معتبر است و توسط مرورگر حذف خواهد شد.

<!DOCTYPE html>
<html>
<head>
   <title>Valid Comment Example</title>
</head>
<body>
   <!--   This is valid comment -->
   <p>Document content goes here.....</p>
</body>
</html>

اما خط زیر یک کامنت معتبر نیست و توسط مرورگر نمایش داده می‌شود. زیرا بین علامت زاویه چپ (<) و علامت تعجب یک فاصله وجود دارد.

<!DOCTYPE html>
<html>
<head>
   <title>Invalid Comment Example</title>
</head>
<body>
   < !--   This is not a valid comment -->
   <p>Document content goes here.....</p>
</body>
</html>

کامنت‌های چندخطی

شما می‌توانید با قرار دادن تگ شروع خاص <!-- قبل از خط اول و تگ پایانی --> در انتهای آخرین خط، چندین خط را کامنت کنید، همان‌طور که در مثال زیر نشان داده شده است.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>Multiline Comments</title>
</head>
<body>
   <!--
      This is a multiline comment and it can
      span through as many as lines you like.
   -->
   <p>Document content goes here.....</p>
</body>
</html>

کامنت‌های شرطی

کامنت‌های شرطی ویژه‌مرورگر اینترنت اکسپلورر (IE) در ویندوز هستند، اما توسط سایر مرورگرها نادیده گرفته می‌شوند. این کامنت‌ها از نسخه Explorer 5 به بعد پشتیبانی می‌شوند و می‌توانید از آن‌ها برای دادن دستورات شرطی به نسخه‌های مختلف IE استفاده کنید.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>Conditional Comments</title>
   <!--[if IE 6]>
      Special instructions for IE 6 here
   <![endif]-->
</head>
<body>
   <p>Document content goes here.....</p>
</body>
</html>

این تگ‌ها در موقعیت‌هایی استفاده می‌شوند که نیاز دارید استایل‌های مختلفی را بر اساس نسخه‌های مختلف اینترنت اکسپلورر اعمال کنید؛ در چنین شرایطی، کامنت‌های شرطی مفید خواهند بود.

کامنت‌گذاری با استفاده از تگ <comment>

تعداد کمی از مرورگرها از تگ <comment> برای کامنت کردن بخشی از کد HTML پشتیبانی می‌کنند.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>Using Comment Tag</title>
</head>
<body>
   <p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>

کامنت‌گذاری کدهای اسکریپت

اگر یک سند HTML حاوی جاوا اسکریپت یا VBScript باشد و این صفحه را در مرورگر باز کنید، برخی از نسخه‌های قدیمی مرورگر ممکن است به درستی کار نکنند. توصیه می‌شود که آن کد اسکریپت را داخل کامنت‌های مناسب HTML قرار دهید تا مرورگرهای قدیمی بتوانند به درستی کار کنند.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>Commenting Script Code</title>
   <script>
      <!-- document.write("Hello World!") -->
   </script>
</head>
<body>
   <p>Hello , World!</p>
</body>
</html>

کامنت‌گذاری استایل‌شیت‌ها

برای کامنت کردن اسکریپت CSS در داخل یک تگ <style>، باید از نماد /* به عنوان نقطه شروع و از نماد */ به عنوان نقطه پایان استفاده کنیم.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>Commenting Style Sheets</title>
   <style>
      /* commenting in stylesheet 
         .example {
         border: 1px solid #4a7d49;
      } */
   </style>
</head>
<body>
   <div class="example">Hello , World!</div>
</body>
</html>