آموزش اولیه HTML

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

پیش نیازها: سواد کامپیوتری پایه، نرم افزار پایه نصب شده و دانش اولیه کار با فایل ها.
هدف: آشنایی اولیه با HTML و تمرین نوشتن چند عنصر HTML.

HTML چیست؟

(Hyper Text Markup Language) HTML یک زبان نشانه گذاری است که به مرورگرهای وب می گوید چگونه صفحات وب را که بازدید می کنید ساختاربندی کنند. می تواند به همان اندازه پیچیده یا ساده باشد که توسعه دهنده وب می خواهد. HTML از یک سری عناصر تشکیل شده است که از آنها برای محصور کردن، بسته بندی یا علامت گذاری قسمت های مختلف محتوا استفاده می کنید تا آن را به شکلی خاص نشان دهید یا عمل کنید. تگ های محصور می توانند محتوا را به یک لینک برای اتصال به صفحه دیگر، italicize کردن کلمات و غیره تبدیل کنند. به عنوان مثال، خط متن زیر را در نظر بگیرید:
My cat is very grumpy

اگر می‌خواهیم متن به تنهایی بماند، می‌توانیم با قرار دادن آن در یک عنصر پاراگراف (<p>) مشخص کنیم که یک پاراگراف است:

<p>My cat is very grumpy</p>

توجه: برچسب ها در HTML به حروف بزرگ و کوچک حساس نیستند. این بدان معناست که آنها را می توان با حروف بزرگ یا کوچک نوشت. به عنوان مثال، یک تگ <title> می تواند به صورت <title>، <TITLE>، <Title>، <TiTlE> و غیره نوشته شود و کار خواهد کرد. با این حال، بهترین تمرین برای سازگاری و خوانایی، نوشتن تمام برچسب ها با حروف کوچک است.

آناتومی یک عنصر HTML

بیایید عنصر پاراگراف خود را از بخش قبل بیشتر بررسی کنیم:

.

آناتومی عنصر ما به شرح زیر است:

تگ باز: این شامل نام عنصر (در این مثال، p برای پاراگراف) است که در براکت های زاویه باز و بسته پیچیده شده است. این تگ باز نشان می دهد که عنصر از کجا شروع می شود یا شروع به اثر می کند. در این مثال، قبل از شروع متن پاراگراف است.
محتوا: این محتوای عنصر است. در این مثال، متن پاراگراف است.
تگ بسته شدن: این تگ همانند تگ افتتاحیه است، با این تفاوت که قبل از نام عنصر دارای یک اسلش رو به جلو است. این نقطه پایان عنصر را مشخص می کند. شامل نشدن برچسب بسته شدن یک خطای معمول مبتدی است که می تواند نتایج عجیبی را ایجاد کند.

عنصر عبارت است از تگ آغازین، به دنبال آن محتوا و به دنبال آن تگ بسته شدن.

یادگیری فعال: ایجاد اولین عنصر HTML شما

خط زیر را در قسمت «کد قابل ویرایش» با قرار دادن آن با برچسب‌های <em> و </em> ویرایش کنید. برای باز کردن عنصر، تگ آغازین <em> را در ابتدای خط قرار دهید. برای بستن عنصر، تگ بستن </em> را در انتهای خط قرار دهید. انجام این کار باید به خط قالب بندی متنی ایتالیک بدهد! به‌روزرسانی تغییرات خود را به‌طور زنده در قسمت خروجی ببینید.

اگر اشتباه کردید، می توانید کار خود را با استفاده از دکمه Reset پاک کنید. اگر واقعا گیر کردید، دکمه Show solution را فشار دهید تا پاسخ را ببینید.

عناصر تودرتو

عناصر را می توان در عناصر دیگر قرار داد. به این می گویند لانه سازی. اگر بخواهیم بگوییم که گربه ما بسیار بدخلق است، می‌توانیم کلمه را در یک عنصر <strong> بپیچیم، به این معنی که کلمه باید قالب بندی متن قوی (er) داشته باشد:

<p>My cat is <strong>very</strong>grumpy.</p>

یک راه درست و غلط برای لانه سازی وجود دارد. در مثال بالا ابتدا عنصر p را باز کردیم سپس عنصر strong را باز کردیم. برای لانه سازی مناسب ابتدا باید عنصر strong را قبل از بستن p ببندیم.

در زیر مثالی از روش اشتباه برای انجام تودرتو آمده است:

<p>My cat is<strong>very grumpy.</p></strong>

برچسب ها باید به گونه ای باز و بسته شوند که داخل یا خارج یکدیگر باشند. با نوع همپوشانی در مثال بالا، مرورگر باید قصد شما را حدس بزند. این نوع حدس زدن می تواند منجر به نتایج غیرمنتظره شود.

بلوک در برابر عناصر درون خطی

دو دسته مهم از عناصر برای دانستن در HTML وجود دارد: عناصر سطح بلوک و عناصر درون خطی.

عناصر سطح بلوک یک بلوک قابل مشاهده در یک صفحه را تشکیل می دهند. یک عنصر در سطح بلوک در یک خط جدید به دنبال محتوای قبل از آن ظاهر می شود. هر محتوایی که از یک عنصر سطح بلوک پیروی می کند در یک خط جدید نیز ظاهر می شود. عناصر سطح بلوک معمولاً عناصر ساختاری در صفحه هستند. به عنوان مثال، یک عنصر در سطح بلوک ممکن است نشان دهنده سرفصل ها، پاراگراف ها، فهرست ها، منوهای پیمایش یا پاورقی باشد. یک عنصر در سطح بلوک در داخل یک عنصر درون خطی قرار نمی گیرد، اما ممکن است در داخل عنصر سطح بلوک دیگری تودرتو باشد.

عناصر درون خطی در عناصر سطح بلوک قرار دارند و فقط بخش‌های کوچکی از محتوای سند را احاطه می‌کنند (نه کل پاراگراف‌ها یا گروه‌بندی محتوا). یک عنصر درون خطی باعث نمی شود که یک خط جدید در سند ظاهر شود. معمولاً با متن استفاده می شود، برای مثال یک عنصر <a> یک ابر پیوند ایجاد می کند، و عناصری مانند <em> یا <strong> تاکید ایجاد می کنند.

به مثال زیر توجه کنید:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>

<em> یک عنصر درون خطی است. همانطور که در زیر می بینید، سه عنصر اول در یک خط قرار می گیرند، بدون فاصله بین. از طرف دیگر، <p> یک عنصر در سطح بلوک است. هر عنصر p در یک خط جدید با فاصله بالا و پایین ظاهر می شود. (این فاصله به دلیل استایل پیش‌فرض CSS است که مرورگر روی پاراگراف‌ها اعمال می‌کند.)

عناصر تودرتو

عناصر را می توان در عناصر دیگر قرار داد. به این می گویند لانه سازی. اگر بخواهیم بگوییم که گربه ما بسیار بدخلق است، می‌توانیم کلمه را در یک عنصر <strong> بپیچیم، به این معنی که کلمه باید قالب بندی متن قوی (er) داشته باشد:

<p>My cat is <strong>very</strong>grumpy.</p>

یک راه درست و غلط برای لانه سازی وجود دارد. در مثال بالا ابتدا عنصر p را باز کردیم سپس عنصر strong را باز کردیم. برای لانه سازی مناسب ابتدا باید عنصر strong را قبل از بستن p ببندیم.

در زیر مثالی از روش اشتباه برای انجام تودرتو آمده است:

<p>My cat is<strong>very grumpy.</p></strong>

برچسب ها باید به گونه ای باز و بسته شوند که داخل یا خارج یکدیگر باشند. با نوع همپوشانی در مثال بالا، مرورگر باید قصد شما را حدس بزند. این نوع حدس زدن می تواند منجر به نتایج غیرمنتظره شود.

بلوک در برابر عناصر درون خطی

دو دسته مهم از عناصر برای دانستن در HTML وجود دارد: عناصر سطح بلوک و عناصر درون خطی.

عناصر سطح بلوک یک بلوک قابل مشاهده در یک صفحه را تشکیل می دهند. یک عنصر در سطح بلوک در یک خط جدید به دنبال محتوای قبل از آن ظاهر می شود. هر محتوایی که از یک عنصر سطح بلوک پیروی می کند در یک خط جدید نیز ظاهر می شود. عناصر سطح بلوک معمولاً عناصر ساختاری در صفحه هستند. به عنوان مثال، یک عنصر در سطح بلوک ممکن است نشان دهنده سرفصل ها، پاراگراف ها، فهرست ها، منوهای پیمایش یا پاورقی باشد. یک عنصر در سطح بلوک در داخل یک عنصر درون خطی قرار نمی گیرد، اما ممکن است در داخل عنصر سطح بلوک دیگری تودرتو باشد.

