سه لایهٔ وب را جدا بشناس
HTML ساختار، CSS ظاهر و JavaScript رفتار را کنترل می‌کند. برای اتصال فایل CSS از link در head و برای اسکریپت خارجی معمول از script با defer استفاده کن. فایل‌ها باید واقعاً در مسیر اعلام‌شده موجود باشند.
<head>
<meta charset="utf-8">
<title>کارگاه</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>
defer برای اسکریپت کلاسیک خارجی، اجرا را تا پس از پردازش سند عقب می‌اندازد و ترتیب اسکریپت‌های defer را حفظ می‌کند. async با آماده‌شدن فایل اجرا می‌شود و ترتیب را تضمین نمی‌کند؛ برای کد وابسته به عناصر صفحه بی‌دلیل انتخابش نکن. script با type="module" برای ماژول‌های JavaScript است و رفتار بارگذاری مخصوص خود را دارد. style می‌تواند CSS درون سند نگه دارد، اما فایل جدا برای چند صفحه نگهداری آسان‌تری دارد.
noscript محتوای جایگزین برای زمانی است که اسکریپت اجرا نمی‌شود. محتوای اصلی و لینک‌ها را تا جای ممکن بدون JavaScript هم قابل‌استفاده نگه دار.
<template id="card-template">
<article class="card"><h2>عنوان کارت</h2></article>
</template>
<noscript><p>برای قابلیت‌های پویا JavaScript را فعال کن.</p></noscript>
محتوای template معمولی بلافاصله نمایش داده نمی‌شود؛ یک الگوی غیرفعال برای استفادهٔ بعدی با JavaScript است. Web Components و slot برای اجزای سفارشی و Shadow DOM به کار می‌روند؛ یادگیری آن‌ها به JavaScript نیاز دارد و شرط تکمیل این دوره نیست. data-* هم ذخیرهٔ اطلاعات اختصاصی است و خودکار رفتار نمی‌سازد.
منبع تکمیلی: template در MDN.