HTML
HyperText Markup Language (HTML)HTML زبان نشانهگذاری استاندارد وب است که ساختار و معنای محتوای صفحه را تعریف می‌کند؛ مثل عنوان، بند، پیوند، تصویر، فهرست و فرم. HTML زبان برنامهنویسی نیست، زیرا منطق و الگوریتم اجرا نمی‌کند.
HTML چه نقشی در صفحه وب دارد؟
مرورگر فایل HTML را می‌خواند و آن را به درختی از عناصر تبدیل می‌کند. این عناصر می‌گویند هر بخش چیست: عنوان اصلی، پاراگراف، ناوبری، مقاله یا دکمه. سپس CSS ظاهر را تنظیم و JavaScript رفتار تعاملی را اضافه می‌کند.
مثلاً عبارت بزرگ و ضخیم الزاماً عنوان نیست؛ عنصر <h1> معنای عنوان اصلی را منتقل می‌کند. این معنا برای موتور جست‌وجو، صفحه‌خوان و ابزارهای تبدیل محتوا مهم است. مرجع زندهٔ زبان در استاندارد HTML از WHATWG نگه‌داری میشود.
ساختار ساده یک سند
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>راهنمای قهوه</title>
</head>
<body>
<main>
<h1>راهنمای قهوه</h1>
<p>متن معرفی صفحه.</p>
</main>
</body>
</html>doctype حالت استاندارد مرورگر را فعال می‌کند. ویژگیهای lang و dir زبان و جهت سند را مشخص می‌کنند. بخش head داده‌های صفحه و بخش body محتوای قابل‌نمایش را دارد. بیشتر عناصر تگ آغاز و پایان دارند، اما بعضی مانند img محتوای درونی ندارند.
تگ، عنصر و ویژگی چه فرقی دارند؟
در کد <a href="/about/">درباره ما</a>، عبارت a نام تگ، href ویژگی مقصد و کل ساختار یک عنصر پیوند است. ویژگی باید برای همان عنصر معتبر باشد؛ افزودن نقش یا ویژگی ARIA بی‌دلیل می‌تواند رفتار پیش‌فرض درست را خراب کند.
عناصر معنایی رایج شامل header، nav، main، article، section و footer هستند. div ظرف عمومی است و وقتی عنصر دقیق‌تری وجود ندارد کاربرد دارد. استفاده از تگ مناسب، کد را قابل‌فهم و نگه‌داری را ساده‌تر می‌کند.
درون‌گذاری باید منطقی باشد؛ مثلاً فهرست از ul یا ol و فرزندان li ساخته میشود. بسته‌نشدن یا چیدمان نامعتبر ممکن است مرورگر را وادار به اصلاح خودکار و نتیجه‌ای متفاوت با انتظار کند.
HTML معنایی، سئو و دسترس‌پذیری
عنوان صفحه باید توصیفی باشد و معمولاً یک موضوع اصلی روشن با h1 داشته باشد. تیترها سلسله‌مراتب محتوا را نشان می‌دهند، نه صرفاً اندازهٔ فونت. پیوند باید متن مقصد را توضیح دهد؛ «راهنمای نصب» از «اینجا کلیک کنید» معنادارتر است.
برای تصویر اطلاعاتی، alt کوتاه و معادل کارکرد تصویر لازم است؛ تصویر تزئینی alt="" میگیرد. کنترل قابل کلیک باید button باشد، نه div با رویداد کلیک. فیلد فرم نیز به label مرتبط نیاز دارد. این انتخاب‌ها استفاده با صفحه‌کلید و فناوری کمکی را بهتر می‌کنند.
HTML درست به فهم محتوا کمک می‌کند، اما تگ‌گذاری جادویی تضمین رتبه نیست. کیفیت پاسخ، معماری لینک، سرعت و قابلیت خزش نیز بر سئو اثر دارند.
خطاهای رایج و روش بررسی
- استفاده از تیترها فقط برای بزرگ‌کردن متن؛
- قرار دادن دکمه داخل پیوند یا کنترل‌های تعاملی تو در تو؛
- حذف
labelو اتکا به placeholder در فرم؛ - تکرار یک
idبرای چند عنصر؛ - بازکردن پیوند در تب جدید بدون دلیل یا هشدار؛
- نوشتن ساختار صفحه با تعداد زیادی
divبی‌معنا.
ظاهر صفحه به‌تنهایی کافی نیست. سند را با اعتبارسنج HTML، ناوبری صفحه‌کلید و صفحه‌خوان بررسی کنید. کنسول مرورگر و درخت Accessibility خطاهایی را نشان می‌دهند که در تصویر صفحه پیدا نیستند. در نهایت، کد ساده و استاندارد معمولاً از راه‌حل نمایشی پیچیده پایدارتر است.
پیوند، تصویر و فرم در عمل
پیوند برای رفتن به مقصد و دکمه برای انجام عمل در همان صفحه است. تصویر باید ابعاد مشخص داشته باشد تا هنگام بارگذاری جهش چیدمان ایجاد نکند؛ برای تصویر واکنش‌گرا می‌توان از srcset و picture استفاده کرد. در فرم، نوع فیلد مانند email یا tel به مرورگر در اعتبارسنجی و نمایش صفحه‌کلید مناسب کمک می‌کند.
اعتبارسنجی مرورگر تجربه را بهتر می‌کند، اما امنیت سرور نیست. هر ورودی باید در سمت سرور نیز اعتبارسنجی و خروجی متناسب با زمینه escape شود. همچنین وضعیت خطا باید با متن روشن به فیلد مرتبط شود تا فقط تغییر رنگ پیام را منتقل نکند.
پرسش‌های متداول دربارهٔ HTML
آیا HTML زبان برنامهنویسی است؟
خیر؛ HTML زبان نشانهگذاری برای ساختار و معناست. شرط، حلقه و منطق برنامه معمولاً با JavaScript یا زبان سمت سرور نوشته میشود.
تفاوت تگ و عنصر HTML چیست؟
تگ نشانهای مانند <p> است؛ عنصر معمولاً تگ آغاز، محتوا، تگ پایان و ویژگیهای آن را در بر میگیرد.
آیا می‌توان سایت را فقط با HTML ساخت؟
یک سایت محتوایی ساده بله، اما برای طراحی ظاهری معمولاً CSS و برای تعامل یا دادهٔ پویا JavaScript یا پردازش سمت سرور لازم است.
اصطلاحات هم‌خانوادهٔ HTML و CSS
مشاهدهٔ همه ←برای درک کامل‌تر، این‌ها را هم بخوانید
- برنامهنویسیبرنامهنویسی یعنی تبدیل یک راه‌حل به دنبالهای از دستورهای دقیق که کامپیوتر بتواند اجرا کند. نکتهای که اغلب نادیده گرفته میشود: بخش سخت برنامهنویسی نوشتن کد نیست، بلکه فهمیدن دقیق مسئله و طراحی راه‌حل است.
- الگوریتمالگوریتم دنبالهای متناهی از گامهای دقیق و بدون ابهام است که مسئلهای را حل می‌کند. الگوریتم مستقل از زبان برنامهنویسی است: یک الگوریتم واحد را می‌توان در هر زبانی پیاده کرد، درست مثل دستور پختی که با هر اجاقی قابل اجراست.
- CSSCSS زبان استایل‌دهی وب است که نحوهٔ نمایش عناصر HTML را کنترل می‌کند؛ از رنگ، فونت و فاصله تا چیدمان واکنش‌گرا و انیمیشن. واژهٔ Cascading به قواعدی اشاره دارد که تعارض میان چند سبک را حل می‌کنند.