HTML

DOCTYPE چه کاری انجام می‌دهد؟

DOCTYPE مخفف Document Type (نوع سند) است. DOCTYPE همیشه با یک DTD - مخفف Document Type Definition (تعریف نوع سند) - مرتبط است.

یک DTD نحوه ساختاریافتن اسناد یک نوع خاص را تعریف می‌کند (به عنوان مثال، یک button می‌تواند شامل یک span باشد اما یک div نه)، در حالی که یک DOCTYPE اعلام می‌کند که یک سند فرضی به چه DTD‌ای احترام می‌گذارد (به عنوان مثال، این سند به DTD HTML احترام می‌گذارد).

برای صفحات وب، اعلام DOCTYPE الزامی است. از آن برای اطلاع‌رسانی به عاملان کاربر (user agents) استفاده می‌شود که سند شما به کدام نسخه از مشخصات HTML احترام می‌گذارد. هنگامی که یک عامل کاربر یک DOCTYPE صحیح را تشخیص دهد، حالت بدون ناهنجاری (no-quirks mode) منطبق با این DOCTYPE را برای خواندن سند فعال می‌کند. اگر یک عامل کاربر یک DOCTYPE صحیح را تشخیص ندهد، حالت ناهنجاری (quirks mode) را فعال می‌کند.

اعلام DOCTYPE برای استانداردهای HTML5 <html!DOCTYPE> است.

چگونه یک صفحه را با محتوای چندزبانه سرویس‌دهی می‌کنید؟

من فرض می‌کنم که منظور این سوال رایج‌ترین حالت است، یعنی نحوه سرویس‌دهی یک صفحه با محتوای موجود در چندین زبان، اما محتوای درون صفحه باید فقط در یک زبان ثابت نمایش داده شود.

هنگامی که یک درخواست HTTP به سرور ارسال می‌شود، عامل کاربر درخواست‌کننده معمولاً اطلاعاتی در مورد اولویت‌های زبانی ارسال می‌کند، مانند هدر Accept-Language. سپس سرور می‌تواند از این اطلاعات برای بازگرداندن نسخه‌ای از سند به زبان مناسب در صورت وجود چنین جایگزینی استفاده کند. سند HTML بازگردانده شده نیز باید ویژگی lang را در تگ <html> اعلام کند، مانند <html lang="en">...</html>.

البته این برای اطلاع‌رسانی به موتور جستجو که همان محتوا در زبان‌های مختلف در دسترس است بی‌فایده است، و بنابراین باید از ویژگی hreflang در <head> نیز استفاده کنید. مثلاً <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />

در بک‌اند، نشانه‌گذاری HTML حاوی جایگاه‌های i18n و محتوای زبان خاص ذخیره‌شده در قالب‌های YML یا JSON خواهد بود. سپس سرور به صورت پویا صفحه HTML را با محتوا در آن زبان خاص، معمولاً با کمک یک چارچوب بک‌اند، تولید می‌کند.

هنگام طراحی یا توسعه برای سایت‌های چندزبانه باید مراقب چه چیزهایی باشید؟

  • از ویژگی lang در HTML خود استفاده کنید.
  • هدایت کاربران به زبان مادری‌شان - به کاربر اجازه دهید تا کشور/زبان خود را به راحتی و بدون دردسر تغییر دهد.
  • متن در تصاویر مبتنی بر رستر (مانند png، gif، jpg و غیره)، یک رویکرد مقیاس‌پذیر نیست - قرار دادن متن در یک تصویر هنوز یک روش محبوب برای نمایش فونت‌های زیبا و غیر سیستمی در هر رایانه است. با این حال، برای ترجمه متن تصویر، هر رشته متنی باید یک تصویر جداگانه برای هر زبان ایجاد شود. هر چیزی بیش از تعداد انگشت‌شماری از این جایگزینی‌ها می‌تواند به سرعت از کنترل خارج شود.
  • طول کلمات/جملات محدودکننده - برخی از محتواها هنگام نوشتن به زبانی دیگر ممکن است طولانی‌تر باشند. مراقب مشکلات طرح‌بندی یا سرریز در طراحی باشید. بهتر است از طراحی‌هایی که میزان متن می‌تواند یک طراحی را بسازد یا خراب کند، اجتناب کنید. تعداد کاراکترها در مواردی مانند تیترها، برچسب‌ها و دکمه‌ها مطرح می‌شوند. آنها در متن‌های روان مانند متن اصلی یا نظرات کمتر مشکل‌ساز هستند.
  • به نحوه درک رنگ‌ها توجه داشته باشید - رنگ‌ها در زبان‌ها و فرهنگ‌های مختلف به طور متفاوتی درک می‌شوند. طراحی باید از رنگ به طور مناسب استفاده کند.
  • قالب‌بندی تاریخ‌ها و ارزها - تاریخ‌های تقویمی گاهی اوقات به روش‌های مختلفی ارائه می‌شوند. مثلاً "May 31, 2012" در ایالات متحده در مقابل "31 May 2012" در بخش‌هایی از اروپا.
  • رشته‌های ترجمه‌شده را به هم نچسبانید - کارهایی مانند "The date today is " + date را انجام ندهید. این کار در زبان‌هایی با ترتیب کلمات متفاوت شکسته خواهد شد. به جای آن از یک رشته الگو با جایگزینی پارامترها برای هر زبان استفاده کنید. به عنوان مثال، به دو جمله زیر به ترتیب در انگلیسی و چینی نگاه کنید: I will travel on {% date %} و {% date %} 我会出发. توجه داشته باشید که موقعیت متغیر به دلیل قوانین گرامری زبان متفاوت است.
  • جهت خواندن زبان - در انگلیسی، ما از چپ به راست، از بالا به پایین می‌خوانیم، در ژاپنی سنتی، متن از بالا به پایین، از راست به چپ خوانده می‌شود.
  • مفید - شامل محلی‌سازی در مسیر (به عنوان مثال en_US, zh_CN و غیره).

ویژگی‌های `data-` برای چه چیزی خوب هستند؟

قبل از اینکه چارچوب‌های جاوا اسکریپت محبوب شوند، توسعه‌دهندگان فرانت‌اند از ویژگی‌های data- برای ذخیره داده‌های اضافی در خود DOM استفاده می‌کردند، بدون نیاز به هک‌های دیگر مانند ویژگی‌های غیر استاندارد یا ویژگی‌های اضافی در DOM. هدف آن ذخیره داده‌های سفارشی خصوصی برای صفحه یا برنامه است که هیچ ویژگی یا عنصر مناسب‌تری برای آنها وجود ندارد.

امروزه، استفاده از ویژگی‌های data- به طور کلی توصیه نمی‌شود. یکی از دلایل این است که کاربران می‌توانند به راحتی ویژگی داده را با استفاده از inspect element در مرورگر تغییر دهند. مدل داده بهتر است در خود جاوا اسکریپت ذخیره شود و از طریق اتصال داده، احتمالاً از طریق یک کتابخانه یا چارچوب، با DOM به روز بماند.

با این حال، یکی از کاربردهای کاملاً معتبر ویژگی‌های داده، اضافه کردن یک قلاب برای چارچوب‌های تست end to end مانند Selenium و Capybara بدون نیاز به ایجاد کلاس‌های بی‌معنی یا ویژگی‌های ID است. عنصر نیاز به راهی برای پیدا شدن توسط یک مشخصات Selenium خاص دارد و چیزی مانند data-selector='the-thing' یک راه معتبر برای انجام این کار است بدون اینکه نشانه‌گذاری معنایی را در غیر این صورت پیچیده کند.

HTML5 را به عنوان یک پلتفرم وب باز در نظر بگیرید. اجزای اصلی HTML5 کدامند؟

  • معناشناسی (Semantics) - به شما امکان می‌دهد محتوای خود را با دقت بیشتری توصیف کنید.
  • اتصال (Connectivity) - به شما امکان می‌دهد به روش‌های جدید و نوآورانه با سرور ارتباط برقرار کنید.
  • آفلاین و ذخیره‌سازی (Offline and storage) - به صفحات وب امکان می‌دهد داده‌ها را به صورت محلی در سمت کلاینت ذخیره کرده و به طور کارآمدتر آفلاین کار کنند.
  • چندرسانه‌ای (Multimedia) - ویدئو و صدا را به شهروندان درجه یک در وب باز تبدیل می‌کند.
  • گرافیک و جلوه‌های دوبعدی/سه‌بعدی (2D/3D graphics and effects) - طیف بسیار متنوع‌تری از گزینه‌های ارائه را امکان‌پذیر می‌سازد.
  • عملکرد و یکپارچگی (Performance and integration) - بهینه‌سازی سرعت بیشتر و استفاده بهتر از سخت‌افزار رایانه را فراهم می‌کند.
  • دسترسی به دستگاه (Device access) - امکان استفاده از دستگاه‌های ورودی و خروجی مختلف را فراهم می‌کند.
  • استایل‌دهی (Styling) - به نویسندگان امکان می‌دهد تم‌های پیچیده‌تری بنویسند.