عناصر درون خطی در عناصر سطح بلوک قرار دارند و فقط بخش‌های کوچکی از محتوای سند را احاطه می‌کنند (نه کل پاراگراف‌ها یا گروه‌بندی محتوا). یک عنصر درون خطی باعث نمی شود که یک خط جدید در سند ظاهر شود. معمولاً با متن استفاده می شود، برای مثال یک عنصر <a> یک ابر پیوند ایجاد می کند، و عناصری مانند <em> یا <strong> تاکید ایجاد می کنند.

به مثال زیر توجه کنید:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>

<em> یک عنصر درون خطی است. همانطور که در زیر می بینید، سه عنصر اول در یک خط قرار می گیرند، بدون فاصله بین. از طرف دیگر، <p> یک عنصر در سطح بلوک است. هر عنصر p در یک خط جدید با فاصله بالا و پایین ظاهر می شود. (این فاصله به دلیل استایل پیش‌فرض CSS است که مرورگر روی پاراگراف‌ها اعمال می‌کند.)

توجه: در HTML، هیچ الزامی برای اضافه کردن / در انتهای تگ عنصر خالی وجود ندارد،با این حال، این یک نحو معتبر نیز هست، و زمانی که بخواهید HTML شما XML معتبر باشد، ممکن است این کار را انجام دهید.

ویژگی ها

عناصر همچنین می توانند ویژگی هایی داشته باشند. ویژگی ها به این شکل هستند:

ویژگی ها حاوی اطلاعات اضافی درباره عنصری هستند که در محتوا ظاهر نمی شوند. در این مثال، ویژگی class یک نام شناسایی است که برای هدف قرار دادن عنصر با اطلاعات سبک استفاده می شود.

یک خصیصه باید دارای:

فاصله بین آن و نام عنصر. (برای یک عنصر با بیش از یک ویژگی، ویژگی ها نیز باید با فاصله از هم جدا شوند.)
نام صفت و به دنبال آن علامت مساوی.
یک مقدار مشخصه که با علامت‌های نقل قول باز و بسته می‌شود.

یادگیری فعال: افزودن ویژگی ها به یک عنصر

مثال دیگری از یک عنصر <a> است. این مخفف لنگر است. یک لنگر می‌تواند متنی را که محصور می‌کند به یک ابرپیوند تبدیل کند. لنگرها می توانند چندین ویژگی داشته باشند، اما تعدادی از آنها به شرح زیر است:

href
مقدار این مشخصه نشانی وب پیوند را مشخص می کند. مثلا: href=”https://www.mozilla.org/”

title
ویژگی title اطلاعات اضافی در مورد پیوند را مشخص می کند، مانند توضیحات صفحه ای که به آن پیوند داده می شود. به عنوان مثال، title=”The Mozilla homepage”. هنگامی که مکان نما روی عنصر قرار می گیرد، به عنوان یک راهنمای ابزار ظاهر می شود.

target
ویژگی target زمینه مرور مورد استفاده برای نمایش پیوند را مشخص می کند. به عنوان مثال، “target=”_blank پیوند را در یک تب جدید نمایش می دهد. اگر می خواهید محتوای پیوند شده را در برگه فعلی نمایش دهید، فقط این ویژگی را حذف کنید.

خط زیر را در قسمت ورودی ویرایش کنید تا آن را به پیوندی به وب سایت مورد علاقه خود تبدیل کنید.

1.عنصر <a> را اضافه کنید.
2.ویژگی href و ویژگی title را اضافه کنید.
3.مشخصه target را برای باز کردن پیوند در تب جدید مشخص کنید.

