فرادرسآموزش کامنت در HTML – به زبان ساده + کد و مثال
کامنت در HTML یکی از جنبه‌های حیاتی توسعه و برنامه نویسی وب است که به کاربر امکان می‌دهد یادداشت‌های توضیحی را در کد خود قرار دهد. در این مطلب از «مجله فرادرس» فرآیند افزودن نظرات تک‌خطی و چندخطی در اسناد HTML آموزش داده میشود. علاوه بر این، اهمیت استفاده از نظرات در کدنویسی HTML مورد بررسی واقع خواهد شد. این مطلب در واقع بینش‌هایی در مورد اهمیت گنجاندن کامنت در کد HTML ارائه داده و در پایان مطالعه کاربر متوجه خواهد شد که چگونه نظرات تک و چندخطی را در اسناد HTML خود درج کند.
تگ کامنت در HTML
تگ کامنت در زبان HTML به عنوان وسیله‌ای برای حاشیه‌نویسی یا درج نظرات در کد عمل میکند و کاربردها و مزایای خاص خود را دارد.
«سینتکس» (Syntax) خاص این تگ به صورت زیر است:
1<!-- I am a comment! -->در HTML نظرات یا همان کامنت با <!-- شروع می‌شوند و با --> خاتمه می‌یابند. درج علامت تعجب در ابتدای تگ بسیار مهم است اما نیازی به درج آن در انتهای تگ نیست. این تگ متن یا سایر عناصر HTML را که کاربر می‌خواهد به صورت کامنت درج کند در برمی‌گیرد و وضوح و سازمان‌دهی کد را فراهم میکند.
- نکته: در این مطلب منظور از عبارت‌هایی مانند نظرات، توضیحات و «کامنت» (Comment) یک چیز است.
چه زمانی باید از کامنت در HTML استفاده کرد؟
ایجاد کامنت در برنامه نویسی HTML نه تنها عادتی خوب محسوب میشود بلکه نوعی تمرین ضروری در هنگام انجام کارهای کدنویسی است. این نظرات بهعنوان اسناد ارزشمندی عمل میکنند که ارتباط برقرار کردن با کد، درک منطق پشت کد و غیره را هم برای خود برنامه نویس و هم برای دیگران تسهیل میکند. آنها همچنین زمانی مفید خواهند بود که کاربری پس از ماهها عدم فعالیت، دوباره به پروژهای مراجعه میکند. همچنین زمانی که کار توسعه به صورت تیمی باشد به منظور ارتباط و درک بهتر اعضای تیم از کار همدیگر، کامنتها بسیار ارزشمند هستند. از آن جهت که نظرات نقشی اساسی در برقراری ارتباط با توسعهدهندگان همکار، ایفا میکنند در نتیجه آنها وضوح کد را افزایش میدهند، منطق پشت کد را روشن کرده و همکاری موثرتر را تقویت میکنند.
آیا کامنت ها در HTML در دید عموم کاربران قرار دارند؟
کامنت در HTML از دید مرورگر پنهان میماند. در نتیجه، هر کامنت درج شده در کد منبع HTML در طول فرآیند رندر در مرورگر وب پنهان خواهد بود و کاربر نهایی آن را نخواهد دید. با این حال تقریباً هرکسی میتواند با رفتن به «View -> Developer -> View Source»، در مروگر، تمام کامنتهای درج شده در منبع کد را ببیند و با این اوصاف کامنتها در HTML در دسترس عموم قرار خواهند گرفت.
نحون نوشتن کامنت تک خطی در HTML
کامنت تک‌خطی در HTML تنها به یک خط محدود میشود و همان‌طور که قبلاً تأکید شد در نمایشگر مرورگر پنهان میماند. معمولاً از نظرات تک خطی به منظور تشریح منطق پشت کد استفاده میشود که مثال زیر نحوه استفاده از آن را نشان می‌دهد:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9<body>
10 <!-- Add the navbar here -->
11 <h2>About me</h2>
12 <p>I am learning to code with freeCodeCamp.</p>
13 <p>I am going through each and every one of their awesome and super helpful certifications. </p>
14 <p>I am on my way to becoming a fullstack web developer!</p>
15 <h3>Work Experience</h3>
16</body>
17</html>نظرات تک‌خطی زمانی ارزشمند هستند که کاربر بخواهد مشخص کند تگی خاص در HTML کجا به پایان می‌رسد. این امر به ویژه در اسناد طولانی و پیچیده HTML مفید است و به کاربر کمک قابل‌توجهی میکند. مثال زیر برای بیان این موضوع است:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9<body>
10 <section class="contact">
11 </section> <!--closing tag of contact section is here-->
12</body>
13</html>نحوه نوشتن کامنت درون خطی در HTML
در HTML، امکان درج کامنت در جمله یا خطی خاصی از کد موجود است. این نوع توضیحات یا نظرات در HTML در داخل «<!-- -->» قرار دارند و صرفاً بر محتوای محصور شده در آنها تأثیر می‌گذارند و بقیه متن داخل تگ را دست‌نخورده می‌گذارند. مثال زیر نحوه استفاده از این نوع کامنت را نشان می‌دهد:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9<body>
10 <p>I am <!--going to be--> a web developer</p>
11</body>
12</html>در اینجا، نظر !--going to be-- معنای مورد نظر را بدون تأثیر بر خروجی رندر شده روشن میکند.
نحوه نوشتن توضیحات چند خطی در HTML
کاربران همچنین می‌توانند کامنت یا نظرات را در چندین خط با استفاده از همان سینتکسی که کامنتهای تک‌خطی را با آن می‌نویسند، گسترش دهند که مثال زیر نحوه استفاده از این نوع کامنت در زبان HTML نشان می‌دهد.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9<body>
10 <p>I am a web developer</p>
11 <!--This is going to be my portfolio.
12 It will show off the projects that I'm most proud of.
13 I could go on and on about what I want to add
14 because I am writing a multi-line comment here-->
15</body>
16</html>در سناریوی فوق، توضیحات HTML درج شده چندین خط را در برمی‌گیرد و به کاربر امکان می‌دهد توضیحات یا یادداشت‌های دقیقی را بدون تأثیر بر خروجی ارائه شده ارائه دهد.
کامنت HTML برای تگی خاص
اگر کاربری برای تگی خاص در HTML کامنتی بنویسد باید تگ انتخابی را در «<!-- -->» قرار دهد که مثال زیر نحوه استفاده از این نوع کامنت را بیان میکند:
1!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9<body>
10 <h2>My portfolio page</h2>
11 <h3>freeCodeCamp certification projects</h3>
12 <!-- <section class="hero">
13 </section> -->
14 <h2>About Me</h2>
15</body>
16</html>درج کامنت برای تگ‌ها در هنگام اشکال‌زدایی بسیار کاری ارزشمند است. هنگامی که کاربر توسعه‌دهنده با مشکلاتی در عملکرد یا ظاهر صفحه خود مواجه میشود، میتواند به‌طور هدفمندی در تگ‌های مدنظر خود یکی یکی کامنت درج کند تا مشکل اصلی را تشخیص دهد و به این نتیجه برسد که کدام یک ممکن است باعث این مشکل شده باشد.
میانبرهای صفحه کلید برای افزودن کامنت در HTML
میانبرهای صفحه کلید مفیدی برای درج کامنت در HTML وجود دارد. کاربران مک می‌توانند از Command / استفاده کنند، در حالی که کاربران ویندوز و لینوکس می‌توانند از Control / بهره ببرند. کاربران برای ایجاد نظر تک‌خطی، کافی است ترکیب کلید مشخص شده را در ویرایشگر کد خود نگه‌دارند که با این کار در تمام خطی که در آن هستند، کامنت درج خواهد شد. توجه به این نکته مهم است که این روش فقط برای نظرات تک‌خطی مناسب است زیرا همه‌چیز را در آن خط توضیح می‌دهد. نظرات درون‌خطی نیاز به ورود دستی دارند.
برای نظرات چندخطی، کاربران باید متن یا تگ‌هایی را که می‌خواهند در آن کامنت درج کنند را برجسته کرده و همان کلید ترکیبی را فشار دهند. این عمل نظرات را برای هر خط انتخاب شده اعمال کرده و فرآیند را ساده میکند.
سخن پایانی
درج توضیحات یا کامنت در HTML به کاربران کمک میکند که کارهای توسعه و اشکال‌زدایی را ساده کنند و در مواقع رفع اشکال از کد بهتر و سریع‌تر منطق پشت کد را درک کنند. همچنین درج توضیحات یا نظرات در HTML به تیم‌های توسعه کمک میکند که همکاری بهتری داشته باشند و کدهای یکدیگر را بهتر درک کنند.
دو نوع کامنت گذاری رایج در HTML وجود دارد که در مطلب فوق از مجله فرادرس معرفی شدند که آن هم کامنت گذاری به صورت تک‌خطی و چندخطی هستند، همچنین در مطلب فوق توضیحاتی مفید در رابطه با کاربرد این کامنتها، زمان استفاده از آنها و درج کامنت برای تگ‌های خاص ارائه شد. به امید اینکه مطلب فوق درک خوبی از درج نظرات در زبان HTML به کاربران داده باشد. برای درک بهتر این سناریو بهتر است که تمرینات ارائه شده در مطلب فوق به صورت عملی اجرا شوند.
سلام. ممنون جناب مهندس خیلی ساده و جذاب توضیح دادین
ممنون کیان عزیز. ممنون از اینکه با مجله فرادرس همراه هستید.