بویلرپلیت HTML بعد از پنج سال آپدیت شد
فرانتاند
سئوخلاصهٔ کامل‌تر
منوئل ماتوزوویچ پنج سال پیش بویلرپلیت HTMLش رو منتشر کرده بود، یعنی همون اسکلت ثابتی که هر پروژه رو باهاش شروع می‌کنه، و حالا نسخهٔ به‌روزشده‌شو گذاشته. خودش می‌گه تو این پنج سال تو HTML چیزهای زیادی عوض شده و وقتشه. مقاله اول کل سند رو نشون می‌ده و بعد خط‌به‌خط توضیح می‌ده هر عنصر چیه، و کنار هر کدوم نوشته required، essential یا optional تا معلوم باشه کجا مجبوری و کجا سلیقه‌ایه.
هستهٔ سند این چند خطه:
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="text-scale" content="scale">
<title>Unique page title - My Site</title>صفت lang روی عنصر html زبان طبیعی صفحه رو تعیین می‌کنه و نویسنده می‌گه یکی از مهم‌ترین صفت‌های HTMLه، چون کلی رفتار مرورگر و ابزارهای دسترسی‌پذیری بهش وابسته‌ست. کلاس no-js هم با یه اسکریپت کوچیک تو head به js تبدیل میشه تا بشه حالت بدون جاوااسکریپت رو استایل داد، و به گفتهٔ نویسنده این روش از فیچر scripting توی CSS قابل‌اتکاتره. charset هم باید قبل از title بیاد وگرنه ممکنه کاراکترهای عنوان خراب بشن.
دوتا نکتهٔ viewport هم عوض شده. نویسنده می‌گه initial-scale=1 دیگه لازم نیست و فقط به‌خاطر نسخه‌های قدیمی iOS و اندروید بود، هرچند اضافه‌کردنش ضرری نداره. در عوض متا تگ تازهٔ text-scale رو معرفی می‌کنه: مرورگرهای موبایل به‌طور پیش‌فرض سایز فونتی که تو سیستم‌عامل تنظیم کردی رو رعایت نمی‌کنن و این تگ اینو عوض می‌کنه. تأکید می‌کنه بدون تست کپی‌پیستش نکنی، چون ممکنه لایوتت رو بشکنه.
برای favicon نویسنده هم فایل ico و هم svg رو لینک می‌کنه. طبق تست خودش روی iOS 18، به‌محض اینکه آیکون SVG تعریف کنی مرورگر دیگه به favicon.ico ریشه برنمی‌گرده و اصلاً هیچ آیکونی نشون نمی‌ده؛ پس اگه مرورگرهای قدیمی برات مهمن، باید هر دو رو بذاری. سافاری از نسخهٔ ۲۶ از favicon اس‌وی‌جی پشتیبانی می‌کنه و مزیت SVG اینه که مقیاس‌پذیره و میشه توش با prefers-color-scheme نسخهٔ دارک‌مود ساخت.
چندتا تگ تازه هم به لیست اضافه شده: یه link با rel="alternate" و type="text/markdown" که به نسخهٔ مارک‌داون همون صفحه اشاره می‌کنه، چون به گفتهٔ نویسنده LLMها با مارک‌داون بهتر کار می‌کنن و توکن کمتری مصرف میشه؛ تگ fediverse:creator که زیر لینک‌های به‌اشتراک‌گذاشته‌شده تو ماستودون اسم نویسنده رو می‌آره؛ و لینک site.standard.publication برای انتشار تو اتمسفر. دربارهٔ theme-color هم می‌گه فعلاً فقط مرورگرهای کرومیومی روی اندروید پشتیبانی می‌کنن و سافاری از نسخهٔ ۲۶ به‌جاش رنگ پس‌زمینهٔ body رو برمی‌داره.
نکات کلیدی:
- به گفتهٔ نویسنده initial-scale=1 دیگه لازم نیست و فقط برای نسخه‌های قدیمی iOS و اندروید بود.
- متا تگ text-scale باعث میشه مرورگر موبایل سایز فونت سیستم‌عامل رو رعایت کنه.
- سافاری از نسخهٔ ۲۶ favicon اس‌وی‌جی رو پشتیبانی می‌کنه و apple-touch-icon هم ۱۸۰×۱۸۰ پیکسله.
- تو site.webmanifest آیکون‌های ۱۹۲ و ۵۱۲ پیکسلی لازمن و نسخهٔ maskable باید تو ۸۰ درصد مرکزی جا بشه.
- توضیحات متا رو موتورهای جستجو حدود ۱۵۵ تا ۱۶۰ کاراکتر می‌برن و تضمینی هم نیست که ازش استفاده کنن.