می‌توانید به‌روزرسانی تغییرات خود را به‌طور زنده در قسمت خروجی ببینید. باید پیوندی را مشاهده کنید – که وقتی نشانگر ماوس را روی آن قرار دهید – مقدار ویژگی title را نشان می‌دهد و پس از کلیک روی آن، یک برگه جدید باز می‌شود و به آدرس وب در ویژگی href می‌رود. به یاد داشته باشید که باید یک فاصله بین نام عنصر و بین هر ویژگی قرار دهید.

اگر اشتباه کردید، همیشه می توانید با استفاده از دکمه Reset آن را بازنشانی کنید. اگر واقعا گیر کردید، دکمه Show solution را فشار دهید تا پاسخ را ببینید.

صفات بولی(Boolean attributes)

گاهی اوقات ویژگی هایی را می بینید که بدون مقدار نوشته شده اند. این کاملا قابل قبول است. به این صفات بولی گفته می شود. ویژگی های بولی فقط می توانند یک مقدار داشته باشند که به طور کلی با نام ویژگی یکسان است. به عنوان مثال، ویژگی disabled را در نظر بگیرید، که می توانید آن را برای تشکیل عناصر ورودی اختصاص دهید. (شما از این برای غیرفعال کردن عناصر ورودی فرم استفاده می کنید تا کاربر نتواند وارد شود. عناصر غیرفعال معمولاً ظاهری خاکستری دارند.) به عنوان مثال:

<input type=”text” disabled=”disabled” />

به صورت مختصر، نوشتن این مطلب به صورت زیر قابل قبول است:

<!– using the disabled attribute prevents the end user from entering text into the input box –>
<input type=”text” disabled />
<!– text input is allowed, as it doesn’t contain the disabled attribute –>
<input type=”text” />

به عنوان مرجع، مثال بالا همچنین شامل یک عنصر ورودی فرم غیرفعال می شود. HTML از مثال بالا این نتیجه را ایجاد می کند:

حذف نقل قول در اطراف مقادیر ویژگی

اگر به کد بسیاری از سایت‌های دیگر نگاه کنید، ممکن است با تعدادی از سبک‌های نشانه‌گذاری عجیب روبرو شوید، از جمله مقادیر مشخصه بدون نقل قول. این در شرایط خاصی مجاز است، اما در شرایط دیگر می‌تواند نشانه‌گذاری شما را نیز خراب کند. به عنوان مثال، اگر نمونه پیوند قبلی خود را مجدداً مشاهده کنیم، می‌توانیم یک نسخه اولیه فقط با ویژگی href بنویسیم، مانند این:

<a href=https://www.mozilla.org/>favorite website</a>

با این حال، به محض اینکه ویژگی title را به این روش اضافه می کنیم، مشکلاتی وجود دارد:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

همانطور که در بالا نوشته شد، مرورگر نشانه گذاری را اشتباه تفسیر می کند و ویژگی عنوان را با سه ویژگی اشتباه می گیرد: یک ویژگی title با مقدار The و دو ویژگی بولی، Mozilla و homepage. بدیهی است که این در نظر گرفته نشده است!

توجه:همیشه نقل‌قول‌های ویژگی‌ها را درج کنید. از چنین مشکلاتی جلوگیری می کند و منجر به کدهای خواناتر می شود.

نقل قول های تکی یا دوتایی؟

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

<a href=’https://www.example.com‘>A link to my example.</a>

<a href=”https://www.example.com“>A link to my example.</a>

اطمینان حاصل کنید که نقل قول های تکی و دوگانه را با هم ترکیب نکنید. این مثال (زیر) نوعی از اختلاط نقل قول ها را نشان می دهد که اشتباه خواهند شد:

با این حال، اگر از یک نوع نقل‌قول استفاده می‌کنید، می‌توانید نوع دیگر نقل قول را در مقادیر ویژگی خود قرار دهید:

<a href=”https://www.example.com” title=”Isn’t this fun?“>A link to my example.</a>

برای استفاده از گیومه ها در داخل سایر گیومه های هم نوع (یک نقل قول یا دو نقل قول)، از موجودیت های HTML استفاده کنید. به عنوان مثال، این شکسته می شود:

در عوض، شما باید این کار را انجام دهید:

<a href=’https://www.example.com‘ title=’Isn&apos;t this fun?‘>A link to my example.</a>

آناتومی یک سند HTML

عناصر HTML مجزا به خودی خود بسیار مفید نیستند. در مرحله بعد، بیایید بررسی کنیم که چگونه عناصر جداگانه برای تشکیل یک صفحه HTML کامل ترکیب می شوند:

در اینجا داریم:

1. <!DOCTYPE html>: نوع doctype. زمانی که HTML جوان بود (1991-1992)، doctypes قرار بود به عنوان پیوندهایی به مجموعه قوانینی عمل کند که صفحه HTML باید از آنها پیروی کند تا HTML خوب در نظر گرفته شود. Doctypes قبلا چیزی شبیه به این بود:

اخیراً، doctype یک مصنوع تاریخی است که باید در آن گنجانده شود تا همه چیز به درستی کار کند. <!DOCTYPE html> کوتاه ترین رشته کاراکترهایی است که به عنوان یک doctype معتبر محسوب می شود. این همه ی آن چیزیست که باید بدانی!

2. <html></html>: عنصر <html>.این عنصر تمام محتوای صفحه را جمع می کند. گاهی اوقات به عنوان عنصر ریشه شناخته می شود.

3. <head></head>: عنصر <head>.این عنصر به عنوان محفظه ای برای هر چیزی که می خواهید در صفحه HTML قرار دهید عمل می کند، این محتوایی نیست که صفحه به بینندگان نشان می دهد. این شامل کلمات کلیدی و توضیحات صفحه است که در نتایج جستجو ظاهر می شود، CSS برای استایل کردن محتوا، اعلان مجموعه کاراکترها و موارد دیگر. در مقاله بعدی این مجموعه بیشتر با این موضوع آشنا خواهید شد.

4.”<meta charset=”utf-8>: عنصر <meta>. این عنصر ابرداده ای را نشان می دهد که نمی تواند توسط سایر عناصر مرتبط با HTML مانند <base>, <link>, <script>, <style> یا <title> نمایش داده شود. صفات charset مجموعه کاراکترهای سند شما را روی UTF-8 تنظیم می‌کند، که شامل بیشتر نویسه‌های اکثریت قریب به اتفاق زبان‌های نوشتاری انسانی است. با این تنظیم، صفحه اکنون می‌تواند هر محتوای متنی را که ممکن است حاوی آن باشد مدیریت کند. هیچ دلیلی برای تنظیم نکردن آن وجود ندارد و می تواند به جلوگیری از برخی مشکلات بعدا کمک کند.

5.<title></title>: عنصر <title>.این عنوان صفحه را تنظیم می کند، که عنوانی است که در برگه مرورگر ظاهر می شود که صفحه در آن بارگذاری می شود. عنوان صفحه همچنین برای توصیف صفحه هنگام نشانک گذاری استفاده می شود.

6.<body></body>: عنصر <body>.این شامل تمام محتوایی است که در صفحه نمایش داده می شود، از جمله متن، تصاویر، فیلم ها، بازی ها، آهنگ های صوتی قابل پخش یا هر چیز دیگری.

یادگیری فعال: افزودن برخی ویژگی ها به یک سند HTML

اگر می‌خواهید با نوشتن مقداری HTML در رایانه محلی خود آزمایش کنید، می‌توانید:

1.نمونه صفحه HTML ذکر شده در بالا را کپی کنید.
۲.یک فایل جدید در ویرایشگر متن خود ایجاد کنید.
۳.کد را در فایل متنی جدید قرار دهید.
4.فایل را به عنوان index.html ذخیره کنید.

اکنون می توانید این فایل را در یک مرورگر وب باز کنید تا ببینید کد رندر شده چگونه به نظر می رسد. کد را ویرایش کنید و مرورگر را رفرش کنید تا ببینید نتیجه چیست. در ابتدا صفحه به شکل زیر است:

در این تمرین، می‌توانید کد را به‌صورت محلی در رایانه‌تان ویرایش کنید، همانطور که قبلاً توضیح داده شد، یا می‌توانید آن را در پنجره نمونه زیر ویرایش کنید (پنجره نمونه قابل ویرایش فقط محتویات عنصر <body> را نشان می‌دهد، در این مورد). مهارت های خود را با اجرای وظایف زیر تقویت کنید:

درست در زیر تگ آغازین عنصر <body> یک عنوان اصلی برای سند اضافه کنید. این باید در داخل یک تگ بازکننده <h1> و تگ بسته شدن </h1> پیچیده شود.

