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>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้โดยไม่ต้องแสดงเนื้อหาที่ให้ไว้เป็นส่วนหนึ่งของความคิดเห็น -

ความคิดเห็นที่ถูกต้องและไม่ถูกต้อง

ความคิดเห็นไม่ซ้อนกันซึ่งหมายความว่าไม่สามารถใส่ความคิดเห็นไว้ในความคิดเห็นอื่นได้ ลำดับที่สองลำดับสองขีด "-" อาจไม่ปรากฏในข้อคิดเห็นยกเว้นเป็นส่วนหนึ่งของแท็กปิด -> คุณต้องตรวจสอบให้แน่ใจว่าไม่มีช่องว่างในสตริงความคิดเห็นเริ่มต้น

ตัวอย่าง

ที่นี่ความคิดเห็นที่ระบุเป็นความคิดเห็นที่ถูกต้องและเบราว์เซอร์จะลบออก

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ความคิดเห็นหลายบรรทัด

จนถึงตอนนี้เราได้เห็นความคิดเห็นแบบบรรทัดเดียว แต่ 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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ความคิดเห็นตามเงื่อนไข

ข้อคิดเห็นแบบมีเงื่อนไขใช้ได้เฉพาะใน Internet Explorer (IE) บน Windows แต่เบราว์เซอร์อื่นจะเพิกเฉย ได้รับการสนับสนุนตั้งแต่ 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>

คุณจะเจอสถานการณ์ที่คุณจะต้องใช้สไตล์ชีตที่แตกต่างกันโดยยึดตามเวอร์ชันต่างๆของ Internet Explorer ในการแสดงความคิดเห็นตามเงื่อนไขจะเป็นประโยชน์

ใช้แท็กความคิดเห็น

มีเบราว์เซอร์เพียงไม่กี่แห่งที่รองรับแท็ก <comment> เพื่อแสดงความคิดเห็นส่วนหนึ่งของโค้ด HTML

Note- แท็ก <comment> เลิกใช้งานใน HTML5 ห้ามใช้องค์ประกอบนี้

ตัวอย่าง

<!DOCTYPE html>
<html>

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

หากคุณใช้ IE จะให้ผลลัพธ์ดังต่อไปนี้ -

แต่ถ้าคุณไม่ได้ใช้ IE มันจะให้ผลลัพธ์ดังต่อไปนี้ -

รหัสสคริปต์การแสดงความคิดเห็น

แม้ว่าคุณจะเรียนรู้ JavaScript ด้วย HTML ในบทช่วยสอนแยกต่างหาก แต่ที่นี่คุณต้องจดบันทึกไว้ว่าหากคุณใช้ Java Script หรือ VB Script ในโค้ด HTML ของคุณขอแนะนำให้ใส่รหัสสคริปต์นั้นไว้ในความคิดเห็น HTML ที่เหมาะสมเพื่อให้เก่า เบราว์เซอร์สามารถทำงานได้อย่างถูกต้อง

ตัวอย่าง

<!DOCTYPE html>
<html>

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

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การแสดงความคิดเห็นสไตล์ชีต

แม้ว่าคุณจะเรียนรู้การใช้สไตล์ชีตกับ HTML ในบทช่วยสอนแยกต่างหาก แต่ที่นี่คุณต้องจดบันทึกไว้ว่าหากคุณใช้ Cascading Style Sheet (CSS) ในโค้ด HTML ของคุณขอแนะนำให้ใส่โค้ดสไตล์ชีตนั้นไว้ในความคิดเห็น HTML ที่เหมาะสม เพื่อให้เบราว์เซอร์เก่าสามารถทำงานได้อย่างถูกต้อง

ตัวอย่าง

<!DOCTYPE html>
<html>

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

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -