HyperText Markup Language یا HTML یک زبان نشانه‌گذاری است که از آن برای ساخت محتوا و منطق صفحات وب استفاده می‌شود. یک صفحه‌ی وب متشکل از عنصرهای HTML است که هر یک معنا و مفهوم خاصی دارند. بعضی از آن‌ها به تنهایی به کار می‌روند، در حالی که بعضی دیگر می‌توانند به صورت تودرتو استفاده شوند تا از محتوای شما یک ساختار پیچیده بسازند. مرورگرهای وب برای ساخت محتوای یک صفحه، کد HTML مربوط به آن را تفسیر می‌کنند، در حالی که برای نحوه‌ی نمایش آن، محتوای سند Cascading Style Sheets یا CSS را تفسیر می‌کنند.
این مقاله به بحث‌های مقدماتی درباره‌ی HTML می‌پردازد و به شما کمک می‌کند که نحوه‌ی کارکرد آن و چگونگی ساخت یک صفحه‌ی وب ساده را بیاموزید. اگر شما با کلیک کردن قسمتی از صفحه به بخشی دیگر هدایت می‌شوید یا درباره‌ی ساخت فهرست‌های نقطه‌دار کنجکاور هستید، این مقاله جایی است که می‌توانید سفر خود در دنیای HTML را آغاز کنید.
عنصرها - پایه‌ای‌ترین بلاک‌های سازنده
واحد پایه‌ای اطلاعات در HTML مفهومی است به نام عنصر. عنصرها به این پرسش پاسخ می‌دهند که "این چه نوع اطلاعاتی است؟" و معنای محتوای خود را تعیین می‌کنند. بعضی از عنصرها معنای بسیار دقیقی دارند، برای نمونه "این یک تصویر است"، "این یک سرآیند است" یا "این یک فهرست مرتب است" در حالی که بعضی دیگر معنای بسیار مشخصی ندارند، برای نمونه "این بخشی از صفحه است" یا "این بخشی از یک متن است" و بعضی دیگر نیز به دلایل فنی مورد استفاده قرار می‌گیرند. اما در هر صورت تمامی آن‌ها به دلایلی معنایی انتخاب شده‌اند.
اکثر عنصرها می‌توانند دربرگیرنده‌ی سایر عنصرها باشند، تا یک ساختار سلسله مراتبی را تشکیل دهند، درختی به نام DOM یا Document Object Model. چیزی بیش از 100 عنصر مختلف در HTML تعریف شده است.
برچسب‌ها
HTML از متن خام به عنوان مبدا استفاده می‌کند و با چسباندن علامت (>) قبل از آن و علامت (<) بعد از آن معنای خاصی به متن مورد نظر می‌دهد. چنین نشانه‌گذاری یک برچسب نامیده می‌شود. این یک نمونه‌ی ساده است:
<p>This is a text within a paragraph.</p>
در مثال بالا یک برچسب آغازین و یک برچسب پایانی وجود دارد. برچسب‌های پایانی از همان نام برچسب آغازین استفاده می‌کنند، اما همچنین بعد از علامت (>) بلافاصله از یک خط مورب نیز بهره می‌گیرند. بیشتر عنصرهای HTML با هر دو برچسب آغازین و پایانی نوشته می‌شوند. برچسب‌های آغازین و پایانی بایستی که به درستی و به صورت تودرتو نوشته شوند، به این معنی که برچسب‌های پایانی باید بر خلاف برچسب‌های آغازین نوشته شوند. برای نوشتن کدی معتبر رعایت اصل تودرتو بودن عنصرها قانونی است که باید از آن تبعیت کرد.
این یک نمونه از کدی معتبر است:
<em>I <strong>really</strong> mean that</em>.
این یک نمونه از کدی نامعتبر است:
Invalid: <em>I <strong>really</em> mean that</strong>.
تا قبل از اتخاذ قوانین تجزیه‌ی HTML5، مرورگرها کد نامعتبر را به یک روش واحد تفسیر نمی‌کردند که این عمل باعث ایجاد نتایج مختلف می‌شد. مرورگرها در قبال نویسندگان وب بخشندگی نشان می‌دهند، اما متاسفانه هیچ کدام روشی واحد را در قبال برخورد با کدی نامعتبر در پیش نمی‌گیرند. این نتایج مختلف با انتشار آخرین نسخه از مرورگرها به پایان رسیده‌اند، مانند اینترنت اکسپلورر 10، فایرفاکس 4، اپرا 11، کروم 18 یا سافاری 5، چرا که تمامی آن‌ها از استانداری جدید و واحد در برخورد با کدهای نامعتبر استفاده می‌کنند. مشاهده‌ی نتایج کد نامعتبر با یک ساختار مشخصی DOM در تمامی مروگرهای مدرن.
بعضی عنصرها نه شامل متنی هستند و نه می‌توانند سایر عنصرها را در خود جای دهند. این‌ها عنصرهای تهی نام دارند که به برچسب پایانی هیچ نیازی ندارند. برای نمونه:
<meta charset="utf-8">
بعضی افراد علاقه دارند که در انتهای عنصرهای تهی از یک خط مورب استفاده کنند، که استفاده از آن در XHTML ضروری است. در HTML عدم استفاده از آن مشکل فنی به وجود نمی‌آورد و استفاده از آن کاملا به سلیقه و روش شما بستگی دارد.
<meta charset="utf-8" />
صفت‌ها
برچسب آغازین ممکن است شامل اطلاعات اضافی نیز باشد، همان‌طور که در مثال پیش‌رو آمده است. چنین اطلاعاتی به نام صفت شناخته می‌شوند. صفت‌ها معمولا از دو بخش تشکیل می‌شوند:
- نام صفت
- مقدار صفت
تعداد کمی از صفت‌ها فقط می‌توانند یک مقدار داشته باشند. آن‌ها صفت‌های منطقی هستند که ممکن است به نام صفت خلاصه شوند یا یک مقدار خالی را دارا باشند. بنابراین، 3 نمونه‌ی زیر معنای یکسانی دارند:
<input required="required"> <input required=""> <input required>
مقدارهای یک صفت که از یک حرف یا عدد تشکیل می‌شوند می‌توانند به همان صورت نوشته شوند، اما در مورد رشته‌هایی از کاراکترها باید آن‌ها را در میان نقل قول قرار داد که هم می‌توان از نقل قول تک (') یا نقل قول دوگانه (") استفاده کرد. بسیاری از توسعه‌دهندگان تلاش می‌کنند تا همیشه از نقل قول‌ها استفاده کنند تا هیچ ابهامی در کد به وجود نیاید. مثال زیر یک اشتباه رایج است:
<p class=foo bar> (Beware, this probably does not mean what you think it means.)
در مثال بالا مقدار صفت class به صورت "foo bar" مد نظر بود اما از آن‌جایی که نقل قول به کار نرفته است کد مورد نظر به صورت زیر تفسیر می‌شود:
<p class="foo" bar="">
کاراکترهای خاص
از آن‌جایی که علامت‌های کوچکتر و بزرگتر معنای خاصی در HTML دارند برای نشان دادن خود آن‌ها در متن از ترکیبات خاصی استفاده می‌شود که از این نام‌ها به عنوان شناسه یاد می‌شود. شناسه‌ها ممکن است ترکیبی از نام‌ها، اعداد مبنای 10 یا 16 باشند. چهار شناسه‌ی مطرح وجود دارند که در همین ابتدا باید آن‌ها را یاد بگیرید:
- > که بیان‌گر علامت "<" است.
- < که بیان‌گر علامت ">" است.
- & که بیان‌گر علامت "&" است.
- " که بیان‌گر علامت ' " ' است.
شناسه‌های بسیار دیگری در آخرین نسخه از استاندارد HTML وجود دارند که موارد بالا از آن‌جایی که در HTML معنای خاصی دارند از بقیه متمایز هستند. سایر شناسه‌ها برای نمایش آن دسته از مجموعه کاراکترهایی استفاده می‌شوند که به صورت پیش فرض در یک سند وب وجود ندارند.
نوع سند و توضیحات
علاوه بر برچسب‌ها، محتوای متنی و شناسه‌ها، یک سند بایستی همیشه شامل نوع سند در بالای صفحه‌ی HTML باشد. در HTML5 که آخرین استاندارد از HTML است این عنصر به این صورت نوشته می‌شود:
<!DOCTYPE html>
نوع سند تاریخچه‌ای طولانی و پیچیده دارد، اما برای حال همین قدر بدانید که نوع سند به مرورگر می‌گوید که با کد HTML وCSS موجود در صفحه طبق آخرین استانداردهای وضع شده برخورد کند و نه روشی که اینترنت اکسپلورر در دهه‌ی 90 به کار می‌برده است. (مستندات quirks mode را مشاهده کنید)
برای این که به یاد داشته باشید کد شما هم اکنون یا چند ماه بعد از این که آن را ایجاد کردید برای شما یا سایر توسعه‌دهندگان چه معنایی دارد، بایستی که از توضیحات در کد خود استفاده کنید. توضیحات در HTML با یک علامت کوچکتر به اضافه‌ی یک علامت تعجب و به همراه دو خط فاصله آغار می‌شوند و با دو خط فاصله به همراه علامت بزرگتر پایان می‌یابند.
<!-- This is comment text -->
یک سند کامل اما کوچک
با قراردادن مطالب بالا در کنار هم در ادامه به مثال کوچکی از یک سند HTML می‌پردازیم که ساختار سند و عنصرهای به کار رفته‌ی آن در مقاله‌ای جداگانه مورد بررسی قرار می‌گیرند. کد زیر را در یک ویرایشگر متن بنویسید، فایل را با نام myfirstdoc.html ذخیره کنید و با استفاده از یک مرورگر آن را مشاهده کنید. اطمینان یابید که با کدگذاری UTF-8 آن را ذخیره می‌کنید. از آن‌جایی که در این سند هیچ کد CSSای برای جلوه بخشیدن به آن وجود ندارد پس نتیجه‌ی آن نیز بسیار ساده نمایش داده می‌شود، که این یک شروع کوچک اما خوب است.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>A tiny document</title> </head> <body> <h1>Main heading in my document</h1> <!-- Note that it is "h" + "one", not "h" + the letter "l" --> <p>Loook ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p> </body> </html>