محتوای پاراگراف را ویرایش کنید تا متنی در مورد موضوعی که به نظر شما جالب است اضافه شود.

کلمات مهم را با قرار دادن آنها در داخل یک برچسب <strong> باز و </strong> برچسب بسته، برجسته کنید.

همانطور که قبلا در مقاله توضیح داده شد، پیوندی به پاراگراف خود اضافه کنید.

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

اگر اشتباه کردید، همیشه می توانید با استفاده از دکمه Reset آن را بازنشانی کنید. اگر واقعا گیر کردید، دکمه Show solution را فشار دهید تا پاسخ را ببینید.

فضای خالی در HTML

در مثال های بالا، ممکن است متوجه شده باشید که فضای خالی زیادی در کد گنجانده شده است. این اختیاری است. این دو قطعه کد معادل هستند:

مهم نیست که چقدر فضای خالی در محتوای عنصر HTML استفاده می کنید (که می تواند شامل یک یا چند کاراکتر فاصله باشد، اما همچنین خطوط شکسته می شود)، تجزیه کننده HTML هر دنباله ای از فضای خالی را هنگام ارائه کد به یک فضای واحد کاهش می دهد. پس چرا از فضای خالی زیاد استفاده می کنیم؟ پاسخ خوانایی است.

اگر کد شما به خوبی فرمت شده باشد، درک آنچه در کد شما می گذرد آسان تر خواهد بود. در HTML ما هر عنصر تودرتو با دو فاصله بیشتر از عنصری که در داخل آن قرار دارد تورفتگی داریم. این به شما بستگی دارد که سبک قالب بندی را انتخاب کنید (مثلاً چند فاصله برای هر سطح از تورفتگی)، اما باید قالب بندی آن را در نظر بگیرید.

ارجاعات نهاد: شامل کاراکترهای خاص در HTML

در HTML، کاراکترهای <، >،”، و & کاراکترهای خاصی هستند. آنها بخشی از نحو HTML هستند. پس چگونه یکی از این کاراکترهای خاص را در متن خود قرار دهید؟ به عنوان مثال، اگر می خواهید از یک متن استفاده کنید. علامت آمپرسند یا کمتر از آن، و آن را به عنوان کد تفسیر نمی کنند.

شما این کار را با ارجاع شخصیت انجام می دهید. اینها کدهای ویژه ای هستند که نشان دهنده کاراکترها هستند تا در این شرایط دقیق استفاده شوند. هر مرجع کاراکتر با علامت علامت (&) شروع می شود و با نقطه ویرگول (;) به پایان می رسد.

در مثال زیر دو پاراگراف وجود دارد:

در خروجی زنده زیر می بینید که پاراگراف اول اشتباه شده است. مرورگر نمونه دوم <p> را به عنوان شروع یک پاراگراف جدید تفسیر می کند. پاراگراف دوم خوب به نظر می رسد زیرا دارای براکت های زاویه ای با ارجاع کاراکتر است.

توجه: شما نیازی به استفاده از ارجاعات موجود برای هیچ نماد دیگری ندارید، زیرا مرورگرهای مدرن تا زمانی که رمزگذاری کاراکتر HTML شما روی UTF-8 تنظیم شده باشد، نمادهای واقعی را به خوبی مدیریت می کنند.

HTML comments

HTML مکانیزمی برای نوشتن نظرات در کد دارد. مرورگرها نظرات را نادیده می گیرند و در واقع نظرات را برای کاربر نامرئی می کنند. هدف از کامنت ها این است که به شما این امکان را می دهد که برای توضیح منطق یا کدگذاری خود، یادداشت هایی را در کد قرار دهید. این بسیار مفید است اگر پس از دوری طولانی مدت به یک پایگاه کد بازگردید که آن را کاملاً به خاطر نمی آورید. به همین ترتیب، نظرات بسیار ارزشمند هستند زیرا افراد مختلف در حال ایجاد تغییرات و به روز رسانی هستند.

برای نوشتن یک نظر HTML، آن را در نشانگرهای ویژه <– و –!> بپیچید. مثلا:

شما به پایان مقاله رسیدید! امیدواریم از گشت و گذار خود در زمینه اصول HTML لذت برده باشید.

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