التعليقات (Comments) في HTML

Nov. 6, 2021 | تيتو 4 تك

التعليق هو جزء من الكود يتجاهله أي متصفح ويب. من الممارسات الجيدة إضافة تعليقات إلى كود 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>

 

 

enlightened التعليقات الصالحة  و التعليقات الغير الصالحة

 

التعليقات لا تتداخل مما يعني أنه لا يمكن وضع تعليق داخل تعليق آخر. ثانيًا ، قد لا يظهر تسلسل الشرطة المزدوجة "-" داخل تعليق إلا كجزء من علامة الإغلاق ->. يجب عليك أيضًا التأكد من عدم وجود مسافات في بداية سلسلة التعليق.

مثال
هنا ، التعليق هو تعليق صالح وسيتم محوه بواسطة المتصفح.

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي التعليق الصحيح </title>
   </head>
	
   <body>
       <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

 

لكن السطر التالي ليس تعليقًا صالحًا وسيتم عرضه بواسطة المتصفح. هذا بسبب وجود مسافة بين قوس الزاوية اليسرى وعلامة التعجب.

 

<!DOCTYPE html>
<html>

   <head>  
      <title> مثال علي التعليق الخطأ </title>
   </head>
	
   <body>
      <  !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

 

 

enlightened  تعليقات متعددة الأسطر (Multiline)

 

لقد رأينا حتى الآن تعليقات ذات سطر واحد ، لكن HTML تدعم التعليقات متعددة الأسطر أيضًا.

يمكنك التعليق على أسطر متعددة بواسطة علامة البداية الخاصة <! - وعلامة النهاية -> الموضوعة قبل السطر الأول ونهاية السطر الأخير كما هو موضح في المثال التالي:

 

<!DOCTYPE html>
<html>

   <head>  
      <title> مثال علي تعليقات متعددة الأسطر </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>

 

 

enlightened   التعليقات الشرطية (Conditional)

 

تعمل التعليقات الشرطية فقط في Internet Explorer (IE) على Windows ولكن يتم تجاهلها من قبل المتصفحات الأخرى. يتم دعمها من Explorer 5 وما بعده ، ويمكنك استخدامها لإعطاء تعليمات شرطية لإصدارات مختلفة من IE.

 

<!DOCTYPE html>
<html>

   <head>  
      <title> مثال علي التعليقات الشرطية </title>

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

 

ستواجه موقفًا ستحتاج فيه إلى تطبيق صفحة أنماط مختلفة بناءً على إصدارات مختلفة من Internet Explorer ، وفي مثل هذه الحالة ستكون التعليقات الشرطية مفيدة.

 

 

enlightened  تعليق الكود النصي (Script Code)

 

على الرغم من أنك ستتعلم JavaScript مع HTML ، ولكن هنا يجب عليك تدوين ملاحظة أنه إذا كنت تستخدم Java Script أو VB Script في كود HTML الخاص بك ، فمن المستحسن وضع رمز البرنامج النصي هذا داخل تعليقات HTML المناسبة .

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي كود التعليق النصي </title>
      
      <script>
         <!-- 
            document.write("Hello World!")
          //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

 

 

enlightened   تعليق صفحات الأنماط (CSS)

 

على الرغم من أنك ستتعلم استخدام صفحات الأنماط المتتالية مع HTML ، ولكن هنا يجب عليك تدوين ملاحظة أنه إذا كنت تستخدم Cascading Style Sheet (CSS) في كود HTML الخاص بك ، فمن المستحسن وضع تعليق صفحة الأنماط هذا داخل تعليقات HTML المناسبة حتى تتمكن المتصفحات القديمة من العمل بشكل صحيح.

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي تعليق صفحات الأنماط </title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>