التعليق هو جزء من الكود يتجاهله أي متصفح ويب. من الممارسات الجيدة إضافة تعليقات إلى كود 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>
التعليقات الصالحة و التعليقات الغير الصالحة
التعليقات لا تتداخل مما يعني أنه لا يمكن وضع تعليق داخل تعليق آخر. ثانيًا ، قد لا يظهر تسلسل الشرطة المزدوجة "-" داخل تعليق إلا كجزء من علامة الإغلاق ->. يجب عليك أيضًا التأكد من عدم وجود مسافات في بداية سلسلة التعليق.
مثال
هنا ، التعليق هو تعليق صالح وسيتم محوه بواسطة المتصفح.
<!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>
تعليقات متعددة الأسطر (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>
التعليقات الشرطية (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 ، وفي مثل هذه الحالة ستكون التعليقات الشرطية مفيدة.
تعليق الكود النصي (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>
تعليق صفحات الأنماط (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>