تفاوت بین `cookie`، `sessionStorage` و `localStorage` را توضیح دهید.

تمام فناوری‌های ذکر شده در بالا، مکانیزم‌های ذخیره‌سازی کلید-مقدار در سمت کلاینت هستند. آنها فقط قادر به ذخیره مقادیر به صورت رشته هستند.

| | cookie | localStorage | sessionStorage | | --- | --- | --- | --- | | آغازگر | کلاینت یا سرور. سرور می‌تواند از هدر Set-Cookie استفاده کند | کلاینت | کلاینت | | انقضا | به صورت دستی تنظیم می‌شود | برای همیشه | با بسته شدن تب | | ماندگاری در جلسات مرورگر | بستگی به تنظیم تاریخ انقضا دارد | بله | خیر | | ارسال به سرور با هر درخواست HTTP | کوکی‌ها به طور خودکار از طریق هدر Cookie ارسال می‌شوند | خیر | خیر | | ظرفیت (به ازای هر دامنه) | 4 کیلوبایت | 5 مگابایت | 5 مگابایت | | دسترسی‌پذیری | هر پنجره | هر پنجره | همان تب |

نکته: اگر کاربر تصمیم به پاک کردن داده‌های مرورگر از طریق هر مکانیزمی که توسط مرورگر ارائه شده است بگیرد، این کار هر cookie، localStorage یا sessionStorage ذخیره شده را پاک خواهد کرد. مهم است که هنگام طراحی برای ماندگاری محلی، به خصوص در مقایسه با جایگزین‌هایی مانند ذخیره‌سازی سمت سرور در پایگاه داده یا مشابه آن (که البته با وجود اقدامات کاربر نیز ماندگار خواهد بود)، این را در نظر داشته باشید.

تفاوت بین `<script>`، `<script async>` و `<script defer>` را توضیح دهید.

  • <script> - تجزیه HTML مسدود می‌شود، اسکریپت فورا بارگذاری و اجرا می‌شود، تجزیه HTML پس از اجرای اسکریپت از سر گرفته می‌شود.
  • <script async> - اسکریپت به موازات تجزیه HTML بارگذاری می‌شود و به محض در دسترس بودن اجرا می‌شود (احتمالاً قبل از تکمیل تجزیه HTML). از async زمانی استفاده کنید که اسکریپت مستقل از هر اسکریپت دیگری در صفحه باشد، به عنوان مثال، تحلیل و آنالیز.
  • <script defer> - اسکریپت به موازات تجزیه HTML بارگذاری می‌شود و زمانی که صفحه به طور کامل تجزیه شد، اجرا می‌شود. اگر چندین مورد از آنها وجود داشته باشد، هر اسکریپت به ترتیب مواجهه آنها در سند اجرا می‌شود. اگر یک اسکریپت به یک DOM کاملاً تجزیه شده متکی باشد، ویژگی defer در اطمینان از تجزیه کامل HTML قبل از اجرا مفید خواهد بود. یک اسکریپت deferred نباید شامل document.write باشد.

نکته: ویژگی‌های async و defer برای اسکریپت‌هایی که ویژگی src ندارند، نادیده گرفته می‌شوند.

چرا به طور کلی قرار دادن تگ‌های `<link>` مربوط به CSS بین `<head></head>` و تگ‌های `<script>` مربوط به JS درست قبل از `</body>` یک ایده خوب است؟ آیا استثنائی می‌شناسید؟

قرار دادن <link> ها در <head>

قرار دادن <link> ها در <head> بخشی از مشخصات صحیح در ساخت یک وب‌سایت بهینه‌شده است. هنگامی که یک صفحه برای اولین بار بارگذاری می‌شود، HTML و CSS به طور همزمان تجزیه می‌شوند؛ HTML DOM (Document Object Model) را ایجاد می‌کند و CSS CSSOM (CSS Object Model) را ایجاد می‌کند. هر دو برای ایجاد عناصر بصری در یک وب‌سایت مورد نیاز هستند، که به زمان‌بندی سریع "اولین رندر معنادار" کمک می‌کند. این رندر تدریجی یک دسته بهینه‌سازی است که سایت‌ها در امتیازات عملکرد خود با آن اندازه‌گیری می‌شوند. قرار دادن شیوه نامه‌ها در پایین سند چیزی است که رندر تدریجی را در بسیاری از مرورگرها ممنوع می‌کند. برخی مرورگرها رندر را مسدود می‌کنند تا از نیاز به بازآرایی عناصر صفحه در صورت تغییر استایل آنها جلوگیری کنند. کاربر سپس به تماشای یک صفحه سفید خالی گیر می‌کند. در مواقع دیگر ممکن است فلش‌هایی از محتوای بدون استایل (FOUC) وجود داشته باشد که یک صفحه وب را بدون اعمال استایل نشان می‌دهد.

قرار دادن <script> ها درست قبل از </body>

تگ‌های <script> تجزیه HTML را در حین دانلود و اجرا مسدود می‌کنند که می‌تواند صفحه شما را کند کند. قرار دادن اسکریپت‌ها در پایین به HTML اجازه می‌دهد تا ابتدا تجزیه و به کاربر نمایش داده شود.

یک استثنا برای موقعیت‌یابی <script> ها در پایین، زمانی است که اسکریپت شما حاوی document.write() باشد، اما امروزه استفاده از document.write() یک روش خوب نیست. همچنین، قرار دادن <script> ها در پایین به این معنی است که مرورگر نمی‌تواند دانلود اسکریپت‌ها را تا زمانی که کل سند تجزیه شود شروع کند. این تضمین می‌کند که کد شما که نیاز به دستکاری عناصر DOM دارد، خطا ایجاد نکند و کل اسکریپت را متوقف نکند. اگر نیاز دارید <script> ها را در <head> قرار دهید، از ویژگی defer استفاده کنید که همان اثر اجرای اسکریپت تنها پس از تجزیه HTML را به دست می‌آورد اما مرورگر می‌تواند اسکریپت را زودتر دانلود کند.

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

تگ‌های <head> و <body> اکنون اختیاری هستند

طبق مشخصات HTML5، برخی از تگ‌های HTML مانند <head> و <body> اختیاری هستند. راهنمای استایل گوگل حتی حذف آنها را برای صرفه‌جویی در بایت‌ها توصیه می‌کند. با این حال، این عمل هنوز به طور گسترده‌ای پذیرفته نشده است و افزایش عملکرد احتمالی ناچیز است و برای اکثر سایت‌ها احتمالاً اهمیت چندانی نخواهد داشت.

رندرینگ پیشرو (progressive rendering) چیست؟

رندرینگ پیشرو (Progressive rendering) نامی است که به تکنیک‌های مورد استفاده برای بهبود عملکرد یک صفحه وب (به ویژه، بهبود زمان بارگذاری درک شده) برای نمایش محتوا در اسرع وقت داده می‌شود.

در دوران قبل از اینترنت پرسرعت بسیار رایج‌تر بود، اما هنوز هم در توسعه مدرن مورد استفاده قرار می‌گیرد زیرا اتصالات داده تلفن همراه به طور فزاینده‌ای محبوب (و غیرقابل اعتماد) می‌شوند!

نمونه‌هایی از این تکنیک‌ها:

  • بارگذاری تنبل تصاویر (Lazy loading of images) - تصاویر در صفحه به یکباره بارگذاری نمی‌شوند. جاوا اسکریپت برای بارگذاری یک تصویر زمانی که کاربر به بخشی از صفحه که تصویر را نمایش می‌دهد، اسکرول می‌کند، استفاده خواهد شد.
  • اولویت‌بندی محتوای قابل مشاهده (یا رندرینگ بالای خط) - فقط حداقل CSS/محتوا/اسکریپت‌های لازم برای مقدار صفحه‌ای که در مرورگر کاربر ابتدا رندر می‌شود را شامل شود تا در اسرع وقت نمایش داده شود، سپس می‌توانید از اسکریپت‌های deferred استفاده کنید یا به رویداد DOMContentLoaded/load گوش دهید تا منابع و محتوای دیگر را بارگذاری کنید.
  • قطعات HTML ناهمزمان (Async HTML fragments) - ارسال بخش‌هایی از HTML به مرورگر در حین ساخت صفحه در بک‌اند. جزئیات بیشتر در مورد این تکنیک را می‌توان یافت.

چرا از ویژگی `srcset` در تگ تصویر استفاده می‌کنید؟ فرآیندی که مرورگر هنگام ارزیابی محتوای این ویژگی استفاده می‌کند را توضیح دهید.

شما از ویژگی srcset زمانی استفاده می‌کنید که می‌خواهید تصاویر مختلفی را به کاربران بر اساس عرض صفحه نمایش دستگاه آنها ارائه دهید - ارائه تصاویر با کیفیت بالاتر به دستگاه‌های دارای صفحه نمایش رتینا تجربه کاربری را افزایش می‌دهد در حالی که ارائه تصاویر با وضوح پایین‌تر به دستگاه‌های پایین‌رده عملکرد را افزایش داده و هدر رفت داده را کاهش می‌دهد (زیرا ارائه یک تصویر بزرگتر تفاوت قابل مشاهده‌ای نخواهد داشت). به عنوان مثال: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> به مرورگر می‌گوید که بسته به وضوح مشتری، گرافیک .jpg کوچک، متوسط یا بزرگ را نمایش دهد. مقدار اول نام تصویر و دومی عرض تصویر بر حسب پیکسل است. برای عرض دستگاه 320px، محاسبات زیر انجام می‌شود:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

اگر وضوح مشتری 1x باشد، 1.5625 نزدیک‌ترین است، و 500w مربوط به small.jpg توسط مرورگر انتخاب خواهد شد.

اگر وضوح رتینا (2x) باشد، مرورگر از نزدیک‌ترین وضوح بالای حداقل استفاده خواهد کرد. به این معنی که 500w (1.5625) را انتخاب نمی‌کند زیرا بزرگتر از 1 است و ممکن است تصویر بد به نظر برسد. سپس مرورگر تصویری را با نسبت حاصله نزدیک‌تر به 2 که 1000w (3.125) است، انتخاب می‌کند.

srcset ها مشکلی را حل می‌کنند که شما می‌خواهید فایل‌های تصویری کوچکتر را به دستگاه‌های با صفحه نمایش باریک ارائه دهید، زیرا آنها به تصاویر عظیمی مانند نمایشگرهای دسکتاپ نیاز ندارند - و همچنین به صورت اختیاری می‌خواهید تصاویر با وضوح متفاوت را به صفحه‌های با چگالی بالا/چگالی پایین ارائه دهید.

آیا قبلا از زبان‌های قالب‌بندی HTML متفاوتی استفاده کرده‌اید؟

بله، Pug (قبلاً Jade)، ERB، Slim، Handlebars، Jinja، Liquid، و EJS فقط برای نام بردن چند مورد. به نظر من، آنها کم و بیش یکسان هستند و قابلیت‌های مشابهی از محتوای فرار و فیلترهای مفید برای دستکاری داده‌های قابل نمایش را ارائه می‌دهند. اکثر موتورهای قالب‌بندی نیز به شما اجازه می‌دهند فیلترهای خود را در صورت نیاز به پردازش سفارشی قبل از نمایش تزریق کنید.

تفاوت بین canvas و SVG چیست؟

Canvas بر اساس پیکسل‌ها کار می‌کند و با پیکسل‌ها سروکار دارد، در حالی که SVG بر اساس وکتور است و از توصیفات ریاضی اشکال استفاده می‌کند. Canvas از ترسیم امری (imperative drawing) استفاده می‌کند، که در آن هر مرحله با جاوا اسکریپت مشخص می‌شود، که برای گرافیک‌های پویا و تعاملی مانند انیمیشن‌ها و بازی‌ها ایده‌آل است.

برعکس، SVG از ترسیم اعلانی (declarative drawing) استفاده می‌کند، با اشکال و مسیرهایی که مستقیماً در HTML تعریف می‌شوند، و آن را قابل دسترس‌تر و سئو دوستانه‌تر می‌کند. Canvas برای صحنه‌های پیچیده به دلیل سربار کمتر آن بهینه است، اما مقیاس‌بندی ممکن است منجر به از دست دادن کیفیت تصویر شود. SVG، مستقل از وضوح بودن، بدون افت کیفیت با اندازه‌های مختلف صفحه سازگار می‌شود.

در نهایت، canvas برای گرافیک‌های پویا و با کارایی بالا مناسب است، در حالی که SVG در گرافیک‌های مقیاس‌پذیر و مستقل از وضوح، با مزایای ذاتی دسترسی و سئو برتری دارد.

عناصر خالی در HTML چه هستند؟

عناصر خالی در HTML، عناصری هستند که هیچ محتوایی بین تگ‌های باز و بسته خود ندارند. در عوض، آنها تگ‌های خودبسته (self-closing) هستند، به این معنی که یک علامت اسلش رو به جلو (/) قبل از براکت زاویه‌ای بسته (>) دارند. برخی از مثال‌های رایج عناصر خالی عبارتند از:

  • <img>: برای جاسازی تصاویر در سند استفاده می‌شود.
  • <input>: برای دریافت ورودی کاربر استفاده می‌شود.
  • <br>: برای قرار دادن شکست خط یا شکست خطوط اجباری استفاده می‌شود.
  • <hr>: برای ایجاد خطوط افقی یا جداکننده‌ها استفاده می‌شود.