HTML نقطه‌ی شروع ورود به دنیای وب است؛ زبانی که پشت ظاهر هر سایت قرار دارد. در این مقاله، با مفاهیم پایه و ساختار HTML به‌زبان ساده آشنا می‌شوید.

مروری بر تاریخچه وب و تولد HTML


تاریخچه بوجود آمدن وب سایت ها و زبان برنامه نویسی HTML


برای بسیاری از ما، تصور دنیایی بدون وب سخت است، ولی خیلی از ما هم دنیای بدون وب را به یاد داریم. چون تا اوایل دهه ۹۰ میلادی اکثریت قریب به اتفاق مردم هیچ ایده ای از وب سایت در ذهن خود نداشتند. در سال ۱۹۸۹، “تیم برنرز-لی”، دانشمند سازمان CERN، ایده‌ی هایپرتکست را معرفی کرد تا پژوهشگران بتوانند اطلاعات را بدون ارسال ایمیل با هم به اشتراک بگذارند. حتی در آن زمان هم هیچ‌کس دوست نداشت با یک صندوق ورودی پُر سروکله بزند.

او همچنین نرم‌افزار اولین وب‌سرور را ساخت؛ مکانی مرکزی برای ذخیره فایل‌ها، و نخستین کلاینت وب یا همان مرورگر را طراحی کرد که برای مشاهده آن فایل‌ها استفاده می‌شد. این اقدامات به خلق “شبکه جهانی وب” منجر شد و اولین وب سایت جهان منتشر شد اگر میخواهید اطلاعات بیشتری در مورد تاریخچه وب داشته باشید وب سایت home.cern اطلاعات مفیدی به شما میدهد

نگاهی خلاصه به زبان های برنامه نویسی فرانت اند و بک اند

یادتان باشد که وب در ابتدا برای به‌اشتراک‌گذاری اسناد متنی ساخته شد، اما از آن زمان تاکنون بسیار توسعه یافته، از جمله معرفی زبان‌های جدید وب.

در این مقاله، ما روی HTML تمرکز خواهیم کرد؛ یکی از زبان‌هایی که کنترل می‌کند شما در مرورگر چه چیزی می‌بینید. به این زبان‌ها اصطلاحاً زبان‌های سمت کاربر (front-end) می‌گویند و شامل HTML، CSS و JavaScript هستند.

HTML مخفف Hyper Text Markup Language است و برای قالب‌بندی محتوا و ایجاد پیوندهای قابل کلیک برای جابجایی بین صفحات اینترنتی استفاده می‌شود.
CSS یک زبان شیوه‌نامه‌ای (Style Sheet) است که برای تعریف ظاهر بصری، چیدمان و سبک کلی عناصر HTML به‌کار می‌رود.
JavaScript یک زبان اسکریپت‌نویسی است که برای افزودن قابلیت‌های تعاملی به صفحات وب استفاده می‌شود.

زبان‌های سمت سرور (back-end) نیز برای مدیریت عملکردهای پشت‌صحنه، مثل مدیریت پایگاه داده یا احراز هویت کاربران استفاده می‌شوند.
نمونه‌هایی از زبان‌های بک‌اند عبارتند از

  • PHP،
  • Ruby،
  • Java (که با JavaScript فرق دارد)،
  • و Python.

به‌طور سنتی، زبان‌های فرانت‌اند و بک‌اند کاملاً از هم جدا بودند؛ کد فرانت‌اند در مرورگر اجرا می‌شد، کد بک‌اند روی سرور. اما با معرفی فریم‌ورک‌هایی بر پایه JavaScript مانند Node.js، React و Angular، حالا کسانی که JavaScript بلدند می‌توانند کارهایی را انجام دهند که قبلاً مختص زبان‌های سمت سرور بود.

این محو شدن مرزها باعث ظهور برنامه‌نویس فول‌استک شده؛ کسی که هم در فرانت‌اند و هم بک‌اند مهارت دارد. البته زبان‌ها و میزان دانش موردنیاز بسته به پروژه متفاوت است.

شاید با خودتان فکر میکنید با وجود هوش مصنوعی و یا سایت هایی مانند شاپیفای دیگر چه نیازی به یادگیری زبان برنامه نویسی وجود دارد

خب، من دوست دارم به AI به چشم یک دستیار شخصی نگاه کنم؛ ابزاری که کمک‌تان می‌کند یاد بگیرید و مشکلات‌تان را حل کنید، ولی جایگزین یادگیری نمی‌شود. AI همیشه دقیق نیست، بنابراین داشتن مقداری دانش کمک می‌کند تشخیص دهید کِی مفید است و کِی نه.

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

شاید یک روز در یکی از همین شرکت‌ها کار کنید یا حتی شرکت خودتان را راه بیندازید و محصولات این سرویس‌ها را بسازید. در آن صورت، حتماً باید با این زبان‌ها آشنا باشید. حتی ممکن است شما کسی باشید که در آینده فناوری‌های جدید را خلق می‌کند.

ساختار یک وب‌سایت

یک وب‌سایت در اصل مجموعه‌ای از فایل‌ها و پوشه‌هاست که شامل محتوای سایت، کدها، شیوه‌نامه‌ها (CSS)، تصاویر و… هستند. این فایل‌ها باید ساختار منظمی داشته باشند تا بتوانند از یکدیگر اطلاعات بگیرند.

همه پروژه‌ها با یک پوشه اصلی (root folder) شروع می‌شوند که شامل تمام فایل‌های مربوط به سایت است. به پوشه‌ها گاهی “دایرکتوری” هم گفته می‌شود. می‌توان گفت “پوشه” جنبه بصری دارد و “دایرکتوری” اصطلاح فنی برای سیستم فایل است، اما هر دو به‌جای هم استفاده می‌شوند.

فایل‌های HTML باید با پسوند .html ذخیره شوند.
شما می‌توانید CSS و JavaScript را مستقیماً داخل فایل HTML بنویسید، اما معمولاً آن‌ها را جداگانه و با پسوندهای .css و .js ذخیره می‌کنند.

انواع دیگری از فایل‌ها نیز می‌توانند به وب‌سایت اضافه شوند، مثل تصاویر، ویدیوها و فایل‌های صوتی.

در وب‌سایت‌های ساده، فایل‌های HTML معمولاً در پوشه اصلی قرار دارند، و بقیه فایل‌ها در زیرپوشه‌های مرتبط.

در پروژه‌های بزرگ‌تر، تعداد بیشتری زیرپوشه برای نظم بیشتر استفاده می‌شود.

اصول نام گذاری فایل های HTML , ادرس صفحات چیست ؟

لینک‌ دادن به فایل‌های مختلف بخش مهمی از ساخت سایت است، بنابراین رعایت اصول نام‌گذاری اهمیت دارد:

  • از فاصله در نام فایل‌ها اجتناب کنید؛ ممکن است باعث ایجاد خطا در سرور شود.
  • به‌جای فاصله از خط تیره (-) یا زیرخط (_) استفاده کنید؛ البته راهنمای SEO گوگل خط تیره را توصیه می‌کند.
  • از حروف کوچک استفاده کنید؛ برخی سرورها به بزرگی و کوچکی حروف حساس هستند.
  • نام‌ها را کوتاه، ولی معنی‌دار و توصیفی انتخاب کنید؛ هم برای نظم بهتر و هم برای سئو.

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

وقتی می‌خواهیم یک وب‌سایت را ساختاردهی کنیم، دو رویکرد اصلی وجود دارد:

💡 1. وب‌سایت تک‌صفحه‌ای (Single Page)

در این روش، تمام محتوا در یک فایل HTML قرار می‌گیرد و با استفاده از بخش‌های جداگانه (sections) سازمان‌دهی می‌شود.
مثلاً بخش‌هایی مثل:

  • درباره‌ی من
  • مهارت‌ها
  • نمونه‌کارها
  • تماس با من

همه در همان یک صفحه وجود دارند و معمولاً با اسکرول کردن یا کلیک روی منو به همان بخش در صفحه هدایت می‌شویم.

💡 2. وب‌سایت چندصفحه‌ای (Multi-Page)

در این روش، وب‌سایت از چند فایل HTML مجزا تشکیل شده است که از طریق لینک‌ها به یکدیگر متصل شده‌اند.
مثلاً:

  • index.html — صفحه اصلی
  • about.html — درباره من
  • projects.html — نمونه‌کارها
  • contact.html — تماس با من

🎯 در این دوره:

ما از HTML برای ساخت ساختار یک وب‌سایت چندصفحه‌ای استفاده خواهیم کرد که نمایانگر پروفایل شخصی یا حرفه‌ای شما خواهد بود.

قوانین وب

قوانین مشخصی برای نوشتن HTML وجود دارد. اما این قوانین از کجا آمده‌اند؟

تیم برنرز-لی، علاوه بر خلق وب و هایپرتکست، کنسرسیوم جهانی وب (W3C) را نیز بنیان‌گذاری کرد. این سازمان برای تنظیم و حفظ استانداردهای HTML و CSS ایجاد شد.

در سال ۲۰۱۹، W3C با گروه WHATWG (گروه کاری فناوری اپلیکیشن وب هایپرتکست) همکاری خود را آغاز کرد تا استانداردهای HTML را مدیریت کند. اسناد رسمی HTML در وب‌سایت آن‌ها موجود است.

وقتی من شروع به یادگیری HTML و CSS کردم، تصمیم گرفتم تمام مستندات را بخوانم، ولی خیلی زود فهمیدم که بسیار گسترده‌اند.
خبر خوب اینکه نیازی نیست همه آن‌ها را بخوانید؛ در این مقاله مفاهیم اصلی را پوشش می‌دهیم.

یادگیری همه چیز ممکن نیست، بنابراین مهم است که بتوانید پاسخ‌ها را پیدا کنید و منابع قابل اتکایی داشته باشید.

مثلاً وب‌سایت caniuse.com برای بررسی پشتیبانی مرورگرها از ویژگی‌های خاص HTML و CSS عالی است.

W3C همچنین یک اعتبارسنج HTML دارد که می‌توانید URL، فایل یا کد HTML خود را وارد کنید تا خطاها نمایش داده شوند.

برای مستندات، من اغلب از Mozilla Developer Network (MDN) استفاده می‌کنم. به‌نظر من خواناتر است و در عین حال به منابع رسمی لینک می‌دهد.

موقع جستجوی آموزش‌ها و مقالات، حتماً به تاریخ انتشار توجه کنید تا مطمئن شوید منبع به‌روز است.

فراموش نکنید که یادگیری، تمرین زیاد و دادن زمان به خودتان، بخشی از مسیر است.

ساختار سند HTML و صفحه وب

doctype-html-inadramseo

صفحه HTML

ما تا این بخش مقاله در مورد تاریخچه و مسائل کلی که مربوط به HTML بود صحبت کردیم حالا بیاییم و کمی فنی تر به نکات موجود در این زبان و همینطور ساختار کلی این سند بپردازیم .

فایل‌های HTML یکی از اجزای اصلی و پایه‌ای وب محسوب می‌شوند. هر وقت کسی بخواهد وارد یک سایت شود، کارش را با باز کردن مرورگر یا WebView شروع می‌کند و به یک آدرس اینترنتی (URL) می‌رود. ممکن است کاربر خودش URL را در نوار آدرس تایپ کند، یا از طریق یک جستجو یا کلیک روی یک لینک به آن برسد. حتی ممکن است اپلیکیشنی را باز کند که خودش به‌صورت خودکار یک URL خاص را باز کند. هر طور که اتفاق بیفتد، همیشه یک URL در کار است.

وب‌سرور در پاسخ به این درخواست، یک فایل HTML ارسال می‌کند که در آن آدرس ذخیره شده است.

در دهه ۹۰ میلادی که وب تازه شروع شده بود، همه چیز لازم برای نمایش یک صفحه وب داخل یک فایل HTML قرار داشت. البته به جز تصاویر. به غیر از عکس‌ها، همه محتوا داخل یک فایل متنی با پسوند .html یا .htm ذخیره می‌شد.

اما الان اوضاع خیلی فرق کرده و پیچیده‌تر شده است. امروزه متن‌ها اغلب داخل پایگاه داده ذخیره می‌شوند یا از فایل‌های استاتیک مختلف در لحظه کنار هم جمع می‌شوند و برای هر کاربر شخصی‌سازی می‌شوند. استایل‌های ظاهری (Visual Styling) در فایل‌های CSS قرار دارند، کدهای تعاملی یا محاسباتی در فایل‌های جاوااسکریپت (JavaScript) هستند، و همچنین تصاویر، ویدئوها، صداها و تبلیغات هم جداگانه بارگذاری می‌شوند.

چیزی که کاربر در نهایت در صفحه می‌بیند، این روزها معمولاً از ترکیب مجموعه‌ای از فایل‌های مختلف ساخته می‌شود.

اما فرقی ندارد وب‌سایت چقدر پیچیده طراحی شده باشد، مکانیزم اصلی وب همیشه یکسان است:

  • کاربر به یک URL می‌رود.
  • مرورگر یک درخواست برای فایل HTML ارسال می‌کند.
  • سرور یک فایل HTML برمی‌گرداند.
  • مرورگر محتوای آن فایل HTML را می‌خواند و هر چه در آن نوشته شده اجرا می‌کند.

این روند همیشه ثابت است.

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

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

در ابتدای این فایل، معمولاً فهرستی از فایل‌های دیگر مثل CSS یا JS قرار دارد. مرورگر بلافاصله درخواست آن‌ها را می‌فرستد و وقتی این فایل‌ها را دریافت کرد، شروع می‌کند به اجرای دستوراتشان. و خیلی سریع، یک صفحه وب کامل ساخته می‌شود.

بیاییم نگاهی به ساختار کلی یک فایل HTML بیندازیم.

شاید سیستم Build یا CMS شما همه این کدها را در یک فایل واحد تولید نکند. اما به هر حال جایی وجود دارد (مثلاً فایل‌های قالب (Template Files) یا فایل‌های پوسته (Theme Files)) که مشخص می‌کند چه چیزی باید به مرورگر ارسال شود.

وقتی فایل HTML ساخته شد، چند بخش کلیدی دارد که هر صفحه وب باید آن‌ها را داشته باشد:

۱. اعلامیه Doctype:
هر فایل HTML باید با یک خط Doctype شروع شود. این خط کوچک اعلام می‌کند که این فایل HTML متعلق به کدام دوره (نسخه) HTML است. در گذشته نسخه‌های قدیمی HTML، Doctypeهای دیگری داشتند. اما امروزه با این Doctype مشخص می‌کنیم که این یک صفحه وب مدرن است و مرورگر باید آن را مطابق استانداردهای روز تفسیر کند.

۲. عنصر HTML:
بعد از Doctype، همه محتوای صفحه داخل یک تگ HTML قرار می‌گیرد. یعنی شما یک تگ <html> در ابتدای فایل می‌گذارید و یک تگ </html> در انتهای فایل. این تگ به مرورگر می‌گوید: «این محتوا، HTML است.»

۳. اطلاعات کلی صفحه (مثل زبان و جهت متن):
در همان بالای تگ HTML مشخص می‌کنیم محتوای صفحه به چه زبانی است و جهت متن (راست‌به‌چپ یا چپ‌به‌راست) چگونه باشد. مثلاً در کدی که در متن گفته شده، سایت به زبان فارسی است و متن‌ها از راست به چپ نمایش داده می‌شوند.

۴. دو بخش اصلی Head و Body:
داخل تگ HTML، همه‌چیز به دو قسمت اصلی تقسیم می‌شود: head و body.

  • head: مخصوص متادیتا (metadata) است؛ یعنی اطلاعاتی درباره سند که مرورگر باید بداند، ولی قرار نیست در خود صفحه نمایش داده شود. مثلاً عنوان صفحه، لینک‌های CSS، اسکریپت‌های جاوااسکریپت، توضیحات سئو، کاراکترست و غیره.
  • body: جایی است که محتوای واقعی صفحه در آن قرار می‌گیرد. یعنی همه متن‌ها، تصاویر، ویدئوها، لینک‌ها، فرم‌ها و هر چیزی که کاربر در صفحه می‌بیند. این محتوا داخل المان‌های مختلف HTML که در این دوره درباره‌شان صحبت کردیم، قرار می‌گیرد. اینجاست که اصل ماجرا اتفاق می‌افتد.

پس اعلامیه Doctype، تگ HTML، تگ head و تگ body چهار بخش اصلی و پایه‌ای هر صفحه وب هستند.

بخش Head سند (Document head)

خب حالا داخل تگ head چی قرار می‌گیرد؟

در هد ما اطلاعاتی قرار میدهیم که نمیخواهیم کاربر آنرا ببیند اما این اطلاعات برای مرورگر ها و گوگل اهمیت دارد مانند “Character set” و “metadata” و “title” ها که در ادامه کمی در مورد آنها توضیح خواهیم داد .

برای این کار از المان <meta> استفاده می‌کنیم. المان meta فقط باید داخل تگ head قرار بگیرد. کارش انتقال اطلاعات متادیتا (metadata) درباره صفحه است.

مثلاً اگر بخواهیم مشخص کنیم که از چه کاراکترستی استفاده می‌کنیم، از ویژگی charset استفاده می‌کنیم و مقدار آن را UTF-8 می‌گذاریم. مثلاً به این شکل:

<meta charset="UTF-8">

قبل از اینکه درباره کارهای دیگر meta tag صحبت کنیم، اول باید یک مورد بسیار مهم را اضافه کنیم که در هر صفحه HTML الزامی است:

المان <title>.

این title، عنوانی نیست که در محتوای صفحه به کاربر نمایش داده شود. بلکه عنوان صفحه وب است که توسط مرورگر استفاده می‌شود.

  • این عنوان روی تب مرورگر (browser tab) نمایش داده می‌شود.
  • اگر کاربر صفحه را بوکمارک کند (Bookmark)، عنوان بوکمارک همان title است.
  • اگر سایت جزو سایت‌های محبوب (Top Sites) مرورگر باشد، همین عنوان نشان داده می‌شود.
  • هر جایی که رابط کاربری مرورگر (Browser UI) به صفحه اشاره می‌کند، از همین عنوان تعریف‌شده در المان title استفاده می‌شود.

حالا که چیزهای ضروری هر صفحه HTML را اضافه کردیم، ببینیم چه چیزهای دیگری می‌توانیم در head قرار دهیم.

المان <meta> می‌تواند برای تعریف تنظیمات مختلفی استفاده شود. یکی از رایج‌ترین کاربردهای meta، اطلاع دادن به مرورگر است که طرح‌بندی (Layout) صفحه طوری تغییر یافته که روی صفحه‌های کوچک هم به‌خوبی نمایش داده شود؛ یعنی سایت ریسپانسیو (Responsive) است.

بدون این meta tag، مرورگر تصور می‌کند صفحه از روش‌های قدیمی برای طراحی استفاده کرده و در واقع یک طرح دسکتاپ است که باید در موبایل کوچک شود.

احتمالاً بخواهیم یک توضیح (Description) هم برای سایت اضافه کنیم. این توضیح در نتایج موتورهای جستجو (Search Engine Results) نمایش داده می‌شود.

تا حالا فکر کردی چرا یک جمله خاص از سایتت در نتایج جستجوی گوگل ظاهر می‌شود؟ خب، گوگل این متن را از همین meta tag می‌خواند.

Meta tag همچنین برای کارهای دیگری مثل:

  • مشخص کردن نام صفحه وقتی به صفحه اصلی موبایل (Home Screen) ذخیره می‌شود.
  • تعیین تصویر آیکون (Tile Image) و رنگ پس‌زمینه.

حتماً دیدی وقتی لینکی را در Slack، LinkedIn، Twitter یا شبکه‌های اجتماعی دیگر می‌گذاری، آن لینک تبدیل به یک کارت زیبا می‌شود؟ این کار هم با meta tags انجام می‌شود.

راه‌ها و تکنیک‌های زیادی برای بهبود تجربه کاربر در سایت وجود دارد که همه به meta tag مرتبط هستند.

عنصر مهم دیگری که خیلی زیاد در head استفاده می‌شود، تگ <link> است. این تگ برای لینک دادن به انواع فایل‌های خارجی است که می‌خواهیم در صفحه بارگذاری شوند، مثل:

  • فایل‌های CSS
  • فونت‌ها (Fonts)
  • Favicon (آیکون کوچک سایت در تب مرورگر)

در تگ <link>, از ویژگی rel استفاده می‌کنیم تا به مرورگر بگوییم فایل مورد نظر چه نوع فایلی است. و از ویژگی href استفاده می‌کنیم تا آدرس فایل (URL) را به مرورگر بدهیم.

مثلاً لینک کردن یک فایل استایل (CSS) به این شکل است:

<link rel="stylesheet" href="styles.css">

لینک کردن favicon به این صورت است:

<link rel="icon" href="favicon.ico">

حتی می‌توانیم از <link> برای preload کردن (پیش‌بارگذاری) فایل‌های فونت استفاده کنیم تا سریع‌تر لود شوند.

یک نکته مهم: مرورگر فایل‌ها را به همان ترتیبی که در head نوشته شده‌اند بارگذاری می‌کند. پس هر چیزی که می‌خواهی زودتر بارگذاری شود را باید در بالاترین قسمت head بنویسی. چیزهایی که اهمیت کمتری دارند یا فوری استفاده نمی‌شوند را می‌توان پایین‌تر قرار داد.

آخرین المان پرکاربرد که در head صفحه HTML قرار می‌گیرد، تگ <script> است. این تگ به مرورگر می‌گوید که یک فایل جاوااسکریپت (JavaScript) را بارگذاری کند.

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

به طور کلی، تگ head در HTML جایی است که همه چیز را به هم متصل و تنظیم می‌کند. وظیفه‌اش این است که:

  • فایل‌های موردنیاز را لود کند.
  • اطلاعاتی درباره صفحه را به مرورگر و سایر سایت‌ها و پلتفرم‌ها منتقل کند.

Head مثل ستاد فرماندهی است که همه‌چیز را آماده می‌کند تا صفحه به درستی شروع به کار کند.

ساختاردهی به محتوا (Structuring content)

ما به‌تازگی به‌صورت عمیق بررسی کردیم که چه چیزهایی می‌توانند داخل تگ head قرار بگیرند. حالا سوال این است: داخل تگ body معمولاً چه ساختاری دارد؟

اینجا شش المان اصلی وجود دارد که باید آن‌ها را بشناسیم:

  • main
  • header
  • footer
  • article
  • section
  • aside

عنصر Main

عنصر main، دور محتوای اصلی صفحه را می‌گیرد. این المان فقط یک‌بار در هر صفحه وب استفاده می‌شود و به مرورگر می‌گوید: «اینجا محتوای اصلی صفحه است.»

تگ هدر <Header> </header>

عنصر header برای مشخص کردن جاهایی در صفحه استفاده می‌شوند که محتوا نقش سربرگ (header) دارد.

حواست باشد header را با head اشتباه نگیری.

  • head بخشی از سند HTML است که اصلاً به کاربر نمایش داده نمی‌شود و فقط شامل متادیتاهای فایل است.
  • اما header برای پیچیدن سربرگ‌های سایت، سربرگ مقالات، یا هر سربرگی در محتوای صفحه استفاده می‌شود.

بیشتر صفحات وب یک header در بالای صفحه دارند. مثلاً شامل لوگو، نام سایت، منوهای ناوبری (Navigation). این همان header است.

یک مقاله (article) هم معمولاً با یک عنوان شروع می‌شود. شاید زیرعنوانی داشته باشد، نام نویسنده، تاریخ انتشار و… این‌ها هم می‌توانند داخل یک header قرار بگیرند. مهم معنای معنایی (Semantic Meaning) آن است، نه مکان ظاهری (Visual Position).

تگ Article

تگ article دور هر بخشی از محتوا پیچیده می‌شود که نقش یک مقاله مستقل را دارد.

  • ممکن است یک مقاله طولانی یا یک پست وبلاگ باشد.
  • ممکن است یک متن کوتاه باشد.
  • حتی یک کارت کوچک تبلیغاتی یا تیزر (Teaser Card) هم می‌تواند به‌صورت article نشانه‌گذاری شود.
  • یک توییت یا پست شبکه اجتماعی هم می‌تواند article باشد.
  • حتی شاید اصلاً متنی وجود نداشته باشد؛ ممکن است در حال نشانه‌گذاری یک اپلیکیشن باشیم و هر واحد محتوا بهترین حالتش این باشد که به‌عنوان یک article تعریف شود.

المان article یعنی: «این محتوا، به‌تنهایی یک واحد مستقل و قابل استفاده است.»

تگ Section

تگ section برای پیچیدن بخش‌های مختلف محتوا استفاده می‌شود.مثلاً اگر یک مقاله طولانی داشته باشیم که به بخش‌های مختلف با سرفصل‌های جدا تقسیم شده باشد، می‌توانیم از section برای نشانه‌گذاری هر بخش استفاده کنیم.

یا شاید در وب‌سایت خود ناحیه‌های مختلف داشته باشیم:

  • یک section در بالای صفحه درباره یک موضوع
  • یک section پایین‌تر درباره موضوع دیگر

تگ section عنصری انعطاف‌پذیر است و یعنی: «خب، بیاییم یک بخش تازه شروع کنیم.»

معمولاً هر section تیتر خاص خودش را دارد که شروع یک بخش جدید از محتوا را مشخص می‌کند.

تگ aside

تگ aside برای نشانه‌گذاری محتوایی است که حاشیه‌ای (Side Content) محسوب می‌شود.

مثلاً:

  • محتواهایی در سایدبار (Sidebar)
  • هر چیزی که خیلی مرتبط با محتوای اصلی نیست اما اطلاعات جانبی مفید ارائه می‌دهد.

می‌تواند یک باکس کوچک کناری (Inset Panel) باشد که اطلاعات تکمیلی درباره یک مقاله بزرگ می‌دهد، ولی دقیقاً جزو متن اصلی مقاله محسوب نمی‌شود. یا مثلاً تبلیغات که محتوایی جانبی محسوب می‌شوند و بهتر است به‌صورت aside نشانه‌گذاری شوند.

باز هم اینجا معنای معنایی (Semantic Meaning) مهم است، نه موقعیت ظاهری در صفحه.

خیلی از صفحات وب در پایین صفحه یک footer دارند که شامل:

  • لیست لینک‌ها
  • اطلاعات کپی‌رایت
  • اطلاعات اضافی درباره شرکت

این محتواها طبیعی است که در یک تگ footer قرار بگیرند. البته footer الزاماً نباید پایین صفحه باشد. خیلی از مقالات در ابتدای خود، یکسری متادیتا دارند، مثل:

  • لیست هشتگ‌ها
  • دکمه‌های اشتراک‌گذاری (Share buttons)

این اطلاعات هم می‌توانند در یک footer قرار بگیرند. مثلاً شاید ترجیح دهیم تاریخ انتشار مقاله را به‌جای header، داخل footer قرار دهیم. تگ footer در واقع دارد می‌گوید: «هی! ما چند چیز اضافه درباره این محتوا داریم.» اینکه footer کجای صفحه نمایش داده شود مهم نیست هرچند معمولاً ظاهر و چیدمان صفحه به انتقال این معنا کمک می‌کند، اما هدف HTML این است که این معانی را از طراحی گرافیکی به کدهای نشانه‌گذاری منتقل کند.

به طور خلاصه تگ main فقط یک‌بار در هر صفحه استفاده می‌شود و دور محتوای اصلی همان صفحه را می‌گیرد. تگ‌های header، footer، article، section و aside پنج عنصر بخش‌بندی‌کننده (Sectioning Elements) در HTML هستند. این المان‌ها اغلب در کنار هم و داخل یکدیگر استفاده می‌شوند تا محتوای یک صفحه وب، ساختار واقعی و منظم خود را پیدا کند.

اصطلاحات و نحو (Syntax)

html-tags-inadramseo

همان‌طور که در یادگیری هر زبان گفتاری یا نوشتاری، بهترین روش شروع با یادگیری قواعد آن زبان است، در دنیای برنامه‌نویسی نیز باید ابتدا با قواعد نگارشی و واژگان آن زبان آشنا شویم. در زبان‌های کدنویسی، این قواعد با مفاهیمی مثل سینتکس (syntax) و ترمینولوژی (terminology) شناخته می‌شوند؛ دقیقاً مانند دستور زبان، علائم نگارشی و واژگان در یک زبان طبیعی.

📘 HTML چیست؟

HTML مخفف Hypertext Markup Language به‌معنای «زبان نشانه‌گذاری ابرمتن» است و برای افزودن ساختار و معنا به محتوای صفحات وب استفاده می‌شود.

شاید این دو اصطلاح را هم شنیده باشید:

  • XHTML: نسخه‌ای قدیمی‌تر از HTML است که بر اساس زبان XML ساخته شده بود.
  • HTML5: نسخه جدیدتر و رایج کنونی که بعد از XHTML معرفی شد.

امروزه، استانداردهای HTML به‌صورت تدریجی و بدون نسخه‌گذاری کامل به‌روزرسانی می‌شوند، بنابراین احتمال اینکه نسخه‌ای به نام HTML6 ببینیم بسیار کم است؛ اما زبان HTML همچنان در حال پیشرفت و تحول است.

🔖 تگ‌های HTML چه هستند؟

در HTML برای نشانه‌گذاری محتوا از المان‌هایی (elements) استفاده می‌کنیم که:

  • هم ظاهر محتوا را کنترل می‌کنند
  • هم معنی آن را به مرورگر می‌رسانند (که به آن semantics یا معنایی بودن گفته می‌شود)

فرض کنید از یک نرم‌افزار واژه‌پرداز مثل Word استفاده می‌کنید:

  • می‌توانید متن را عنوان، زیرعنوان، پاراگراف یا لیست کنید.
  • می‌توانید متن را Bold یا Italic کنید.
  • یا عکس و لینک اضافه کنید.

در HTML به جای کلیک روی آیکون‌ها، از تگ‌ها (tags) برای ساخت این ساختار استفاده می‌کنیم.

🧱 ساختار تگ‌ها چگونه است؟

<tagname>محتوا</tagname> 


تگ باز (opening tag): آغاز یک المان را مشخص می‌کند.

تگ بسته (closing tag): با اسلش / قبل از نام تگ، پایان المان را نشان می‌دهد.

محتوا بین این دو قرار می‌گیرد. 
مثلاً:
 <p>این یک پاراگراف است.</p>

🌀 تگ‌های تودرتو

تگ‌های HTML می‌توانند داخل یکدیگر قرار بگیرند. مثلاً:

<p><strong>متن بولد</strong> و متن عادی</p>

⚠️ المان‌های Void (بدون تگ پایانی)

برخی تگ‌ها مثل <img> یا <hr> نیازی به تگ پایانی ندارند. به این نوع تگ‌ها void elements یا self-closing tags گفته می‌شود.

ممکن است در نسخه‌های قدیمی‌تر (مثل XHTML) آنها را این‌گونه ببینید:

<img src="image.jpg" />

اما در HTML5 استفاده از / در انتهای تگ ضرورتی ندارد:

 <img src="image.jpg">

🔠 حروف بزرگ یا کوچک؟


HTML به حروف حساس نیست، اما برای خوانایی بهتر، معمولاً از حروف کوچک (lowercase) استفاده می‌شود:

✅ توصیه‌شده: <h1>
❌ غیرمتداول: <H1>

⚙️ ویژگی‌ها (Attributes)

ویژگی‌ها اطلاعات یا قابلیت‌های اضافی را به المان‌ها اضافه می‌کنند و در تگ آغازین نوشته می‌شوند. مثلاً:

<img src="image.jpg" alt="تصویر" width="200">

src، alt و width همگی attributes هستند.

بعضی ویژگی‌ها مثل required بولی (Boolean) هستند و فقط وجودشان کافی است.

📝 کامنت‌گذاری در HTML

برای افزودن یادداشت یا توضیح در کد می‌توان از کامنت استفاده کرد. کامنت‌ها در مرورگر نمایش داده نمی‌شوند و فقط در سورس‌کد قابل‌مشاهده‌اند.

<!-- این یک کامنت است -->

می‌توان هر متنی را درون آن نوشت و حتی خطوط متعدد را نیز در کامنت قرار داد.

قالب‌بندی متن (Formatting Text)

پاراگراف‌ها و تیترها در HTML

بیشتر محتوای یک صفحه وب معمولاً متن است. حال که با نحو (syntax) زبان HTML آشنا شدیم، بیایید نحوه ایجاد برخی عناصر متنی رایج را بررسی کنیم، ابتدا با پاراگراف‌ها و تیترها شروع می‌کنیم.

برای ایجاد یک عنصر پاراگراف، از تگ <p> استفاده می‌کنیم تا یک یا چند جمله را به صورت گروه‌بندی مرتبط نمایش دهیم.
برای تیترها، در واقع شش تگ وجود دارد که از <h1> تا <h6> متغیرند و برای تعریف سلسله‌مراتب تیترها به کار می‌روند.
تگ <h1> برای مهم‌ترین تیتر صفحه استفاده می‌شود، سپس <h2>، و به همین ترتیب تا <h6> که کم‌اهمیت‌ترین تیتر است.

برای نشان دادن نحوه عملکرد این تگ‌ها و نحوه نمایش آن‌ها در مرورگر، از CodePen استفاده خواهم کرد.
تمام لینک‌های مربوط به دموهای CodePen، مراجع دوره و منابع اضافی در فایل PDF لینک‌ها که در پوشه فایل‌های تمرینی قرار دارد، موجود است.
شما می‌توانید همزمان با دموها روی کامپیوتر خود پیش بروید یا فقط تماشا کنید؛ هر روشی که برای شما مناسب‌تر است.

قبل از شروع، نگاهی به چیدمان این ویرایشگر می‌اندازیم.
از آنجا که فقط قرار است کدهای HTML بنویسیم، پنل‌های CSS و JavaScript را جمع می‌کنم.
برای این کار، نشانگر ماوس را روی خط تقسیم‌کننده ببرید، وقتی آیکون مربوطه ظاهر شد، آن را به سمت راست بکشید.
سپس روی آیکون جعبه کنار تنظیمات کلیک کنید و از گزینه‌های «Change View» گزینه اول را انتخاب کنید.
این باعث می‌شود پنل‌های ویرایشگر در سمت چپ قرار بگیرند و فضای بیشتری برای مشاهده ورودی و خروجی فراهم شود.
البته می‌توانید چیدمان را طبق سلیقه خود تغییر دهید.

در بالای پنل HTML، سه جمله وجود دارد. اگر بخواهید بین آن‌ها شکست خط (line break) یا فاصله اضافی قرار دهید، مرورگر این فرمت‌بندی را تشخیص نمی‌دهد.
همانطور که در خروجی می‌بینید، هیچ تغییری ایجاد نمی‌شود.


بدون استفاده از تگ‌های HTML، تمام جملات در یک خط نمایش داده می‌شوند و اگر عرض صفحه کافی نباشد، به خط بعدی منتقل می‌شوند (که معمولاً عرض قابل مشاهده در پنجره مرورگر است، اما در CodePen فقط پنل خروجی است).
مرورگر فقط یک فاصله را بین کلمات به رسمیت می‌شناسد و هر فضای خالی یا شکست خط اضافی نادیده گرفته می‌شود.

حالا بیایید دور جمله اول، تگ باز <p> و تگ بسته </p> قرار دهیم تا آن را به عنوان یک پاراگراف مشخص کنیم.
برای دو جمله بعدی هم یک جفت تگ <p> باز و بسته دیگر بگذاریم تا آن‌ها را در یک پاراگراف گروه‌بندی کنیم.
یعنی ابتدا <p>، متن، سپس </p> نوشته شود.
این کار را برای پاراگراف دوم هم انجام می‌دهیم.

HTML با استایل‌های پیش‌فرض ساده، محتوای متنی مختلف را قالب‌بندی می‌کند.
وقتی از تگ <p> برای متن استفاده می‌کنیم، به طور خودکار فضایی بین پاراگراف‌ها ایجاد می‌شود تا به صورت بصری از هم جدا شوند.
حتی اگر در HTML فاصله بین تگ‌ها را حذف کنیم، این استایل پیش‌فرض مرورگر تغییر نمی‌کند.

حالا کامنت‌ها (نظرها) اطراف تیترها را حذف کنیم تا ببینیم چگونه در مرورگر نمایش داده می‌شوند.
می‌توانیم به صورت دستی علامت‌های کامنت یعنی <!– و –> را حذف کنیم، اما یک روش سریع‌تر هم هست:
تمام بلاک را انتخاب کنید و کلیدهای میانبر cmd + / برای مک یا ctrl + / برای ویندوز را بزنید.

تیترها به صورت متن پررنگ (bold) و با اندازه متناسب با سطح تیتر نمایش داده می‌شوند.
تیتر <h1> بزرگ‌ترین است و هر چه به سمت تیترهای پایین‌تر برویم، اندازه‌ها کوچک‌تر می‌شود.

اگر محتوایی شامل شش تیتر باشد، لزوماً نیازی نیست از همه شش تگ استفاده شود.
تیترها برای تعیین ساختار و سازماندهی محتوای صفحه به کار می‌روند، نه صرفاً برای بزرگ یا کوچک بودن متن.

📚 ساختار سلسله‌مراتبی عنوان‌ها در HTML

در این مثال:

  • فقط از <h1>, <h2>, و <h3> استفاده شده است.
  • <h1> فقط یک‌بار در کل صفحه و برای عنوان اصلی مقاله یا سند استفاده شده است.
  • دو عنوان بعدی در سطح دوم قرار دارند و با <h2> مشخص شده‌اند.
  • سه عنوان دیگر زیرمجموعه یکی از بخش‌های <h2> هستند و با <h3> مشخص شده‌اند.
<h1>عنوان اصلی</h1>
  <h2>بخش اول</h2>
  <h2>بخش دوم: اصطلاحات و سینتکس</h2>
    <h3>تعریف تگ</h3>
    <h3>استفاده از تگ‌ها</h3>
    <h3>نکات سینتکس</h3>

این ساختار نه‌تنها به کاربران نظم بصری ارائه می‌دهد، بلکه برای دسترسی‌پذیری (مانند screen readerها) نیز بسیار مفید است.

⚠️ اشتباه رایج: استفاده از تگ اشتباه به‌خاطر ظاهر

گاهی افراد فقط به‌خاطر اینکه مثلاً <h3> ظاهر کوچک‌تری دارد، آن را به‌جای <h2> استفاده می‌کنند. این اشتباه است.

✅ در HTML، معنا و ساختار مهم است، نه ظاهر. برای تنظیم ظاهر، باید از CSS استفاده کرد.

مثال اشتباه:

<h1>عنوان اصلی</h1>
<h3>زیرعنوان اول</h3> <!-- به‌جای h2 استفاده شده چون ظاهرش کوچک‌تره -->

مثال درست:

<h1>عنوان اصلی</h1>
<h2 class="smaller-heading">زیرعنوان اول</h2>

و در CSS:

.smaller-heading {
  font-size: 1.2rem;
  font-weight: normal;
}

🧠 نتیجه‌گیری

  • از heading‌ها برای ساختاردهی معنایی استفاده کنید، نه برای ظاهر.
  • فقط از <h1> یک‌بار در هر صفحه استفاده کنید.
  • ترتیب منطقی را حفظ کنید: از <h2> برای بخش‌های اصلی، و <h3> برای زیر‌بخش‌ها.
  • CSS وظیفه تغییر ظاهر را دارد، نه HTML.

رعایت این اصول، باعث سئو بهتر، دسترسی‌پذیری بالاتر و کدی تمیزتر خواهد شد.

لیست‌های مرتب، نامرتب و توضیحی

یکی از چیزهایی که در زندگی روزمره از آن‌ها استفاده می‌کنیم، لیست‌ها هستند؛ مانند لیست خرید یا لیست کارهایی که باید انجام دهیم. بنابراین، جای تعجب ندارد که در HTML هم برای سازماندهی محتوا نیاز به استفاده از لیست‌ها داشته باشیم.

سه نوع لیست وجود دارد:

  • لیست مرتب (Ordered List)
  • لیست نامرتب (Unordered List)
  • لیست توضیحی (Description List)

لیست مرتب برای آیتم‌هایی است که باید به ترتیب خاصی دنبال شوند، مانند دستورالعمل‌ها یا مراحل پخت غذا.

لیست نامرتب برای آیتم‌هایی است که نیازی به ترتیب خاصی ندارند.

لیست توضیحی برای سازماندهی اصطلاحات مرتبط و توضیحات آن‌ها استفاده می‌شود.

بیایید نگاهی به نحو (syntax) آن‌ها بیندازیم:
همه‌ی آیتم‌های لیست به صورت تگ <li> نوشته می‌شوند.
برای لیست‌های مرتب، آیتم‌ها با استفاده از تگ <ol> گروه‌بندی می‌شوند.
برای لیست‌های نامرتب، از تگ <ul> استفاده می‌شود.
فقط تگ‌های <li> هستند که می‌توانند داخل این دو نوع لیست استفاده شوند.

اگر می‌خواهید متن مقدمه‌ای قبل از لیست قرار دهید، از عنصر پاراگراف (<p>) در خارج از تگ‌های <ol> یا <ul> استفاده کنید.

بیایید نگاهی به یک مثال در CodePen بیندازیم:
در اولین بخش از متن، محتوا شامل دستورالعمل‌هایی است که باید به ترتیب خاصی دنبال شوند، بنابراین از لیست مرتب استفاده شده است.
وقتی از تگ <ol> استفاده می‌کنید، هر آیتم لیست به‌صورت شماره‌گذاری‌شده نمایش داده می‌شود.

نحوه‌ی نمایش این شماره‌ها را می‌توان با استفاده از ویژگی‌ها (attributes) تغییر داد.

اگر می‌خواهید عدد آغازین آیتم اول را تغییر دهید، از ویژگی start استفاده کنید.
تمام ویژگی‌ها در تگ آغازین (opening tag) نوشته می‌شوند، به‌صورت:
start="عدد" — عدد داخل گیومه، مقداری است که می‌خواهید لیست از آن شروع شود.

همچنین می‌توانید با استفاده از ویژگی type، اعداد را به حروف یا اعداد رومی تبدیل کنید.
شروع کنید با: type="..."
مقدار مورد نظر را داخل گیومه بنویسید:

  • a برای حروف کوچک
  • A برای حروف بزرگ
  • i برای اعداد رومی کوچک
  • I برای اعداد رومی بزرگ

اگر می‌خواهید از استایل پیش‌فرض استفاده کنید، فقط کافی است این ویژگی را حذف نمایید.

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

آیتم‌های لیست را می‌توان به ترتیب دلخواه در HTML چیدمان کرد، اما استفاده از تگ <ul> هیچ مفهومی درباره ترتیب نمایش آن‌ها منتقل نمی‌کند.

بیایید کامنت اطراف متن را حذف کنیم تا یک لیست نامرتب بسازیم.

سپس تمام آیتم‌های لیست را با یک تگ باز و بسته <ul> گروه‌بندی می‌کنیم.
فراموش نکنید که در تگ بسته حتماً از اسلش / استفاده کنید.

بعد، هر آیتم را در یک تگ <li> قرار می‌دهیم.
اما اجازه دهید یک میانبر را که در اکثر ویرایشگرهای متن کار می‌کند، به شما نشان بدهم:
فقط نام تگ li را بدون براکت تایپ کنید و سپس کلید Tab را فشار دهید.
ویژگی auto-complete ویرایشگر به‌طور خودکار براکت‌ها و تگ بسته را اضافه می‌کند.
این میانبر برای هر تگ HTML دیگر نیز قابل استفاده است.

حالا دو آیتم دیگر به لیست اضافه می‌کنم.

استفاده از فاصله‌های tab باعث می‌شود عناصر تو در تو به شکل واضح‌تری نمایش داده شوند.
بیشتر ویرایشگرهای کد به‌صورت خودکار وقتی دکمه Enter را می‌زنید، این تورفتگی‌ها را اضافه می‌کنند.

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

حالا محتوا را به داخل هر تگ <li> منتقل می‌کنیم.
می‌توانید متن را انتخاب کرده و با کشیدن و رها کردن (drag & drop) بین تگ‌ها قرار دهید.
همچنین می‌توانید متن را انتخاب کرده و با راست‌کلیک گزینه‌های Cut، Copy یا Paste را انتخاب کنید.
من ترجیح می‌دهم از کلیدهای میانبر استفاده کنم:

  • Cmd یا Ctrl + C برای کپی
  • Cmd یا Ctrl + X برای برش (که هم کپی و هم حذف می‌کند)
  • Cmd یا Ctrl + V برای چسباندن (paste)

سپس فضای اضافی را حذف می‌کنم.

اگر بخواهید ترتیب نمایش آیتم‌های لیست را تغییر دهید، فقط کافی است آن را در HTML جابه‌جا کنید.
برای مثال، اگر بخواهم آیتم “پوشاک” (Apparel) اول بیاید، فقط آن را در بالای لیست قرار می‌دهم.

آیتم‌های لیست نامرتب به‌صورت گلوله‌دار نمایش داده می‌شوند.
استایل این گلوله‌ها را می‌توان تغییر داد، اما برخلاف لیست‌های مرتب، این کار فقط با CSS انجام می‌شود.

لیست‌های فرعی (Secondary lists) را نیز می‌توان به لیست اصلی اضافه کرد.
برای مثال، ممکن است بخواهید زیر دسته‌هایی مثل «پیراهن» و «شلوار» را زیر آیتم «پوشاک» اضافه کنید.

این کار را می‌توان با ایجاد یک لیست تو در تو انجام داد.

شروع می‌کنیم با افزودن یک تگ <ul> داخل آیتم لیست (یعنی داخل تگ <li>)، اما بعد از متن آن.
تگ بسته </li> را در یک خط جدا قرار می‌دهم تا لیست تو در تو واضح‌تر دیده شود.
سپس آیتم‌های زیرمجموعه مانند «پیراهن» و «شلوار» را با تگ‌های <li> در داخل همان تگ <ul> تو در تو قرار می‌دهیم.

لیست نامرتب تو در تو نیز همچنان به‌صورت گلوله‌دار نمایش داده می‌شود،
اما این‌بار گلوله‌ها به‌صورت دایره توخالی (outlined circles) هستند، نه دایره‌های پر.

نوع سوم لیست، لیست توضیحی (Description List) است، که برای نمایش اصطلاحات و توضیحات آن‌ها استفاده می‌شود.

تگ <dl> برای تعریف کل لیست توضیحی استفاده می‌شود.
تگ <dt> برای تعریف «اصطلاح» به‌کار می‌رود،
و تگ <dd> برای نمایش «توضیح» یا «تعریف» آن اصطلاح استفاده می‌شود.

این نوع لیست به اندازه لیست‌های مرتب و نامرتب رایج نیست،
اما هنگام نمایش اصطلاحات و تعاریف، می‌تواند معنا و مفهوم معنایی (semantic meaning) بیشتری به محتوا بدهد.

نقل‌قول‌ها (Quotations)

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

اگر متنی را از جایی نقل کرده‌اید و می‌خواهید منبع آن را ذکر کنید، می‌توانید از عناصر <blockquote>, <cite> و ویژگی cite استفاده کنید.

بیایید یک مثال را در CodePen بررسی کنیم:

نقل‌قول‌ها با استفاده از تگ <blockquote> تعریف می‌شوند.
با این حال، متن نقل‌قول باید درون تگ‌های <p> (پاراگراف) قرار بگیرد.
هر گونه نسبت دادن (نام نویسنده یا منبع) باید خارج از عنصر <blockquote> قرار داده شود.

عنصر <cite> می‌تواند استفاده شود، اما فقط برای عنوان اثر، مانند یک کتاب، وب‌سایت یا فیلم نه برای نام افراد.

اگر می‌خواهید نام شخص را اضافه کنید، باید از تگ <p> استفاده کنید و تنها عنوان اثر را درون تگ <cite> قرار دهید.

در این مثال، کل استناد (citation) در قالب کامنت در کد قرار داده شده. بیایید آن را از حالت کامنت خارج کنیم و بلافاصله بعد از تگ <blockquote> قرار دهیم.

عنصر <cite> می‌تواند هم برای عنوان مقاله و هم نام مجله استفاده شود.
استایل پیش‌فرض مرورگر برای این محتوا به‌صورت مورب (italic) نمایش داده می‌شود.

از آن‌جا که قرار دادن علامت نقل‌قول (” “) در اطراف عنوان مقاله یک قرارداد نگارشی است و نه بخشی از خود عنوان، آن را خارج از تگ <cite> اضافه کرده‌ام.

در ابتدای این دوره درباره قالب‌بندی تگ‌های تو در تو با استفاده از تورفتگی (indentation) صحبت کردیم.

در این مثال، تگ <p> در خط دوم درون تگ <blockquote> قرار گرفته، بنابراین یک‌بار تورفتگی دارد.

پاراگراف‌ها جزو عناصر بلوکی (block-level) هستند که عرض کامل صفحه را می‌گیرند.
اگر پاراگراف دومی اضافه کنید، در یک خط جدید آغاز خواهد شد.

عنصر <cite> یک عنصر درون‌خطی (inline) است، یعنی داخل تگ پاراگراف نوشته می‌شود
و مرورگر متن آن را در همان خط با بقیه متن پاراگراف نمایش می‌دهد.

برای عناصر درون‌خطی معمولاً تورفتگی در کد ایجاد نمی‌کنیم، اما این فقط یک قرارداد برای خوانایی بهتر کد است و الزام نحوی (syntax) ندارد.

و درباره تورفتگی صحبت کردیم،
محتوای <blockquote> با تورفتگی در نمایش مرورگر همراه است،
اما این به خاطر فرمت‌بندی در HTML نیست، بلکه استایل پیش‌فرض مرورگر است.

بیایید پاراگراف آزمایشی را حذف کنیم.

اگر برای منبع نقل‌قول، یک URL مرجع دارید،
می‌توانید از ویژگی cite در تگ بازکننده‌ی <blockquote> استفاده کنید.
مقدار این ویژگی همان URL منبع است که در کامنت‌ها نیز آورده شده.

استفاده از ویژگی cite الزامی نیست، اما توصیه می‌شود برای افزودن زمینه‌ی بیشتر یا ارجاع دقیق‌تر به محتوای نقل‌شده، اگر در دسترس باشد.

URLی که در ویژگی cite آمده، در مرورگر نمایش داده نمی‌شود،
پس کاربران نمی‌توانند آن را ببینند یا روی آن کلیک کنند.
در عوض، این URL به عنوان فراداده (metadata) برای مرورگرها، فناوری‌های کمکی (مانند صفحه‌خوان‌ها) و موتورهای جست‌وجو عمل می‌کند.

اگر می‌خواهید منبع قابل کلیک باشد، می‌توانید یک لینک (anchor tag) اضافه کنید.
ما در ادامه دوره به جزئیات استفاده از لینک‌ها خواهیم پرداخت.

برای نقل‌قول‌های کوتاه درون یک جمله یا پاراگراف، از عنصر <q> استفاده کنید.
URL منبع را نیز می‌توان با ویژگی cite به آن افزود.

مرورگر به‌طور پیش‌فرض برای تگ <q>، علامت‌های نقل‌قول منحنی (curly quotation marks) را به اطراف متن اضافه می‌کند.

استفاده از عنصر <q> اختیاری است.
شما می‌توانید به‌سادگی علامت‌های نقل‌قول را دستی در اطراف متن قرار دهید و HTML شما همچنان معتبر خواهد بود.

اما اگر به جزئیات تایپوگرافی اهمیت می‌دهید،
در نظر داشته باشید که علامت‌های نقل‌قولی که با کیبورد تایپ می‌کنید، معمولاً به‌صورت علامت‌های صاف (straight quotes) ظاهر می‌شوند، نه منحنی.

استایل علامت‌های نقل‌قول ممکن است بسته به فونتی که استفاده می‌کنید متفاوت باشد.
تغییر استایل پیش‌فرض فونت نیازمند استفاده از CSS است.

تاریخ و زمان (Date and Time)

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

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

در HTML، برای تعریف یک بازه زمانی خاص از عنصر <time> استفاده می‌شود.
متنی که می‌خواهید در مرورگر نمایش داده شود، بین تگ‌های باز و بسته <time> قرار می‌گیرد.
این متن می‌تواند به هر فرمتی باشد که ترجیح می‌دهید.

برای اینکه تاریخ یا زمان به‌صورت قابل خواندن توسط ماشین (machine-readable) باشد،
از ویژگی datetime استفاده می‌شود.

مقدار این ویژگی می‌تواند به یکی از شکل‌های زیر باشد:

  • زمان بر اساس ساعت ۲۴ ساعته
  • تاریخ تقویمی
  • یا مدت زمان (duration)

برای تعریف زمان، مقادیر باید از این قالب‌ها پیروی کنند:

  • ساعت و دقیقه: HH:MM
  • ساعت، دقیقه و ثانیه: HH:MM:SS
  • ساعت، دقیقه، ثانیه و میلی‌ثانیه: HH:MM:SS.sss

برای تعریف تاریخ، مقدار می‌تواند شامل موارد زیر باشد:

  • سال و ماه: YYYY-MM
  • سال، ماه و روز: YYYY-MM-DD
  • یا فقط ماه و روز: --MM-DD

می‌توانید تاریخ و زمان را به‌صورت ترکیبی هم استفاده کنید.
برای مثال، ترکیب سال، ماه و روز همراه با ساعت و دقیقه به این صورت نوشته می‌شود:

htmlCopyEdit<time datetime="2025-06-11T14:30">June 11, 2025 at 2:30 PM</time>

قالب‌های بسیار دقیق‌تری نیز وجود دارند،
به‌ویژه هنگام استفاده از منطقه زمانی (time zone) و مدت زمان (duration).
فهرست کامل قالب‌های مجاز برای مقدار datetime در مستندات [MDN (Mozilla Developer Network)] قابل دسترسی است.

به خاطر داشته باشید:
HTML برای انتقال معنای معنایی (semantic meaning) محتوای شما به مرورگر استفاده می‌شود.
برای افزودن ویژگی‌های تعاملی مانند تنظیم یادآور (reminder)،
نیاز به استفاده از زبان‌های برنامه‌نویسی دیگر مانند JavaScript دارید.

پررنگ (Bold) و مورب (Italics)

بسیاری از عناصر قالب‌بندی متن (text formatting elements) برای تعریف بلوک‌های کامل متن استفاده می‌شوند،
اما گاهی ممکن است بخواهید فقط یک کلمه یا عبارت کوتاه را که داخل یک عنصر دیگر قرار دارد، قالب‌بندی کنید.

قبلاً نمونه‌ای از این مورد را با عنصر <cite> دیده‌ایم که یک عنصر درون‌خطی (inline) است.
HTML روش‌های بیشتری برای قالب‌بندی متن‌های درون‌خطی ارائه می‌دهد.

برای مثال، دو تگ وجود دارد که می‌توان از آن‌ها برای نشان دادن اهمیت یا تأکید (emphasis) استفاده کرد:
<strong> و <em>

🔸 <strong> – برای نمایش اهمیت بیشتر

در اینجا مثالی آورده شده که در مرورگر چگونه نمایش داده می‌شود:
این یک پیام هشدار است که ممکن است هنگام حذف حساب کاربری مشاهده کنید:

htmlCopyEdit<p><strong>Warning:</strong> This action cannot be undone.</p>

اضافه کردن تگ <strong> دور کلمه‌ی Warning باعث می‌شود این کلمه نسبت به متن اطرافش مهم‌تر در نظر گرفته شود.
مرورگر نیز آن را به‌صورت بولد (bold) نمایش خواهد داد.

🔸 <em> – برای نمایش تأکید معنایی

عنصر <em> برای تأکید روی واژه یا عبارتی به‌کار می‌رود که تغییر در معنی جمله ایجاد می‌کند.
درست مانند زمانی‌که هنگام صحبت کردن روی کلمه‌ای تأکید می‌کنیم.

برای مثال:

htmlCopyEdit<p>I <em>love</em> HTML.</p>

اینجا تأکید بر کلمه‌ی “love” معنی جمله را تغییر می‌دهد.
در مرورگر، متن داخل <em> به‌صورت مورب (italic) نمایش داده می‌شود.

🔹 تفاوت با تگ‌های <b> و <i>

دو عنصر دیگر هم وجود دارند: <b> و <i>
در ظاهر، در مرورگر مانند <strong> و <em> عمل می‌کنند:

  • <b> → بولد (bold)
  • <i> → مورب (italic)

اما معنای آن‌ها با <strong> و <em> متفاوت است:

تگمعنی معناییکاربرد پیشنهادی
<strong>اهمیت بالاهشدار، اعلان مهم، هشدارهای امنیتی
<b>برجسته‌سازی بدون اهمیت معناییکلمات کلیدی، نام محصول، برجسته‌سازی بصری
<em>تأکید معناییتغییر معنای جمله، استرس در بیان
<i>متن متفاوت از نثر معمولاصطلاحات خارجی، افکار درونی، عناوین کتاب

با وجود اینکه ظاهر این عناصر مشابه است، نکته مهم این است که:
HTML برای انتقال معنی است، نه فقط ظاهر.

بنابراین، تگ مناسب را بر اساس معنای محتوا انتخاب کنید،
تا مرورگرها، صفحه‌خوان‌ها (screen readers)، موتورهای جستجو و سایر فناوری‌ها بتوانند به‌درستی آن را تفسیر کنند.

اگر تنها به‌دنبال زیبایی بصری یا تغییر استایل ظاهری هستید (مثلاً فقط می‌خواهید چیزی را بولد یا مورب کنید)،
باید از CSS برای این کار استفاده کنید.

مراجع کاراکترها (Character Entity Reference)

گاهی اوقات ممکن است بخواهید از کاراکترهایی استفاده کنید که روی کیبورد استاندارد وجود ندارند،
مثل نماد کپی‌رایت (©) یا حتی اشکالی مانند فلش‌ها یا علامت تیک (✓).

یکی از وب‌سایت‌هایی که می‌توانید برای این منظور به آن مراجعه کنید، سایت HTML Arrows است.
این سایت یکی از منابع متعدد برای مشاهده لیست تمام کاراکترها و نمادهای خاص در HTML می‌باشد.

🔸 استفاده مستقیم یا با کد

شما می‌توانید این نمادها را مستقیماً کپی و در HTML جای‌گذاری کنید،
اما در برخی موارد باید از character reference استفاده کنید،
یعنی کدهای خاصی که در زیر هر نماد نمایش داده می‌شوند.

🔸 مشکل نمایش تگ‌های HTML به‌عنوان متن

فرض کنید می‌خواهید در مقاله‌ای درباره HTML، نمونه کدی قرار دهید.

اما اگر بخواهید تگی مثل <p> را به‌صورت متن نشان دهید،
مرورگر محتوای بین علامت‌های کوچکتر و بزرگتر (angle brackets) را به‌عنوان HTML تفسیر می‌کند.

برای جلوگیری از این اتفاق، نمی‌توانید از علامت‌های واقعی < و > استفاده کنید.

در این مواقع، باید از character reference برای نمایش آن‌ها استفاده کنید.

🔸 انواع کدهای کاراکتری در HTML Arrows

در سایت HTML Arrows به پایین صفحه بروید تا به نشانه‌های «کمتر از» و «بیشتر از» ( < و > ) برسید.
با کلیک روی هر نماد، انواع روش‌های نمایش آن را می‌بینید:

فرمت‌ها:

نوع کدشکل کلیتوضیح
UnicodeU+003Cبرای HTML کاربرد ندارد
CSS Code\003Cفقط در CSS استفاده می‌شود
Hex Code (هگزادسیمال)&#x3C;با &#x...; شروع می‌شود
Decimal Code (عددی)&#60;با &#...; شروع می‌شود
HTML Entity (نام‌دار)&lt;خواناتر، با &name;

مثلاً:

  • < → &lt; (lt = less than)
  • > → &gt; (gt = greater than)

استفاده از نام‌دارها (named entities) معمولاً راحت‌تر و خواناتر است.

🔸 نمونه در کد

فرض کنید می‌خواهید این کد را به‌صورت متن نمایش دهید:

htmlCopyEdit<p>This is a paragraph.</p>

برای جلوگیری از تفسیر مرورگر، آن را به شکل زیر می‌نویسید:

htmlCopyEdit&lt;p&gt;This is a paragraph.&lt;/p&gt;

🔸 فاصله غیرقابل‌شکست (Non-breaking space)

یکی دیگر از کاربردهای character reference، زمانی است که بخواهید:

  • از شکستن خط در بین دو کلمه جلوگیری کنید
  • یا بیش از یک فاصله ایجاد کنید

فرض کنید در یک متن، می‌خواهید نام و نام خانوادگی همیشه در یک خط باقی بمانند:

htmlCopyEdit<p>My name is Ali&nbsp;Reza.</p>

استفاده از &nbsp; به‌جای فاصله عادی، باعث می‌شود مرورگر این فضا را نقطه شکست خط در نظر نگیرد.

🔸 نکات تکمیلی

  • در بسیاری از موارد می‌توانید کاراکترها را مستقیماً وارد HTML کنید
  • اما در جاهایی که کاراکتر باعث خطای تفسیر می‌شود (مثل علامت‌های < >) یا نیاز به فاصله خاص دارید، باید از character reference استفاده کنید.

کد و شکست خط (Code and Line Breaks)

تا این‌جا درباره روش‌های مختلف قالب‌بندی محتوای درون‌خطی صحبت کردیم، مانند بولد (bold) و ایتالیک (italics). حالا بیایید به یک نمونه در CodePen نگاه کنیم تا چند مورد دیگر را بررسی کنیم.

یکی از عناصری که من اغلب هنگام نوشتن درباره کد استفاده می‌کنم، عنصر <code> است.
علاوه بر استفاده از مراجع کاراکتری HTML برای نمایش زاویه‌براکت‌ها (angle brackets) به‌صورت متن، می‌توانیم متن را در تگ <code> قرار دهیم.

به‌طور پیش‌فرض، متنی که در عنصر <code> قرار می‌گیرد، با فونت monospaced (یعنی هر حرف پهنای ثابتی دارد) نمایش داده می‌شود.

اگر نیاز دارید چند خط کد را نمایش دهید، باید بلوک کد را در تگ <pre> قرار دهید.
این کار همچنین به شما اجازه می‌دهد تا از فاصله‌گذاری‌های بیشتر یا کلید تب (Tab) برای نمایش تو‌رفتگی (indentation) در کد استفاده کنید.

عنصر <pre> نمایان‌گر متن از پیش قالب‌بندی‌شده (pre-formatted text) است و معمولاً برای نمایش کد استفاده می‌شود،
اما می‌توان از آن برای قالب‌بندی متونی که کد نیستند نیز استفاده کرد، مثلاً برای نگه‌داشتن فاصله‌ها یا چیدمان خاصی از متن.

عنصر دیگری که می‌توان برای افزودن قالب‌بندی بیشتر به کار برد، تگ <br> است که برای ایجاد شکست خط (line break) در یک بلوک متنی استفاده می‌شود.
این تگ معمولاً برای قالب‌بندی محتواهایی مثل شعرها یا آدرس‌ها به کار می‌رود، جایی که لازم است بخش خاصی از متن در خط جدید شروع شود.

توجه داشته باشید که <br> یک عنصر تهی (void element) است، یعنی به تگ بسته‌شونده (closing tag) نیاز ندارد.

از <br> فقط در مواقعی استفاده کنید که معنای محتوایی متن ایجاب کند که بخشی از آن در خط جدید قرار گیرد.
اگر فقط به دلایل ظاهری یا طراحی می‌خواهید کلمه‌ای به خط بعدی برود، از CSS استفاده کنید.

HTML برای محتواست، CSS برای نمایش.

HTML و تایپوگرافی (HTML and Typography)

هنگام نوشتن HTML، قانون اصلی این است که از تگ‌هایی استفاده کنیم که معنای محتوا را بیان می‌کنند، نه ظاهر آن را.
اما چند تگ HTML وجود دارد که برای سبک‌های خاص تایپوگرافی استفاده می‌شوند، مانند بالانویس (superscript) یا زیرنویس (subscript).

ممکن است به‌نظر برسد که این کار با اصل «معناگرایی بر نمایش» (semantics over presentation) در تضاد است،
اما استفاده از این تگ‌ها اشکالی ندارد، به شرط آن‌که برای رعایت استانداردهای رایج نوشتاری از آن‌ها استفاده شود.

برای مثال، پاورقی‌ها (footnotes) نشانه‌هایی هستند که معمولاً با علامت یا عدد مشخص می‌شوند
و به اطلاعات تکمیلی در پایین صفحه اشاره دارند.
در وب، از پاورقی‌ها در سایت‌هایی که نیاز به ارجاع (citation) دارند یا اطلاعات مکمل ارائه می‌دهند، زیاد استفاده می‌شود.

این نشانه‌ها معمولاً به‌صورت بالانویس قالب‌بندی می‌شوند و از تگ <sup> استفاده می‌کنند.
متنی که در <sup> قرار می‌گیرد، با اندازه‌ای کوچک‌تر و پایه‌ای بالاتر از خط اصلی نمایش داده می‌شود.

همچنین می‌توانید از عنصر <sub> برای نمایش متن به‌صورت زیرنویس استفاده کنید،
که متن را با اندازه‌ای کوچک‌تر و پایه‌ای پایین‌تر از خط اصلی نشان می‌دهد.

بیایید به یکی دیگر از عناصر بپردازیم که می‌تواند برای تعریف بهتر محتوای متنی به کار رود: عنصر <small>.
این تگ برای نمایش متن ریز (fine print) مانند توضیحات حقوقی، یادداشت‌های کپی‌رایت یا اطلاعات ثانویه استفاده می‌شود.
متن داخل این تگ کوچک‌تر از متن اطرافش نمایش داده می‌شود.

همه این تگ‌ها عناصر درون‌خطی (inline) هستند، بنابراین معمولاً لازم است ابتدا آن‌ها را درون یک تگ پاراگراف (<p>) قرار دهید.

همچنین می‌توانید برای تغییر استایل این نوع محتوا از CSS استفاده کنید.
اما در نهایت، هر دو روش مجاز و قابل‌قبول هستند.

جداول HTML

در دهه ۹۰ میلادی و اوایل ۲۰۰۰، جداول معمولاً برای طراحی ساختار صفحات وب استفاده می‌شدند. اما از آن زمان به بعد، با پیشرفت‌های جدید در HTML و CSS، این روش منسوخ شده است؛ هرچند ممکن است هنوز در وب‌سایت‌های قدیمی دیده شود. امروزه جداول عمدتاً برای سازماندهی داده‌ها در قالب سطرها و ستون‌ها به کار می‌روند، مانند فهرست قیمت یا جدول مقایسه.

یک استثنا ایمیل‌های HTML است که هنوز برای طراحی ساختار آن‌ها از جداول استفاده می‌شود.

بیایید بخش‌های مختلف یک جدول پایه HTML را بررسی کنیم:

  • همه جداول با تگ <table> شروع می‌شوند.
  • تگ <caption> اختیاری است، اما می‌تواند برای اضافه کردن توضیح مختصری درباره محتوای جدول استفاده شود.
  • ردیف‌های جدول با تگ <tr> ساخته می‌شوند.
  • تگ <th> برای هدرهای جدول به کار می‌رود. معمولاً این تگ‌ها در اولین ردیف قرار می‌گیرند تا عنوان هر ستون را مشخص کنند.
  • برای افزودن داده‌ها به ردیف‌ها، از تگ <td> استفاده می‌کنیم.

حال به یک مثال در CodePen نگاهی بیندازیم تا ببینیم جدول پایه چگونه است.

به صورت پیش‌فرض، داده‌ها در سطرها و ستون‌ها نمایش داده می‌شوند. هر داده در یک کادر جداگانه به نام سلول جدول (table cell) قرار دارد، اما به صورت پیش‌فرض هیچ فرمت‌بندی مانند خطوط دور سلول یا رنگ پس‌زمینه ندارد، بنابراین تشخیص سلول‌ها کمی سخت است.

در نسخه‌های قدیمی‌تر HTML، ویژگی‌هایی وجود داشت که می‌توانست برای استایل‌دهی جداول استفاده شود، اما این ویژگی‌ها اکنون منسوخ شده‌اند و نباید استفاده شوند.

به جای آن، جداول را با CSS می‌توان استایل داد، که در این مثال نیز من از CSS استفاده کرده‌ام. ابتدا علامت‌های /* و */ که در ابتدا و انتهای بخش CSS آمده‌اند را حذف کنید. این علامت‌ها برای نوشتن کامنت در CSS به کار می‌روند، درست مانند کامنت‌ها در HTML.

من در این مثال با CSS استایل‌هایی مانند خطوط دور سلول‌ها و فرمت‌بندی متن اضافه کرده‌ام تا محتوا واضح‌تر نمایش داده شود و خواندن اطلاعات آسان‌تر گردد.

برگردیم به HTML: در این مثال، هدرهای جدول در بالای جدول اضافه شده‌اند تا عنوان هر ستون را تعریف کنند. اما همچنین می‌توانید برای هر ردیف نیز یک عنوان تعریف کنید؛ به این صورت که تگ <th> را به عنوان اولین آیتم هر ردیف قرار دهید.

من برای ردیف دوم عنوان “heading, row 2” را می‌گذارم تا بدانیم این عنوان قرار است در کجای جدول نمایش داده شود. همین کار را برای ردیف سوم هم انجام می‌دهم.

با افزودن عنوان به هر ردیف، ما یک ستون سوم به محتوا اضافه کرده‌ایم. بنابراین اکنون عنوان ستون‌ها به اندازه یک سلول از داده‌ها جابه‌جا شده‌اند. برای اصلاح این موضوع، یک تگ <th> خالی قبل از اولین عنوان در ردیف اول اضافه می‌کنیم تا یک سلول خالی ایجاد شود.

این کار باعث می‌شود دومین و سومین سلول در ردیف بالا به سمت راست منتقل شوند و عنوان ستون‌ها با داده‌های مربوطه هم‌تراز گردند.

لطفاً این مثال را باز نگه دارید، چون در تمرین بعدی دوباره به آن نیاز خواهیم داشت.

برای بیشتر سناریوها، یک جدول ساده مانند این کافی است، اما گزینه‌های پیشرفته‌تری برای فرمت‌بندی جداول وجود دارد، به خصوص وقتی لازم است داده‌های پیچیده نمایش داده شوند یا جداول در ایمیل‌های HTML ساخته شوند.

برای اطلاعات بیشتر، مستندات MDN را بررسی کنید. این مستندات همچنین درباره ویژگی‌های منسوخ شده توضیح داده‌اند که اگر نیاز به به‌روزرسانی کدهای قدیمی داشته باشید، بسیار مفید خواهد بود.

مدل شیء سند (Document Object Model)

در طول این دوره، درباره‌ی قرار گرفتن عناصر داخل هم (مثل لیست‌ها و آیتم‌های لیست یا عناصر ساختاری صفحه مثل <main>, <article> یا <section>) صحبت کردیم. این چیدمان تو در تو در واقع روابطی بین عناصر ایجاد می‌کند که به آن مدل شیء سند یا به اختصار DOM گفته می‌شود.

DOM به شکل یک ساختار درختی نمایش داده می‌شود و هر گره (node) در این درخت نشان‌دهنده یک بخش خاص از سند است.

اصطلاحاتی که برای توصیف این روابط به کار می‌روند، مشابه اصطلاحاتی هستند که برای روابط خانوادگی استفاده می‌کنیم:

  • عناصر جد (Ancestor elements): عناصری هستند که مانند کانتینر (ظرف) عمل می‌کنند و یک یا چند سطح بالاتر از عنصر دیگر قرار دارند.
  • عناصر فرزند (Descendants): تمام عناصری که داخل یک عنصر جد قرار گرفته‌اند، فرزندان آن محسوب می‌شوند.
  • عنصر والد (Parent element): ظرف یا کانتینر مستقیم یک عنصر دیگر است. به عبارت دیگر، دقیقاً یک سطح بالاتر از عنصر فرزند قرار دارد.
  • عناصر خواهر و برادر (Sibling elements): عناصری که والد مشترک دارند.

درک این روابط برای نوشتن CSS و جاوااسکریپت بسیار ضروری است. زیرا هر دو زبان بر اساس موقعیت عناصر در DOM، هدف‌گیری می‌کنند تا استایل‌ها را اعمال کنند و قابلیت‌های تعاملی اضافه کنند.

لینک‌ها و ناوبری

اوایل دوره، کمی درباره دانشمند تیم برنرز-لی صحبت کردیم، خالق شبکه جهانی وب. او می‌خواست راه بهتری برای سازماندهی اطلاعات پیدا کند، و همچنین این اطلاعات را بتواند با هزاران پژوهشگر در مرکز تحقیقات CERN به اشتراک بگذارد. تا پایان سال ۱۹۹۰، او چند فناوری کلیدی را توسعه داد، از جمله HTTP که مخفف «پروتکل انتقال ابرمتن» (Hypertext Transfer Protocol) است، و URLها یا همان «مکان‌نماهای یکتا» (Uniform Resource Locators).

HTTP اساساً مجموعه قوانینی است برای انتقال داده‌ها در سراسر وب. و URLها، آدرس‌های اینترنت هستند. درست همانطور که برای پیدا کردن یک خانه به آدرس نیاز دارید، برای یافتن یک وب‌سایت یا صفحه وب خاص به URL نیاز دارید.

تیم برنرز-لی همچنین یک وب سرور برای میزبانی فایل‌ها، یک مرورگر برای مشاهده فایل‌ها، و در نهایت HTML برای ایجاد صفحات وب ساخت.

اگرچه همه این اجزا ضروری هستند، یکی از مهم‌ترین عناصر شبکه جهانی وب، لینک‌های ابرمتنی یا هایپرلینک‌ها هستند. هایپرلینک‌ها به کاربران اجازه می‌دهند با کلیک روی لینک‌های تعبیه شده در صفحات وب و نوشته‌شده به زبان HTML، بین صفحات و منابع مختلف در اینترنت حرکت کنند.

این فناوری انقلابی در نحوه دسترسی و به اشتراک‌گذاری اطلاعات به صورت آنلاین ایجاد کرد و پایه و اساس اینترنتی است که امروزه استفاده می‌کنیم.

آدرس‌های نسبی و مطلق

لینک‌های ابرمتنی با استفاده از عنصر anchor که با تگ <a> نمایش داده می‌شود ساخته می‌شوند. محتوایی که بین این تگ‌ها قرار می‌گیرد، قابل کلیک خواهد بود. همچنین برای مشخص کردن مقصد لینک، باید از ویژگی href استفاده کرد. لینک‌ها می‌توانند به فایل‌های پروژه یا وب‌سایت‌های خارجی اشاره کنند، که این کار با استفاده از آدرس‌های نسبی یا مطلق انجام می‌شود.

در درس قبلی درباره وب‌سایت‌ها به عنوان مجموعه‌ای از فایل‌ها صحبت کردیم. برای لینک دادن به این فایل‌ها در دایرکتوری پروژه خود، باید از مسیر فایل نسبی استفاده کنید. یعنی مکان فایل مقصد نسبت به فایلی که از آن لینک می‌دهید مشخص می‌شود.

بیایید یک مثال از ساختار دایرکتوری ببینیم. تمام صفحات HTML در یک دایرکتوری قرار دارند، یعنی در اولین سطح از پوشه اصلی پروژه به نام clothing-store که پوشه ریشه است. وقتی می‌خواهید به صفحات داخل همان دایرکتوری لینک بدهید، مقدار ویژگی href فقط نام فایل است.

راه دیگری برای لینک دادن به فایل‌ها در همان دایرکتوری، اضافه کردن نقطه و اسلش (./) قبل از نام فایل است. این روش به صورت صریح می‌گوید فایل در دایرکتوری جاری است، در حالی که استفاده فقط از نام فایل به صورت ضمنی فرض می‌کند که فایل در همان مکان قرار دارد. هر دو روش صحیح هستند، اما نحو ./ کمتر استفاده می‌شود. شخصاً وقتی به فایل‌هایی در همان دایرکتوری اشاره می‌کنم فقط از نام فایل استفاده می‌کنم.

برای لینک دادن به فایل‌ها در زیرپوشه، باید ساختار پوشه‌ها در مسیر فایل لحاظ شود. مثلاً برای لینک دادن به صفحه‌ای درون پوشه apparel از فایل apparel.html، نقطه شروع همان جایی است که فایل HTML قرار دارد، ولی نقطه پایان در یک زیرپوشه است. مسیر فایل نسبی را با نام پوشه شروع کنید تا مرورگر به داخل زیرپوشه هدایت شود، سپس اسلش بگذارید و نام فایل به همراه پسوند آن را بدون فاصله اضافه کنید.

برای ایجاد لینک‌هایی از یک زیرپوشه به فایلی در پوشه والد (پوشه بالاتر)، نقطه شروع حالا داخل زیرپوشه است. برای مثال، برای ایجاد لینک‌ها در فایل shoes.html جهت هدایت به صفحه اصلی، صفحه apparel یا صفحه تماس، از دو نقطه (..) به دنبال آن اسلش و نام فایل استفاده کنید. دو نقطه به مرورگر می‌گوید یک سطح به بالاتر در ساختار دایرکتوری برود، به جای اینکه به دنبال نام پوشه خاصی باشد.

می‌توانید از همین نحو برای لینک دادن به هر نوع فایل استفاده کنید، نه فقط فایل‌های HTML.

آدرس‌های نسبی معمولاً برای لینک‌های داخلی داخل فایل‌های وب‌سایت خودتان استفاده می‌شوند، در حالی که آدرس‌های مطلق معمولاً برای لینک‌های خارجی به کار می‌روند. یک URL مطلق باید شامل پروتکل HTTP یا HTTPS و نام دامنه باشد.

سرورهای وب به طور خودکار به فایل index.html هدایت می‌شوند، پس نیازی نیست آن را در URL وارد کنید. برای سایر صفحات و منابع وب، باید ساختار کامل دایرکتوری همراه با نام فایل را استفاده کنید.

انواع لینک‌ها

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

برای دسترسی بهتر (accessibility)، گفتن عبارتی مثل «اینجا کلیک کنید» مبهم است و واقعاً نمی‌گوید لینک به کجا می‌رود. در عوض، متن لینک را توصیفی‌تر کنید. برای مثال، اگر عبارتی مثل «اطلاعات بیشتر درباره دوره‌های ما را اینجا ببینید» دارید، به جای اینکه فقط کلمه «اینجا» لینک شود، بهتر است «دوره‌های ما» لینک شود. به این ترتیب، حتی نیازی نیست «اینجا» گفته شود. این روش توصیفی‌تر است و زمینه بیشتری ارائه می‌دهد.

لینک‌های ابرمتنی همچنین می‌توانند برای لینک‌های داخل صفحه استفاده شوند؛ تکنیکی که لینک‌هایی به بخش‌های خاصی از سند ایجاد می‌کند. لینک داخل صفحه، شما را مستقیماً به آن بخش می‌برد، بدون نیاز به اسکرول دستی در کل سند. این روش معمولاً برای ناوبری درون یک صفحه به کار می‌رود. مثال‌های متداول شامل سوالات متداول (FAQ) و لینک‌های بازگشت به بالا هستند.

برای ایجاد لینک داخل صفحه، باید به عنصری که می‌خواهید لینک به آن برود، یک ویژگی id اضافه کنید (عنصر هدف). سپس در تگ <a> مقدار ویژگی href را به صورت علامت هشتگ (#) به همراه همان مقدار id قرار دهید. این کار لینک را به بخش مشخصی از صفحه متصل می‌کند.

همچنین می‌توانید به یک محل خاص در صفحه دیگر لینک دهید، به این صورت که علامت هشتگ و مقدار id را به انتهای URL صفحه اضافه کنید.

بیایید یک مثال در CodePen بررسی کنیم. برای اینکه لینک‌های داخل صفحه به درستی کار کنند، محتوای صفحه باید از محدوده قابل مشاهده مرورگر بزرگتر باشد. وقتی لینک کلیک می‌شود، آن بخش به طور خودکار به بالای پنجره نمایش مرورگر می‌آید. اگر صفحه خیلی کوتاه باشد، مرورگر تا حد امکان به محل هدف اسکرول می‌کند.

در این مثال، بلوک‌های طولانی از کد HTML داریم، بنابراین نیاز است پایین صفحه اسکرول کنیم تا همه محتوا را ببینیم. در بیشتر ویرایشگرهای متن، می‌توانید با کلیک روی آیکون فلش کنار شماره خطوط، کدهای تو رفته (indent) را جمع کنید. من تگ‌های <p> که جواب‌ها را در بر دارند و بخش‌های اضافی محتوا را جمع می‌کنم. حالا فلش به سمت راست است که نشان می‌دهد بلوک کد جمع شده است.

جمع کردن بلوک‌های کد باعث می‌شود دیدن جایی که تگ‌ها باز و بسته می‌شوند در صفحات با کدهای طولانی راحت‌تر شود. اگر بخواهیم عیب‌یابی کنیم، می‌توانیم به راحتی محل باز و بسته شدن تگ‌ها و مقادیر href و id را بدون نیاز به اسکرول زیاد ببینیم.

لینک‌های ابرمتنی همچنین می‌توانند برای لینک دادن به اعمال خاص استفاده شوند. مثلاً ویژگی href می‌تواند برای لینک دادن به یک آدرس ایمیل استفاده شود. وقتی لینک انتخاب شود، برنامه ایمیل پیش‌فرض کاربر باز می‌شود. همچنین می‌توان به شماره تلفن لینک داد. وقتی چنین لینکی انتخاب شود، بیشتر گوشی‌ها شماره را به طور خودکار شماره‌گیری می‌کنند. در کامپیوتر، اگر برنامه‌ای مثل FaceTime یا Skype داشته باشید، آن برنامه باز می‌شود.

این نوع لینک‌های خاص نیاز به پیشوندهای مخصوص دارند: mailto: برای آدرس‌های ایمیل و tel: برای شماره تلفن، که هر دو با دو نقطه دنبال می‌شوند. برای شماره تلفن، می‌توانید فقط کد منطقه و شماره را وارد کنید. اگر بخواهید کد کشور هم اضافه کنید، باید با علامت مثبت (+) شروع کنید و سپس کد کشور را بنویسید.

لینک‌ها همچنین می‌توانند ویژگی‌های اضافی داشته باشند تا کارکرد بیشتری بدهند یا اطلاعات بیشتری ارائه کنند. چند ویژگی رایج عبارتند از: target، download و title.

ویژگی target مشخص می‌کند وقتی کاربر روی لینک کلیک کرد، سند لینک شده کجا باز شود. معمولاً با مقدار _blank استفاده می‌شود تا وب‌سایت خارجی در یک تب یا پنجره جدید باز شود (بسته به تنظیمات مرورگر کاربر). این باعث می‌شود سایت شما در پنجره اصلی باز بماند و کاربر از آن خارج نشود.

ویژگی download به مرورگر می‌گوید لینک را به عنوان یک فایل قابل دانلود در نظر بگیرد و آن را مستقیم در مرورگر باز نکند. البته رفتار دقیق بستگی به مرورگر و تنظیمات کاربر دارد. وقتی کاربر روی لینک دانلود کلیک می‌کند، ممکن است یک پنجره تأیید قبل از شروع دانلود ظاهر شود. فایل ممکن است به طور خودکار ذخیره شود یا در یک برنامه خارجی یا در مرورگر باز شود. ویژگی download می‌تواند بدون مقدار استفاده شود، اما اگر بخواهید نام فایل دانلود شده را تغییر دهید، می‌توانید مقدار آن را مشخص کنید. برای مثال، فایل‌های داخلی سازمان شما ممکن است نام‌های خاصی داشته باشند، اما شما می‌خواهید مشتریان فایل را با نامی ساده‌تر دانلود کنند.

ویژگی title می‌تواند برای افزودن اطلاعات کمکی مثل توضیح کوتاه استفاده شود. به طور پیش‌فرض، این متن هنگام قرار گرفتن موس روی لینک به صورت یک توضیح کوتاه (tooltip) ظاهر می‌شود. فقط توجه داشته باشید افرادی که با صفحه‌کلید یا صفحه لمسی کار می‌کنند به این اطلاعات دسترسی ندارند، چون توضیح فقط هنگام هاور با موس نمایش داده می‌شود؛ بنابراین مطمئن شوید اطلاعات مهم در متن لینک هم مشخص باشد.

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

ناوبری

عنصر <nav> نمایانگر لینک‌های ناوبری است. مانند هدر، این محتوا معمولاً در صفحات مختلف وب‌سایت ثابت باقی می‌ماند تا به کاربران کمک کند راحت‌تر در سایت حرکت کنند. معمولاً منوی اصلی ناوبری در هدر قرار می‌گیرد.

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

همچنین می‌توان ناوبری را در بخش اصلی (<main>) یا عنصر مقاله (<article>) گنجاند، اگر ناوبری مربوط به محتوای صفحه باشد.

عنصر <nav> همچنین ممکن است در بخش فوتر برای لینک‌های ناوبری ثانویه مانند سیاست‌ها یا شرایط خدمات قرار گیرد.

بیایید ساختار سه مثال معمول از ناوبری را بررسی کنیم:

  1. منوی اصلی ساده:
    یک لیست ساده که به سه صفحه لینک دارد: صفحه اصلی، صفحه نمونه کارها (portfolio) و صفحه تماس.
    اگر وب‌سایت شما فقط یک صفحه باشد، می‌توانید همان ساختار را استفاده کنید، اما با لینک‌های داخل صفحه برای هدایت کاربران به بخش‌های مختلف همان صفحه.
  2. ناوبری با منوی اصلی و زیرمنو:
    این مثال یک منوی ناوبری است که شامل یک زیرمنو هم هست، که با درج یک لیست دیگر داخل یک مورد لیست (<li>) ساخته شده است.
    منوی اصلی دو لینک دارد: پوشاک (apparel) و لوازم جانبی (accessories).
    زیرمنو در داخل آیتم لیست پوشاک قرار گرفته است.
  3. ناوبری به سبک مسیر (breadcrumb):
    برای این نوع ناوبری از لیست‌های مرتب شده (<ol>) استفاده می‌شود، زیرا ترتیب اهمیت دارد.
    اولین آیتم لیست نمایانگر لینک سطح بالا (پوشاک) است.
    آیتم دوم نمایانگر زیرآیتم (کفش‌ها) است.
    آیتم جاری (athletic) نیازی به لینک ندارد چون نشان‌دهنده صفحه‌ای است که در حال حاضر مشاهده می‌کنید.

من CSS را اضافه کرده‌ام تا استایل‌های پیش‌فرض لیست‌ها حذف شود تا ناوبری نزدیک‌تر به شکلی که معمولاً در وب‌سایت‌ها دیده می‌شود نمایش داده شود و زمینه بهتری به ما بدهد.

در حالی که می‌توانید با CSS بسیار بیشتر کار کنید تا ظاهر لیست‌های ناوبری را تغییر دهید، مطمئن شوید که همیشه با HTML سازمان‌یافته و معنایی (semantic) شروع می‌کنید.

تصاویر در Html

فرمت‌های تصویری

قبل از آنکه درباره نحوه افزودن تصویر با HTML صحبت کنیم، بیایید نگاهی به فرمت‌های مختلف تصویر مورد استفاده در وب بیندازیم. این فرمت‌ها به دو دسته کلی تقسیم می‌شوند: تصاویر پیکسلی (raster) و تصاویر برداری (vector).

تصاویر پیکسلی (Raster) از پیکسل‌ها تشکیل شده‌اند که در واقع مربع‌های بسیار کوچکی هستند. هر پیکسل رنگ مخصوص به خود را دارد و مجموع این پیکسل‌ها تصویر نهایی را شکل می‌دهند. هر چه تعداد پیکسل‌ها بیشتر باشد، کیفیت و جزئیات تصویر نیز بالاتر خواهد بود. عکس‌های دیجیتال معمولاً از نوع پیکسلی هستند و اغلب برای ویرایش عکس‌ها و گرافیک‌ها به‌کار می‌روند.

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

تمام فرمت‌های تصویری که در این ویدیو بررسی می‌کنیم از نوع پیکسلی هستند، به جز SVG که یک فرمت برداری است.

فایل‌های تصویری دیجیتال همیشه مربعی یا مستطیلی هستند. برای ایجاد توهم شکل‌های دیگر (مثلاً لوگویی با شکل نامنظم)، از پس‌زمینه شفاف استفاده می‌شود.

در ادامه، نگاهی به چند فرمت رایج تصویری در وب می‌اندازیم:

JPEG

نمایش بیش از ۱۶ میلیون رنگ را پشتیبانی می‌کند، بنابراین برای عکس‌ها ایده‌آل است. این فرمت از تنوع رنگی زیاد، طیف‌های رنگی (gradient)، تُن‌ها و جزئیات فراوان پشتیبانی می‌کند.
پسوند فایل می‌تواند .jpeg یا .jpg باشد.
فرمت JPEG از شفافیت پشتیبانی نمی‌کند.

GIF

فقط از ۲۵۶ رنگ پشتیبانی می‌کند، بنابراین برای تصاویری با تنوع رنگی کم مناسب‌تر است.
می‌تواند متحرک باشد، که یکی از کاربردهای محبوب آن است. اما به‌دلیل محدودیت رنگ، انیمیشن‌های عکس‌محور ممکن است دانه‌دانه یا پیکسلی به‌نظر برسند.
این محدودیت رنگ معمولاً به فایل‌هایی با حجم کمتر منجر می‌شود.
از پس‌زمینه شفاف نیز پشتیبانی می‌کند.

PNG

قادر به نمایش میلیون‌ها رنگ است، بنابراین برای تصاویر رنگی متنوع یا عکس‌ها مناسب است.
از شفافیت پشتیبانی می‌کند. اگر به تصویر باکیفیت و شفاف نیاز دارید، PNG بهتر از GIF است.
حجم فایل‌های PNG متغیر است:

  • عکس‌ها ممکن است بزرگ‌تر از JPEG باشند.
  • اما گرافیک‌های ساده می‌توانند فایل‌های کوچک‌تری تولید کنند.

WebP

فرمت جدیدی است که توسط Google توسعه یافته و از عکس، انیمیشن و شفافیت پشتیبانی می‌کند.
کیفیت آن تقریباً مانند JPEG و PNG است، اما به‌دلیل تکنیک‌های فشرده‌سازی مخصوص وب، حجم فایل‌ها کمتر است.

SVG (Scalable Vector Graphics)

تنها فرمت برداری مورد استفاده در وب است.
بر پایه معادلات ریاضی ساخته شده و پیکسل ندارد.
برای عکس مناسب نیست، اما برای گرافیک‌های دو‌بعدی ساده، اشکال هندسی و لوگوها عالی است.
حجم فایل‌ها معمولاً کوچک‌تر است، مخصوصاً برای اشکال ساده و رنگ‌های محدود.

SVG مبتنی بر زبان XML است (مشابه HTML)، یعنی می‌توان آن را با کدنویسی ساخت.
مثلاً در CodePen می‌توانید با عناصر <rect> (مستطیل) و <circle> (دایره)، یا عنصر پیشرفته‌تر <path> اشکال گوناگون بسازید.
برای جای‌گذاری، رنگ‌دهی، اندازه‌دهی و موارد دیگر می‌توان از ویژگی‌های (attributes) مختلف استفاده کرد.

SVGها مانند عناصر HTML رفتار می‌کنند. می‌توان آن‌ها را با CSS استایل‌دهی کرد و با JavaScript تغییر داد. همچنین می‌توان فایل‌های SVG را در ویرایشگر متن باز کرد و کد آن را دید.

اگرچه کدنویسی SVG ممکن است گسترده باشد، اما تنها راه ساخت آن نیست. می‌توان SVG را با نرم‌افزارهای گرافیک برداری مانند Illustrator یا Affinity Designer نیز ساخت.

در نهایت، در یک پروژه ممکن است از فرمت‌های مختلف تصویری استفاده شود، بسته به نوع تصویر و نیاز شما. JPEG و PNG نقاط شروع رایجی هستند، اما دانستن سایر گزینه‌ها نیز بسیار مفید است.

قرار دادن تصاویر در HTML

تا اینجا روش‌های مختلف فرمت‌بندی محتوای متنی را بررسی کردیم، اما تصاویر نیز می‌توانند به‌عنوان محتوا استفاده شوند. برای مثال:

  • در سایت‌های فروشگاهی برای نمایش محصولات،
  • در سایت‌های شخصی برای نمایش تصویر پروفایل یا پیش‌نمایش پروژه‌ها،
  • یا به‌عنوان عنصر طراحی مانند یک بنر در بالای صفحه.

برای اضافه کردن تصویر در یک صفحه HTML، از تگ <img> استفاده می‌کنیم. این تگ یک عنصر خودبسته (void) است، بنابراین نیازی به تگ بسته ندارد.

ویژگی‌های اصلی تگ <img>

  • src (source): آدرس فایل تصویر را مشخص می‌کند. این ویژگی اجباری است.
  • آدرس می‌تواند به‌صورت:
    • نسبی (relative): اشاره به فایل داخل پروژه.
    • مطلق (absolute): اشاره به فایل در یک منبع خارجی.

نحوه نوشتن URL برای تصاویر مانند لینک‌ها (hyperlink) است.

استفاده از تصاویر موقت (Placeholder)

هنگام ساخت یک وب‌سایت، ممکن است همه محتوای نهایی را در اختیار نداشته باشید. درست مانند استفاده از متن‌های موقتی (مانند لورم ایپسوم)، می‌توانید از سرویس‌های تولید تصویر موقت استفاده کنید. چند نمونه:

1. Lorem Picsum

  • تصاویر تصادفی با آدرس مطلق ارائه می‌دهد.
  • کافی‌ست URL به همراه عرض و ارتفاع را بنویسید: https://picsum.photos/300/200
  • امکانات دیگر:
    • تعیین شناسه (ID) برای نمایش تصویر خاص.
    • استفاده از تصویر ثابت تصادفی.
    • اعمال افکت‌های سیاه‌وسفید (grayscale) یا تاری (blur).
    • ترکیب چند ویژگی برای کنترل بیشتر.

2. Placehold.co

  • به‌جای عکس واقعی، تصویری با ابعاد و متن دلخواه نمایش می‌دهد.
  • مناسب برای قالب‌ها، وایرفریم‌ها و راهنمای طراحی است.
  • می‌توانید:
    • فرمت تصویر را مشخص کنید (مثلاً PNG).
    • رنگ پس‌زمینه و متن را تغییر دهید.
    • متن دلخواه روی تصویر قرار دهید.
    • از فونت‌های مختلف استفاده کنید.
    • تصاویر رتینا (وضوح بالا) بسازید.

این تصاویر موقتی هستند و باید در آینده با محتوای اصلی جایگزین شوند. همچنین اگر سرویس از دسترس خارج شود، تصویر دیگر قابل نمایش نخواهد بود.

alt: متن جایگزین برای تصاویر

ویژگی alt باید برای همه تگ‌های <img> تعریف شود. این متن:

  • برای اسکرین‌ریدرها (Screen Readers) خوانده می‌شود.
  • زمانی که تصویر بارگذاری نشود، در مرورگر نمایش داده می‌شود.
  • به کاربران کمک می‌کند بفهمند چه تصویری قرار بوده نمایش داده شود.

نمونه‌هایی از عدم نمایش تصویر:

  • اشتباه تایپی در آدرس فایل.
  • مسیر نادرست.
  • مسدود شدن تصاویر در ایمیل‌ها یا مرورگرها.

نکات حرفه‌ای

  • بهتر است قبل از شروع طراحی، محتوای واقعی تصاویر را در اختیار داشته باشید.
  • اگر از محتوای موقتی استفاده می‌کنید، سعی کنید شبیه‌ترین گزینه را به محتوای نهایی انتخاب کنید.
  • اگر تصویر شخصی ندارید، می‌توانید از سایت‌های عکس استوک (Stock Photos) استفاده کنید:
    • برخی رایگان هستند.
    • برخی دیگر نیاز به پرداخت دارند (خرید تکی یا اشتراک).
    • لیستی از منابع پیشنهادی در فایل PDF پیوست وجود دارد.

نکته مهم: حتی اگر تصویری رایگان باشد، حتماً قوانین کپی‌رایت، مجوز استفاده و شرایط ذکر منبع (attribution) را بررسی کنید. این اطلاعات معمولاً در فایل متنی همراه دانلود یا در بخش راهنمای استفاده سایت آورده شده‌اند.

ویژگی‌های Width و Height برای تصاویر در HTML

اکنون که با نحوۀ پایه‌ای تگ تصویر و ویژگی‌های ضروری آن آشنا شدیم، بیایید نحوه استفاده از ویژگی‌های اضافی را بررسی کنیم تا عملکرد آن را بهبود دهیم.

در مثال این بخش، از فایل 05_03_start استفاده شده که در پوشه‌ی فصل ۵ با نام 05_03 قرار دارد. همین فایل برای تمام دموهای این فصل استفاده می‌شود. تصاویر متعددی نیز در این پوشه وجود دارند که در طول فصل به کار خواهند رفت.

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

در این آموزش از VS Code استفاده می‌کنیم چون نسخه رایگان CodePen اجازه بارگذاری تصاویر اختصاصی را نمی‌دهد، و ما در این فصل با چندین تصویر کار خواهیم کرد.

برای راحتی بیشتر:

  • زوم مرورگر را کاهش داده‌ام.
  • نوار کناری VS Code را بسته‌ام تا هم کد و هم پیش‌نمایش تصویر به‌طور کامل دیده شوند.

ابعاد پیش‌فرض و ویژگی‌های Width/Height

زمانی که از تگ <img> با ویژگی src استفاده می‌کنید، تصویر با همان ابعاد اصلی‌اش نمایش داده می‌شود.

برای مثال:

  • اگر تصویر اصلی ۸۰۰ در ۵۰۰ پیکسل باشد، همین ابعاد را در مرورگر خواهد داشت.

یک مقدار CSS در بخش <head> وجود دارد که فقط تصویر را در وسط صفحه قرار می‌دهد و تأثیری بر ابعاد ندارد.

ابعاد تصاویر را می‌توان از طریق نام فایل یا با بررسی اطلاعات فایل در Finder یا File Explorer مشاهده کرد.

اضافه کردن ویژگی‌های Width و Height

حتی اگر تصویر در اندازه دلخواه نمایش داده می‌شود، می‌توانید ویژگی‌های width و height را در تگ تصویر اضافه کنید.

  • این ویژگی‌ها فقط عدد می‌گیرند (بدون px) و مرورگر آن‌ها را به عنوان پیکسل تفسیر می‌کند.
  • برای خوانایی بهتر می‌توانید هر ویژگی را در خط جداگانه بنویسید.
  • مرورگر فاصله‌های اضافی یا شکست خط را نادیده می‌گیرد.

در مثال ما، وقتی width="800" و height="500" را به تصویر اضافه می‌کنیم، تغییری در ظاهر ایجاد نمی‌شود چون این همان اندازه اصلی تصویر است.

بهبود تجربه کاربری با رزرو فضا

یکی از دلایل مهم استفاده از این ویژگی‌ها، بهبود عملکرد بارگذاری صفحات است:

  • قبل از بارگذاری، تصاویر هیچ فضایی اشغال نمی‌کنند.
  • وقتی بارگذاری شوند، ناگهان در جای خود ظاهر می‌شوند و محتوا را جابجا می‌کنند.
  • این مسئله به‌ویژه در فایل‌های حجیم یا در اتصال‌های کند بیشتر دیده می‌شود.
  • با تعیین عرض و ارتفاع، مرورگر از قبل برای تصویر جا در نظر می‌گیرد و از جابجایی محتوای صفحه (Layout Shift) جلوگیری می‌شود.

تنظیم ابعاد متفاوت از ابعاد اصلی

اگر یکی از ابعاد را به عددی متفاوت تغییر دهید، مرورگر تصویر را با آن اندازه جدید نشان می‌دهد.

مثلاً:

<img src="example.jpg" width="400" height="500">

در این حالت ممکن است تصویر کشیده یا فشرده شود، چون نسبت ابعاد (Aspect Ratio) تغییر کرده است.

نسبت ابعاد یعنی نسبت بین عرض و ارتفاع تصویر، مانند:

  • 16:9
  • 4:3

نکته مهم درباره حفظ نسبت ابعاد

اگر فقط یکی از ویژگی‌های width یا height را تعریف کنید:

  • مرورگر مقدار دیگر را به‌صورت خودکار و متناسب تنظیم می‌کند.
  • این کار باعث می‌شود نسبت ابعاد تصویر حفظ شود و تصویر تحریف نشود.

مثلاً:

<img src="example.jpg" width="400">

در این حالت، مرورگر به‌طور خودکار height را طوری تنظیم می‌کند که نسبت ابعاد تصویر همانند نسخه اصلی باقی بماند.

جمع‌بندی

  • ویژگی‌های width و height اختیاری هستند، اما برای تجربه کاربری بهتر توصیه می‌شوند.
  • هنگام تنظیم ابعاد، حفظ تناسب عرض به ارتفاع اهمیت زیادی دارد.
  • استفاده از فقط یکی از این دو ویژگی، منجر به حفظ نسبت ابعاد می‌شود.
  • از این ویژگی‌ها برای رزرو فضای تصویر و جلوگیری از پرش محتوای صفحه استفاده کنید.

بهینه‌سازی تصاویر برای وب

راه‌های زیادی برای تغییر اندازه تصاویر با استفاده از HTML یا CSS وجود دارد، اما در بسیاری از مواقع لازم است ابتدا خودِ فایل تصویر را تغییر اندازه دهید.

دلیلش این است که:

  • تصاویر دوربین‌ها معمولاً برای چاپ بهینه‌سازی شده‌اند،
  • بنابراین خیلی بزرگ‌تر از آن چیزی هستند که برای صفحات وب نیاز داریم.

اما چطور بفهمیم اندازه مناسب تصویر برای وب چقدر است؟
بیایید چند نکته مهم را بررسی کنیم.

بررسی یک مثال واقعی

در پوشه تمرین، فایل dogs-original.png را بررسی می‌کنیم.

  • در اطلاعات فایل می‌بینیم که ابعاد آن حدود ۴۹۰۰ در ۳۰۰۰ پیکسل است،
  • در حالی که فایل تصویری که در مثال استفاده شده بسیار کوچکتر است.

نرم‌افزارهای ویرایش تصویر

برای ویرایش و بهینه‌سازی تصاویر می‌توان از ابزارهای حرفه‌ای مانند:

  • Photoshop
  • Affinity Photo

استفاده کرد.

همچنین جایگزین‌های رایگان نیز وجود دارند مانند:

  • GIMP
  • Pixlr

نحوه کار با این ابزارها در بخش‌های بعدی آموزش داده خواهد شد.
فعلاً روی مفاهیم پایه‌ای تمرکز می‌کنیم: رزولوشن و تراکم پیکسلی.

رزولوشن (Resolution)

رزولوشن یعنی تعداد پیکسل‌هایی که روی یک صفحه نمایش داده می‌شوند.
معمولاً به‌صورت عرض × ارتفاع بیان می‌شود، مثلاً:

  • 1920×1080 یعنی 1920 پیکسل افقی و 1080 پیکسل عمودی.

نکته مهم:

  • رزولوشن مستقل از اندازه فیزیکی صفحه نمایش است.
  • دو نمایشگر با ابعاد یکسان می‌توانند رزولوشن‌های متفاوتی داشته باشند.

تراکم پیکسلی (Pixel Density / PPI)

تراکم پیکسلی یعنی چند پیکسل در هر اینچ از صفحه جا می‌گیرند.

  • با واحد PPI (pixels per inch) اندازه‌گیری می‌شود.
  • هر چه PPI بیشتر باشد، کیفیت تصویر و وضوح جزئیات بالاتر است.

برای مثال:

  • اگر یک صفحه نمایش دو برابر PPI نسبت به صفحه‌ای دیگر داشته باشد، در همان فضای فیزیکی، چهار برابر پیکسل خواهد داشت (۲ برابر در عرض × ۲ برابر در ارتفاع).

اصطلاح Retina که توسط اپل معرفی شده، به نمایشگرهایی با تراکم پیکسلی بالا اشاره دارد.
گاهی از واژه‌های Retina-like یا «نمایشگر با وضوح بالا» نیز برای نمایشگرهای مشابه استفاده می‌شود.

چرا بهینه‌سازی اهمیت دارد؟

در صفحات وب:

  • باید ابعاد فایل تصویر را به حداقلِ لازم برسانید.
  • این کار باعث می‌شود صفحه سریع‌تر بارگذاری شود و فضای کمتری اشغال شود.

اما اگر برای نمایشگرهای با تراکم پیکسلی بالا طراحی می‌کنید (مثل Retina):

  • تصویر باید حداقل ۲ برابر رزولوشن مورد نظر باشد.
  • سپس با HTML یا CSS ابعاد آن را کوچک‌تر کنید.

یک مثال عملی

در ویرایشگر، یک تصویر داریم که در ابعاد 400 در 250 پیکسل نمایش داده می‌شود.

  • با استفاده از ویژگی‌های width و height این ابعاد مشخص شده‌اند.

حالا برای مقایسه:

  1. تصویری با اندازه فایل ۸۰۰ در ۵۰۰ پیکسل (یعنی ۲ برابر)
  2. تصویری با اندازه فایل ۴۰۰ در ۲۵۰ پیکسل (هم‌اندازه نمایش)

هر دو را در HTML قرار می‌دهیم:

<img src="dogs-800x500.png" width="400" height="250" alt="Dog high-res">
<img src="dogs-400x250.png" width="400" height="250" alt="Dog low-res">

در مرورگر، هر دو تصویر هم‌اندازه نمایش داده می‌شوند،
اما تصویری که رزولوشن اصلی‌اش بالاتر است (۸۰۰×۵۰۰) شفاف‌تر، واضح‌تر و دقیق‌تر است، چون پیکسل‌های بیشتری در همان فضا فشرده شده‌اند.

نتیجه‌گیری و نکات مهم

  • ابعاد تصویر را مطابق نیاز صفحه کاهش دهید.
  • اگر می‌خواهید در نمایشگرهای Retina یا 4K کیفیت حفظ شود:
    • فایل تصویری را ۲ برابر اندازه نمایش بسازید.
    • سپس با CSS/HTML اندازه نمایشی را تعیین کنید.
  • از ابزارهایی مانند Photoshop، GIMP یا Pixlr برای بهینه‌سازی استفاده کنید.
  • حجم تصاویر تأثیر زیادی بر سرعت بارگذاری سایت دارد، بنابراین بهینه‌سازی آن‌ها بسیار مهم است.

ابزارهای توسعه‌دهنده و تغییر اندازه تصاویر

برای اینکه تصاویر سایت شما در تمام اندازه‌های صفحه به‌درستی نمایش داده شوند، باید:

  • چند نسخه متفاوت از هر تصویر با اندازه‌های مختلف تهیه کنید.
  • و بتوانید آن‌ها را در اندازه‌های مختلف صفحه نمایش آزمایش کنید.

در این بخش، دو ابزار مختلف را بررسی می‌کنیم:

  1. Pixlr: ابزاری آنلاین برای تغییر اندازه تصاویر
  2. ابزارهای توسعه‌دهنده (Developer Tools) مرورگرها برای تست تصاویر در نمایشگرها و رزولوشن‌های مختلف

تست ریسپانسیو بودن تصاویر با DevTools

تمام مرورگرها ابزارهایی برای توسعه‌دهنده دارند، اما رابط کاربری آن‌ها ممکن است کمی متفاوت باشد.
در این آموزش، از ابزار توسعه‌دهنده مرورگر فایرفاکس (Firefox Developer Tools) استفاده می‌شود.

نحوه باز کردن DevTools در Firefox:

  • روی هر نقطه از صفحه راست‌کلیک کنید و گزینه Inspect را بزنید.
  • یا از میان‌بر صفحه‌کلید استفاده کنید:
    • Mac: Command + Option + I
    • Windows: Ctrl + Shift + I

به‌طور پیش‌فرض، ابزار در پایین مرورگر باز می‌شود.

ورود به حالت طراحی ریسپانسیو (Responsive Design Mode):

  • روی آیکونی که شبیه موبایل و تبلت است کلیک کنید (در نوار ابزار بالا سمت راست).
  • این حالت، ناحیه نمایش را به ابعاد دستگاه‌های مختلف شبیه‌سازی می‌کند.
تنظیمات حالت ریسپانسیو:
  • از منوی کشویی بالا، می‌توانید دستگاه‌هایی مانند iPhone، Pixel، iPad و … را انتخاب کنید.
  • یا به‌صورت دستی عرض و ارتفاع صفحه را وارد کنید.
  • همچنین می‌توانید با گرفتن گوشه سمت راست یا پایین صفحه نمایشی، آن را به‌صورت دستی تغییر اندازه دهید.
  • با کلیک بر آیکون گوشی موبایل می‌توانید جهت صفحه را بچرخانید (portrait ↔ landscape).

تراکم پیکسلی (DPR):

  • گزینه DPR در بالای صفحه، نسبت پیکسلی دستگاه (Device Pixel Ratio) را تنظیم می‌کند.
  • معمولاً:
    • DPR = 1 → نمایشگرهای معمولی
    • DPR = 2 یا 3 → نمایشگرهای با تراکم بالا (مانند Retina)

نکته: این شبیه‌سازی ممکن است کاملاً دقیق نباشد، اما بسیار مفید است وقتی به همه دستگاه‌ها دسترسی ندارید.

ابزار Pixlr برای تغییر اندازه فایل تصویر

اکنون به سراغ تغییر اندازه فایل تصویری با ابزار آنلاین Pixlr می‌رویم.

  • Pixlr یک ابزار ساده و رایگان است که در مرورگر اجرا می‌شود.
  • نیازی به نصب ندارد.
  • برای تغییر اندازه تصویر کاملاً مناسب است.

مراحل تغییر اندازه در Pixlr:

  1. وارد سایت Pixlr شوید و Pixel Editor را انتخاب کنید.
  2. روی Open Image کلیک کرده و تصویر مورد نظر را انتخاب کنید.
  3. پس از باز شدن تصویر:
    • به منوی Image بروید.
    • گزینه Image Size را انتخاب کنید (نه Canvas Size).
    • اگر می‌خواهید نسبت تصویر حفظ شود، فقط یکی از مقادیر عرض (Width) یا ارتفاع (Height) را تغییر دهید.
      • مقدار دیگر به‌صورت خودکار تنظیم می‌شود.
  4. روی Apply کلیک کنید.
  5. به منوی File > Export > Quick Export as PNG بروید.
  6. تصویر جدید در رایانه شما ذخیره می‌شود.

نکته‌های تکمیلی:

  • در پروژه‌های واقعی، ممکن است مجبور باشید چند نسخه از یک تصویر ایجاد کنید.
  • کار طراحی سایت گاهی تکراری و زمان‌بر است، اما این بخشی از فرآیند حرفه‌ای است.
  • اگر از سیستم مدیریت محتوا مثل وردپرس یا جوملا استفاده می‌کنید:
    • افزونه‌هایی وجود دارد که به‌طور خودکار تصاویر را پس از بارگذاری، به ابعاد مختلف تبدیل می‌کنند.
  • در سایت‌سازهایی مانند Squarespace، این ویژگی اغلب به‌صورت داخلی وجود دارد.

جمع‌بندی و پیشنهادها

  • از DevTools برای تست ریسپانسیو بودن تصاویر در ابعاد و تراکم‌های مختلف استفاده کنید.
  • با ابزار Pixlr یا نرم‌افزارهایی مثل Photoshop یا GIMP، تصاویر را قبل از استفاده در سایت بهینه‌سازی کنید.
  • برای کیفیت بهتر در صفحه‌نمایش‌های Retina، از تصاویر با رزولوشن دوبرابر و ابعاد نمایشی نصف استفاده کنید.
  • اگر از CMS استفاده می‌کنید، افزونه‌های ریسایز خودکار را فعال کنید.

تصاویر واکنش‌گرا

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

اما امروز، دستگاه‌های بسیار متنوعی به اینترنت متصل می‌شوند:
از گوشی و تبلت گرفته تا لپ‌تاپ، دسکتاپ، تلویزیون‌ها و حتی یخچال‌های هوشمند!

در سال 2010، طراح معروف ایتن مارکوت (Ethan Marcotte) مفهوم “طراحی واکنش‌گرا” (Responsive Web Design) را معرفی کرد تا این تغییرات را پاسخ دهد.
این رویکرد طراحی، تمرکز دارد بر ساخت وب‌سایت‌هایی که با اندازه‌های مختلف صفحه نمایش سازگار می‌شوند.

تصاویر واکنش‌گرا چه هستند؟

تصاویر واکنش‌گرا بخشی مهم از طراحی واکنش‌گرا هستند.
چند روش مختلف HTML برای ایجاد تصاویر واکنش‌گرا وجود دارد که هرکدام برای موقعیت خاصی طراحی شده‌اند.

سناریوی پایه: استفاده از یک فایل تصویر

اگر فقط یک فایل تصویر دارید، باید نسخه‌ای را استفاده کنید که دست‌کم دو برابر ابعاد نمایشی باشد.
مثلاً اگر تصویر باید در اندازه 400×250 پیکسل نمایش داده شود، تصویری با ابعاد 800×500 انتخاب کنید.

✅ این روش روی تمام نمایشگرها کار می‌کند – چه معمولی، چه با تراکم پیکسلی بالا (مثل Retina).

❗ اما نمایشگرهای معمولی نیازی به لود کردن فایل بزرگ‌تر ندارند، و این باعث کندی لود سایت می‌شود.

راهکار بهینه‌تر: ویژگی srcset در تگ <img>

به‌جای فقط استفاده از src، می‌توانیم از ویژگی srcset در تگ <img> استفاده کنیم تا مرورگر بتواند بر اساس نیاز و شرایط صفحه، از بین چند تصویر مختلف انتخاب کند.

به کمک srcset می‌توان:

  • برای نمایشگرهای معمولی، تصویر کم‌حجم‌تر لود شود.
  • برای نمایشگرهای با تراکم پیکسلی بالا (مثلاً Retina)، تصویر واضح‌تری لود شود.

نمونه کد HTML:

<img 
  srcset="dogs-400x250.png, dogs-800x500.png 2x" 
  src="dogs-400x250.png" 
  width="400" 
  height="250" 
  alt="Dogs resting on grass">

توضیح:

  • srcset:
    • تصویر اول: dogs-400x250.png برای نمایشگرهای معمولی (DPR = 1)
    • تصویر دوم: dogs-800x500.png 2x برای نمایشگرهایی با دو برابر تراکم پیکسل (DPR = 2)
  • src: نقش پشتیبان (fallback) برای مرورگرهای قدیمی
  • width و height: تعریف ابعاد نمایشی (اختیاری، اما بهتر است مشخص باشد)

تست در ابزار توسعه‌دهنده (DevTools):

با باز کردن فایل در مرورگر و استفاده از Developer Tools:

  • اگر مقدار DPR = 1 باشد:
    • تصویر 400×250 نمایش داده می‌شود.
  • اگر مقدار DPR = 2 باشد:
    • تصویر 800×500 لود می‌شود.
  • اگر DPR را روی 3 بگذاریم:
    • باز هم تصویر 800×500 نمایش داده می‌شود، چون گزینه با کیفیت بالاتری موجود نیست.

جمع‌بندی این بخش:

ویژگیتوضیح
srcمسیر پیش‌فرض تصویر، برای مرورگرهای قدیمی
srcsetفهرست تصاویر با کیفیت‌های مختلف برای انتخاب هوشمند توسط مرورگر
2xنشان می‌دهد تصویر مناسب نمایشگرهایی با تراکم پیکسلی ۲ برابر است
مزیتکاهش حجم لود برای کاربران با نمایشگر معمولی و وضوح بالا برای دیگران

در بخش قبلی، با استفاده از ویژگی srcset، تصاویر را بر اساس تراکم پیکسلی نمایشگر (DPR) جایگزین کردیم. در آن روش، ابعاد نمایشی تصویر (display size) در همه مرورگرها ثابت می‌ماند.

اما حالا می‌خواهیم تصاویر را هم بر اساس نوع نمایشگر (DPR) و هم عرض مرورگر (viewport width) کنترل کنیم. این روش به کمک ویژگی sizes و توصیفگر عرض (width descriptor) انجام می‌شود.

✅ تفاوت مهم: توصیفگر عرض (w) در مقابل توصیفگر تراکم (x)

ویژگیتوضیح
2x, 3xتوصیفگر تراکم پیکسلی (pixel density)
400w, 800wتوصیفگر عرض تصویر واقعی به پیکسل، که برای مقایسه با عرض مرورگر استفاده می‌شود

💡 ویژگی sizes: نمایش مشروط بر اساس عرض مرورگر

  • srcset: لیست تصاویر با عرض مشخص (با w)
  • sizes: به مرورگر می‌گوید در چه عرضی، تصویر با چه عرض نمایشی نمایش داده شود
  • مرورگر بر اساس sizes تشخیص می‌دهد کدام تصویر مناسب‌تر است و آن را از srcset انتخاب می‌کند

🎯 هدف از این روش

مثلاً:

  • وقتی عرض مرورگر حداکثر 600 پیکسل بود → تصویر 400 پیکسلی با عرض نمایش 400 پیکسل
  • وقتی عرض بین 601 تا 1000 پیکسل بود → تصویر 800 پیکسلی با نمایش 600 پیکسلی
  • وقتی عرض بیش از 1000 پیکسل بود → تصویر 1600 پیکسلی با نمایش کامل

🧪 نمونه کد HTML

<!-- تصویر قبلی با تراکم پیکسلی -->
<img 
  srcset="dogs-400x250.png, dogs-800x500.png 2x" 
  src="dogs-400x250.png" 
  alt="Dogs resting on grass">

<!-- تصویر جدید با توصیفگر عرض -->
<img 
  srcset="
    dogs-400x250.png 400w, 
    dogs-800x500.png 800w, 
    dogs-1600x1000.png 1600w" 
  sizes="
    (max-width: 600px) 400px, 
    (max-width: 1000px) 600px, 
    1600px" 
  src="dogs-400x250.png" 
  class="responsive" 
  alt="Dogs resting on grass">

💡 نکته مهم:

ویژگی‌های width و height را از تگ <img> حذف می‌کنیم تا با sizes تداخل نداشته باشند.

🎨 اعمال CSS برای نمایش بهتر تصویر

در بخش <head> دو بلوک CSS داریم:

  1. بلوک اول:
    تصویر را در مرکز قرار می‌دهد و padding اطراف را حذف می‌کند.
  2. بلوک دوم:
    به کلاس .responsive اعمال می‌شود و عرض تصویر را برابر با 100% از عرض صفحه نمایش تنظیم می‌کند، با height: auto برای حفظ نسبت ابعاد.
img.responsive {
  width: 100%;
  height: auto;
}

در HTML:

<img class="responsive" ... >

🔁 رفتار مرورگر چگونه است؟

  • مرورگر، عرض مرورگر (viewport width) را با sizes مطابقت می‌دهد.
  • بر اساس آن، مناسب‌ترین فایل را از srcset انتخاب می‌کند.
  • تصویر ممکن است کمی بزرگ‌تر یا کوچک‌تر از نمایشگر باشد، اما هدف کاهش حجم فایل و مصرف پهنای باند است.

✅ مقایسه دو روش:

ویژگیاستفاده از x (تراکم پیکسلی)استفاده از w + sizes (عرض صفحه)
کنترل کیفیت در نمایشگرهای Retina✔✔
کنترل تصویر بر اساس عرض مرورگر❌✔
مناسب برای طراحی ریسپانسیو کامل❌✔
نیاز به CSS مکمل برای نمایش بهترمعمولاً نهبله، ترجیحاً ✔

🧠 جمع‌بندی: تفاوت srcset با توصیفگر تراکم و عرض

روشویژگیکنترل چه چیزی؟
srcset + 2xتصاویر مختلف برای نمایشگرهای مختلفکیفیت تصویر در نمایشگر
srcset + 400w + sizesتصاویر مختلف برای عرض‌های مختلف صفحهعرض و حجم تصویر بر اساس عرض مرورگر

🎨 تصاویر واکنش‌گرا با <picture>

در تکنیک‌های قبلی، تنها اندازه تصویر (resolution یا width) را بر اساس شرایط تغییر می‌دادیم، اما ترکیب تصویر ثابت می‌ماند. این روش در بسیاری از موارد خوب عمل می‌کند، ولی گاهی نیاز داریم ترکیب تصویر را برای نمایش بهتر در دستگاه‌های مختلف تغییر دهیم.

مثال:

  • در موبایل، تنها بخش مهم تصویر را با کراپ نمایش دهیم.
  • در دسکتاپ، تصویر کامل را نشان دهیم.

اینجاست که عنصر <picture> وارد می‌شود.

🧩 تفاوت اساسی <picture> با srcset

ویژگیsrcset با x یا w<picture>
تغییر فقط در اندازه تصویر✔✔
امکان استفاده از تصویر با ترکیب متفاوت❌✔
کنترل بهتر با media queriesمحدودبسیار قوی
انتخاب تصویر بر اساس عرض، تراکم پیکسلی، و ترکیب تصویر❌✔✔✔

🧪 نمونه کد <picture>

<picture>
  <!-- برای صفحه‌نمایش‌های کوچک -->
  <source 
    media="(max-width: 600px)" 
    srcset="
      dogs-square-400.png, 
      dogs-square-800.png 2x">

  <!-- برای صفحه‌نمایش‌های بزرگ‌تر -->
  <source 
    media="(min-width: 601px)" 
    srcset="
      dogs-800x500.png, 
      dogs-1600x1000.png 2x">

  <!-- تصویر fallback برای مرورگرهایی که <picture> را پشتیبانی نمی‌کنند -->
  <img 
    src="dogs-800x500.png" 
    alt="Dogs resting on grass" 
    class="responsive">
</picture>

💡 توضیح اجزای <picture>

  • <source>: تعیین شرایط و فایل‌های مربوطه
  • media: شرط بر اساس عرض صفحه
  • srcset: لیست فایل‌های تصویر، با پشتیبانی از تراکم پیکسلی
  • <img>: تصویر پیش‌فرض و ضروری برای بارگذاری و سئو

🔁 مقایسه رفتار در شرایط مختلف

شرایطرفتار مرورگر با <picture>
عرض ≤ 600px + DPR=1dogs-square-400.png
عرض ≤ 600px + DPR=2dogs-square-800.png
عرض > 600px + DPR=1dogs-800x500.png
عرض > 600px + DPR=2dogs-1600x1000.png

در این روش:

  • ترکیب تصویر برای موبایل و دسکتاپ متفاوت است (کراپ شده و کامل)
  • کیفیت تصویر بر اساس تراکم پیکسلی هم مدیریت می‌شود

❌ چرا نمی‌توان فقط با srcset و sizes این کار را کرد؟

اگر بخواهید از تصویر کراپ‌شده با srcset استفاده کنید، در نمایشگرهای با تراکم بالا ممکن است تصویر غیردلخواه بارگذاری شود چون srcset نمی‌تواند بین ترکیب متفاوت تصویر و صرفاً اندازه تمایز قائل شود.

مشکل:

  • srcset فقط بر اساس اندازه و تراکم تصمیم می‌گیرد، نه ترکیب تصویر.
  • احتمال بروز تداخل میان تصاویر مشابه در اندازه و متفاوت در محتوا زیاد است.

✅ چه زمانی از هر تکنیک استفاده کنیم؟

نیازبهترین روش
فقط تفاوت در تراکم پیکسلیsrcset با 1x, 2x
تفاوت در عرض مرورگر، ولی ترکیب تصویر یکسانsrcset + sizes
تفاوت در ترکیب تصویر برای موبایل/دسکتاپ<picture>

🎯 توصیه نهایی

درست است که صدها نوع نمایشگر با اندازه‌های مختلف وجود دارد، اما تلاش برای ساخت «راه‌حل کامل» برای همه دستگاه‌ها نه ممکن است و نه مفید. بهترین کار این است که:

  • تمرکز خود را بر روی سناریوهای پرکاربرد بگذارید
  • با استفاده از <picture> برای تفاوت‌های ترکیبی مهم تصویر و از srcset برای تفاوت‌های فنی مثل تراکم یا اندازه استفاده کنید

🎬 ویدیو در HTML: عنصر <video>

با اضافه شدن تگ <video>، توسعه‌دهندگان وب توانستند ویدیوها را بدون نیاز به افزونه، مستقیماً در صفحات وب جاسازی کنند. این ویژگی به رشد سریع پلتفرم‌هایی مثل YouTube و SoundCloud کمک شایانی کرد.

📁 فرمت‌های ویدیویی پشتیبانی‌شده

فرمتویژگیپشتیبانی مرورگرها
MP4 (H.264)فشرده‌سازی مناسب و کیفیت بالا✅ بهترین انتخاب
WebMمتن‌باز، سبک، بهینه برای وب✅
OGG / Ogvقدیمی‌تر، متن‌باز✅ ولی کمتر رایج

نکته: MP4 بیشترین سازگاری را دارد.

🧩 ساختار پایه تگ <video>

<video src="video.mp4" controls>
  مرورگر شما از ویدیو پشتیبانی نمی‌کند.
  <a href="video.mp4">دانلود ویدیو</a>
</video>
  • تگ video باید حتماً بسته شود.
  • src: مسیر فایل ویدیو
  • محتوای داخل تگ: پیام پشتیبان برای مرورگرهای قدیمی

🔀 افزودن چند فرمت با <source>

<video controls width="640" height="360" poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  مرورگر شما از تگ video پشتیبانی نمی‌کند.
  <a href="video.mp4">دانلود ویدیو</a>
</video>
  • مرورگر اولین فرمتی را که پشتیبانی می‌کند، انتخاب می‌کند.
  • ترتیب source اهمیت دارد.

🎛️ ویژگی‌های قابل تنظیم (Attributes)

ویژگینوعتوضیح
controlsbooleanنمایش کنترل‌های پخش ویدیو
autoplaybooleanپخش خودکار هنگام بارگذاری صفحه (ممکن است توسط مرورگر مسدود شود)
loopbooleanپخش مجدد خودکار پس از پایان
mutedbooleanشروع با صدای قطع‌شده
posterstring (URL)تصویر پیش‌نمایش قبل از شروع پخش
width / heightعددتنظیم ابعاد نمایش ویدیو

✅ مثال کامل

<video 
  controls 
  muted 
  loop 
  width="640" 
  height="360" 
  poster="preview.jpg">
  
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">

  مرورگر شما از تگ video پشتیبانی نمی‌کند.
  <a href="video.mp4">دانلود ویدیو</a>
</video>

⚙️ تفاوت مرورگرها

مرورگرامکانات اضافی
FirefoxPop-out player، کنترل حجم، تمام‌صفحه
ChromePicture-in-Picture، تغییر سرعت پخش

برای کنترل پیشرفته‌تر، می‌توان با JavaScript ویدیو را مدیریت کرد (مثلاً پخش خودکار وقتی کاربر اسکرول کرد، یا سینک با صوت دیگر).

❗ نکات مهم تجربه کاربری (UX)

  • استفاده از autoplay و muted برای تبلیغات یا نمایشگر فروشگاهی مناسب است، ولی در تجربه عادی پیشنهاد نمی‌شود.
  • اگر از poster استفاده می‌کنید، autoplay را حذف کنید تا تصویر نمایشی قابل مشاهده باشد.
  • برای دسترس‌پذیری بهتر، همیشه پیام fallback بنویسید و لینک دانلود قرار دهید.

🏷️ تگ <track> در HTML

تگ <track> یکی از عناصر HTML است که امکان افزودن محتوای متنی مانند زیرنویس، کپشن، فصل‌ها و متادیتا را به ویدیو یا صوت فراهم می‌کند. این تگ تنها با عناصر <video> و <audio> قابل استفاده است.

🧩 کاربردهای اصلی

نوعتوضیحمقدار kind
Captionsنسخه متنی کامل صداها برای افراد کم‌شنواcaptions
Subtitlesترجمه‌ی متن گفتار به زبان دیگرsubtitles
Chaptersایجاد فصل‌بندی در ویدیوchapters
Metadataاطلاعات اضافی (مانند توصیف صحنه، آنوتیشن‌ها)metadata

📁 فرمت فایل زیرنویس: WebVTT (.vtt)

ساختار فایل:

WEBVTT

1
00:00:00.000 --> 00:00:05.000
Welcome to our tutorial.

2
00:00:05.001 --> 00:00:10.000
In this video, you'll learn how to add captions to your HTML video.

قوانین مهم:

  • فرمت زمان: hh:mm:ss.mmm
  • بین هر بلاک، یک خط خالی قرار گیرد
  • زمان شروع و پایان با --> جدا می‌شود

🔧 افزودن زیرنویس به ویدیو با <track>

<video controls width="640" height="360" poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">

  <track 
    src="captions.vtt" 
    kind="captions" 
    srclang="en" 
    label="English" 
    default>

  مرورگر شما از تگ video پشتیبانی نمی‌کند.
  <a href="video.mp4">دانلود ویدیو</a>
</video>

توضیح صفات (Attributes):

صفتتوضیح
srcمسیر فایل .vtt
kindنوع متن (captions, subtitles, chapters, metadata)
srclangزبان فایل زیرنویس (مثل en, fa, es)
labelنام قابل نمایش در پلیر برای انتخاب زیرنویس
defaultنمایش پیش‌فرض این زیرنویس هنگام بارگذاری ویدیو

🧪 نکات عملی

  • اگر از چند فایل زیرنویس استفاده می‌کنید، فقط یکی را به صورت default مشخص کنید.
  • مرورگرها یک منوی انتخاب زیرنویس (اگر label تعریف شده باشد) ارائه می‌دهند.
  • اگر از ویدیوهای چندزبانه استفاده می‌کنید، استفاده از subtitles به‌جای captions ضروری است و باید srclang تعیین شود.

⚠️ توجه: اجرا فقط روی سرور

  • مرورگرها، به دلایل امنیتی، از بارگذاری فایل‌های .vtt به صورت مستقیم از فایل سیستم (file://) جلوگیری می‌کنند.
  • برای مشاهده زیرنویس باید از سرور محلی استفاده شود (مثل افزونه Live Server در VS Code).

✅ جمع‌بندی

ویژگیاستفاده از تگ <track>
افزودن کپشن برای دسترس‌پذیری✔️
پشتیبانی چندزبانه با زیرنویس‌ها✔️
ایجاد فصل برای جابجایی بهتر در ویدیو✔️ (با kind="chapters")
افزودن اطلاعات اضافی✔️ (با kind="metadata")

🎵 تگ <audio> در HTML

تگ <audio> مخصوص پخش صدا طراحی شده و استفاده از آن به جای تگ <video> برای فایل‌های صوتی، بهتر است چون معنا و مفهوم واضح‌تری برای مرورگرها، موتورهای جستجو و دسترس‌پذیری دارد.

⚙️ ویژگی‌ها و ساختار کلی

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  مرورگر شما تگ audio را پشتیبانی نمی‌کند.
  <a href="audio.mp3">دانلود فایل صوتی</a>
</audio>
  • controls: نمایش نوار کنترل پخش (پخش، توقف، تنظیم صدا و …)
  • source: لینک به فایل صوتی به همراه نوع فرمت (type)
  • بخش متنی fallback: در صورتی که مرورگر پشتیبانی نکند نمایش داده می‌شود

🎧 فرمت‌های صوتی رایج

فرمتتوضیحپشتیبانی مرورگر
MP3بهترین پشتیبانی، کیفیت خوب و حجم کمتمامی مرورگرهای مدرن
WAVکیفیت بالاتر، حجم بیشتراکثر مرورگرها، به جز IE قدیمی
OGGفرمت متن‌باز، کیفیت خوبمرورگرهای مدرن

🔍 تفاوت‌ها با تگ <video>

ویژگی<audio><video>
کنترل‌های نمایش داده شدهنوار کنترل صوتیپلیر ویدیویی کامل (پخش، توقف، صدا، تمام صفحه و …)
قابلیت نمایش تصویرخیربله (با استفاده از poster)
صفت‌های مرتبط با اندازهنداردwidth، height
استفاده از <track>ممکن، اما نیاز به اسکریپت برای نمایش کپشنبله، کپشن و زیرنویس به صورت خودکار

🔄 صفات قابل استفاده مشابه با <video>

  • autoplay: شروع خودکار پخش هنگام بارگذاری صفحه (توجه به محدودیت مرورگرها)
  • loop: پخش مکرر فایل صوتی پس از پایان
  • muted: شروع پخش بدون صدا (معمولاً برای ویدیو کاربردی‌تر است)

📝 نکته در مورد <track> با تگ <audio>

  • اضافه کردن زیرنویس یا کپشن به صوت به کمک <track> ممکن است اما چون رابط کاربری صوتی فقط کنترل‌های صوتی دارد، نمایش متن نیازمند جاوااسکریپت برای کنترل و نمایش آن است.
  • در صورت نیاز به نمایش کپشن همراه صدا، معمولاً بهتر است از پلیرهای جاوااسکریپتی استفاده شود یا از <video> بهره برد.

✅ جمع‌بندی:

  • برای پخش فایل صوتی از تگ <audio> استفاده کنید.
  • حتماً controls را اضافه کنید تا کاربر کنترل پخش داشته باشد.
  • چند فرمت صوتی را به صورت <source> درون <audio> بگنجانید تا بهترین سازگاری ایجاد شود.
  • ویژگی‌های autoplay و loop به صورت اختیاری و با توجه به تجربه کاربری استفاده شوند.
  • افزودن زیرنویس و کپشن به صوت نیازمند اسکریپت است و ساده‌ترین راه استفاده از پلیرهای سفارشی یا <video> است.

درج رسانه با iframe

  • اگر تا به حال از گزینه‌ی Embed (درج) در یوتیوب، اسپاتیفای یا سایر پلتفرم‌های رسانه‌ای برای اضافه کردن ویدئو، آهنگ یا پلی‌لیست به یک صفحه وب استفاده کرده باشید، احتمالاً با عنصر iframe مواجه شده‌اید. iframe یک روش مؤثر برای نمایش محتوایی است که از منبع دیگری آمده است. با استفاده از iframe می‌توانید محتوایی از یک صفحه وب را داخل صفحه وب دیگری وارد کنید.

ساختار پایه‌ای iframe

ساختار و نحو (syntax) iframe باید برای شما آشنا باشد، چون بسیاری از ویژگی‌های آن مشابه سایر عناصر رسانه‌ای است که قبلاً استفاده کردیم.

  • iframe دارای تگ باز و بسته است.
  • ویژگی src مسیر (آدرس) URL محتوایی که می‌خواهید درج کنید را مشخص می‌کند.
  • ویژگی‌های width و height اندازه محتوای درج شده را تعیین می‌کنند.
  • ویژگی title توضیح متنی درباره محتوای iframe ارائه می‌دهد که برای دسترس‌پذیری بسیار مفید است.

نگاهی به کد Embed یوتیوب

بیایید به یوتیوب برویم و کد Embed آن را بررسی کنیم. می‌توانید هر ویدیویی را انتخاب کنید، اما من همان ویدئوی قبلی را که استفاده کرده بودم، این‌بار نسخه بارگذاری‌شده در یوتیوب، انتخاب می‌کنم.

برای دریافت کد:

  1. روی دکمه Share (اشتراک‌گذاری) کلیک کنید.
  2. سپس روی گزینه Embed (درج) کلیک کنید.

اینجا می‌توانیم کد پایه‌ای که توضیح دادیم (width, height, src, title) را ببینیم، اما همچنین چند ویژگی دیگر نیز وجود دارد که برای کنترل‌های بیشتر، رفتارها یا تنظیمات امنیتی به کار می‌روند.

ویرایش کد Embed

معمولاً استفاده از کد درج شده توسط سایت‌های شخص ثالث مشکلی ندارد، اما درک ساختار پایه‌ای به شما امکان می‌دهد ویرایش‌های خود را مثل تغییر اندازه عرض و ارتفاع انجام دهید. این اندازه پیش‌فرض یوتیوب است، اما حالا می‌دانید کجا باید آن را تغییر دهید.

اگر علاقه دارید درباره سایر ویژگی‌ها بیشتر بدانید، مستندات آن‌ها موجود است. برای اطلاعات بیشتر می‌توانید به فایل PDF لینک‌ها مراجعه کنید.

کاربردهای دیگر iframe

با iframe می‌توانید هر نوع محتوایی را از سایت دیگری وارد کنید، نه فقط رسانه‌های صوتی و تصویری.

مثلاً فرض کنید وب‌سایتی درباره جاذبه‌های گردشگری تورنتو دارید. می‌توانید به Google Maps بروید و یک آدرس یا نشانه معروف را جستجو کنید، مثلاً برج CN Tower. سپس نقشه برج CN را مستقیماً داخل سایت خود درج کنید تا بازدیدکنندگان بتوانند نقشه را ببینند و با آن تعامل داشته باشند بدون اینکه صفحه شما را ترک کنند.

برای این کار:

  1. روی Share کلیک کنید.
  2. گزینه Embed a Map را انتخاب کنید.
  3. کد درج در اینجا ظاهر می‌شود.
  4. پیش‌نمایشی که در پنجره نمایش داده می‌شود، نشان‌دهنده چیزی است که در سایت شما درج خواهد شد.

ابزارهای جانبی و ساده‌سازی کار

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

در حالی که دانستن نوشتن HTML از پایه بسیار ارزشمند است، استفاده از ابزارهای آماده می‌تواند ویژگی‌های پیشرفته‌تری اضافه کرده و روند کارتان را ساده‌تر کند.

وب فرم ها در HTML

فرم‌های وب چیستند؟

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

فرم‌ها می‌توانند ساده باشند و فقط شامل چند فیلد مثل نام یا ایمیل برای اشتراک در خبرنامه باشند، یا می‌توانند پیچیده‌تر باشند؛ مانند فرم‌های خرید آنلاین که اطلاعات آدرس پستی، اطلاعات صورتحساب و جزئیات پرداخت را می‌طلبند. میزان پیچیدگی فرم بستگی دارد به مقدار اطلاعاتی که باید جمع‌آوری شود.

نحوه کارکرد فرم‌ها

در حالی که بیشتر فرم‌ها نیاز به پردازش روی سرور از طریق برنامه‌نویسی سمت سرور دارند، عناصر رابط کاربری فرم که ما در مرورگر می‌بینیم — مانند فیلدهای متنی و دکمه‌های ارسال — با HTML ساخته می‌شوند.

نقش توسعه‌دهندگان در فرم‌ها

در تیم‌های توسعه وب، معمولاً توسعه‌دهندگان فرانت‌اند (Front-end) عناصر رابط کاربری فرم را می‌سازند و توسعه‌دهندگان بک‌اند (Back-end) وظیفه مدیریت عملکرد و پردازش داده‌ها را دارند.

ابزارهای ساخت فرم و اهمیت یادگیری HTML

همچنین سرویس‌های زیادی برای ساخت فرم وجود دارند، مثل Typeform یا Google Forms. این ابزارها کاربردهای خاص خود را دارند، اما یادگیری نحوه ساخت فرم‌ها با HTML مزایایی دارد.

برخی از این ابزارها اجازه سفارشی‌سازی می‌دهند و درک نحوه کار فرم‌ها حتی اگر خودتان برنامه‌نویسی نکنید، بسیار مفید است.

مبانی فرم‌های HTML

فرم‌های HTML شامل کنترل‌های مختلفی هستند؛ این کنترل‌ها همان عناصری هستند که به کاربران اجازه می‌دهند داده وارد کنند و با فرم‌های وب تعامل داشته باشند، مانند فیلدهای متنی برای تایپ کردن، چک‌باکس‌ها برای انتخاب گزینه‌ها، و دکمه‌ها برای ارسال فرم.

شروع ساخت فرم ثبت‌نام حساب کاربری

برای طراحی رابط کاربری، من معمولاً ابتدا یک طرح کلی (اسکچ) می‌کشم. این کار مثل یک نقشه راه است، حتی اگر طرح نهایی تغییر کند.

همه‌ی فرم‌ها با تگ <form> شروع می‌شوند و دو ویژگی (attribute) اصلی دارند:

  • action: مشخص می‌کند داده‌های فرم پس از ارسال به کجا فرستاده شود. مقدار آن باید یک URL معتبر (مبهم یا مطلق) باشد.
  • method: تعیین می‌کند داده‌های فرم چگونه به سرور ارسال شوند و دو مقدار دارد: GET یا POST.

تفاوت روش‌های GET و POST

  • روش GET داده‌ها را به صورت بخشی از URL ارسال می‌کند و در نوار آدرس مرورگر قابل مشاهده است. این روش برای ذخیره لینک (bookmark) یا به اشتراک‌گذاری لینک مفید است.
    مثال: وقتی در سایت فروش لباس کلمه «شلوار سیاه» را جستجو می‌کنید، این داده‌ها به انتهای URL اضافه می‌شوند و می‌توانید آن را ذخیره یا ارسال کنید.
  • روش POST داده‌ها را در بدنه‌ی درخواست HTTP ارسال می‌کند؛ بنابراین داده‌ها مخفی می‌مانند و امنیت بیشتری دارند. همچنین برای ارسال حجم زیاد داده مناسب‌تر است، پس این روش برای اطلاعات حساس یا فرم‌های پیچیده بهتر است.

عناصر فرم برای ورود داده

برای اینکه کاربران بتوانند داده وارد کنند، از عنصر <input> استفاده می‌کنیم که انواع مختلفی دارد. ابتدا به ورودی‌های متنی می‌پردازیم.

هر <input> باید ویژگی name داشته باشد تا هنگام ارسال فرم، داده‌ها قابل شناسایی و ارجاع باشند. این مقدار فقط برای پردازش استفاده می‌شود و در مرورگر نمایش داده نمی‌شود.

اگر فقط این کد فرم را داشته باشیم، کاربران فقط جعبه‌های خالی می‌بینند. برای نمایش متن راهنما یا عنوان کنار هر جعبه، باید از تگ <label> استفاده کنیم.

دکمه ارسال فرم

برای ارسال فرم، به یک دکمه نیاز داریم که با تگ <button> ساخته می‌شود. متن دکمه بین تگ‌های باز و بسته قرار می‌گیرد، مثلاً «ارسال»، «ثبت نام» یا «ایجاد حساب».

ساختار و استایل فرم

فرم‌ها معمولاً به صورت عناصر درون خطی (inline) هستند و در یک خط کنار هم نمایش داده می‌شوند که ساده است اما ممکن است ظاهر مناسبی نداشته باشد.

برای بهبود ظاهر فرم، می‌توانیم از عناصر ساختاری مثل <div> برای گروه‌بندی هر جفت <label> و <input> استفاده کنیم تا هر کدام در خط جداگانه باشند.

عناصر ساختاری فرم: fieldset و legend

  • تگ <fieldset> برای گروه‌بندی کنترل‌های مرتبط در فرم به کار می‌رود.
  • تگ <legend> داخل <fieldset> عنوان یا توضیحی برای آن گروه ارائه می‌دهد.

اما در فرم ساده ما که فقط دو فیلد و یک دکمه دارد، استفاده از این تگ‌ها لازم نیست.

بهبود قابلیت استفاده (Usability)

وقتی روی فیلدهای ورودی کلیک می‌کنیم، می‌توانیم تایپ کنیم، اما کلیک روی <label> هیچ واکنشی ندارد. بهتر است این دو را به هم متصل کنیم تا با کلیک روی عنوان، فوکوس به ورودی مربوطه برود.

برای این کار دو روش وجود دارد:

  1. قرار دادن <input> داخل <label> (اتصال ضمنی)
  2. استفاده از ویژگی‌های for در <label> و id در <input> (اتصال صریح)

نحوه اتصال صریح

  • به <label> ویژگی for می‌دهیم، مثلاً for="email".
  • به <input> ویژگی id با همان مقدار id="email" اضافه می‌کنیم.

همین کار را برای فیلد رمز عبور هم انجام می‌دهیم.

اتصال صریح بهتر است چون رابطه واضح‌تر است و اجازه می‌دهد استایل‌دهی CSS بهتر و انعطاف‌پذیرتر باشد.

حالا با کلیک روی عنوان یا جعبه ورودی، می‌توانیم به راحتی در فیلد مربوطه تایپ کنیم.

در قسمت بعدی، انواع مختلف ورودی‌ها را با جزئیات بیشتری بررسی خواهیم کرد.

انواع ورودی‌ها (Input types)

عنصرهای <input> بخش مهمی در ساخت فرم‌ها هستند چون می‌توانند انواع مختلف داده را دریافت کنند. با اضافه کردن ویژگی type به <input>، نوع داده ورودی مشخص می‌شود و عملکرد آن تعیین می‌شود.

اگر ویژگی type تعیین نشود، نوع پیش‌فرض متن (text) است که یک فیلد تک‌خطی برای نوشتن متن ساده است. این نوع برای وارد کردن نام یا نام کاربری مناسب است.

نوع ورودی ایمیل (email)

نوع email هم یک فیلد تک‌خطی ایجاد می‌کند، اما مخصوص وارد کردن آدرس ایمیل است. بر خلاف نوع text که هر نوع کاراکتری را می‌پذیرد، نوع email اعتبارسنجی داخلی دارد. این اعتبارسنجی بررسی می‌کند که ورودی فرم مطابق با قالب صحیح باشد، مانند:
name@domain یا name@domain.tld

TLD یا دامنه سطح بالا، قسمتی است که بعد از نقطه می‌آید. مثل .com که رایج‌ترین است، اما دامنه‌های دیگری هم وجود دارند مثل .org یا .edu، و حتی دامنه‌های غیرمتعارف مانند .me یا .fyi.

نوع ورودی رمز عبور (password)

برای فیلد رمز عبور از نوع password استفاده می‌کنیم. این فیلد هم تک‌خطی است، ولی هنگام تایپ کردن، کاراکترها به صورت ستاره یا نقطه نمایش داده می‌شوند تا از دید دیگران پنهان بمانند و امنیت بالاتر برود.

دکمه ارسال فرم (submit)

عنصر <input> را می‌توان با تنظیم type="submit" به دکمه ارسال تبدیل کرد. متن پیش‌فرض دکمه هم «submit» است اما می‌توان آن را با ویژگی value تغییر داد.

وقتی از <input type="submit"> استفاده می‌کنید، فقط می‌توانید متن دکمه را با value تغییر دهید. اما با استفاده از تگ <button> می‌توانید محتوای درون دکمه را هر طور که خواستید تنظیم کنید، مثلاً متن همراه با آیکون یا تصویر کنار آن. هر دو روش صحیح‌اند، ولی <button> امکانات بیشتری برای سفارشی‌سازی دارد.

به‌روزرسانی فرم نمونه

برای فیلد ایمیل، مقدار type="email" اضافه کنید. برای فیلد رمز عبور، مقدار type="password" استفاده شود.

داشتن مقادیر یکسان برای ویژگی‌های id و name مشکلی ندارد چون هر کدام برای هدف متفاوتی استفاده می‌شوند.

نوع دکمه ارسال در تگ button

نوع پیش‌فرض دکمه‌های <button> که داخل فرم هستند، submit است، اما بهتر است صراحتاً type="submit" را در تگ باز کننده بنویسیم.

تاثیر افزودن ویژگی type

اضافه کردن ویژگی type ظاهر فرم را تغییر نمی‌دهد، ولی عملکرد آن را تغییر می‌دهد.

تست عملکرد فرم

فرض کنیم ایمیل را به شکل نادرست وارد کنیم:
Hello email.com (با فاصله و بدون علامت @)
وقتی دکمه ارسال را می‌زنیم، چون ایمیل فرمت صحیح ندارد، پیام خطا نمایش داده می‌شود و فرم ارسال نمی‌شود تا اصلاح شود.

اگر علامت @ را اضافه کنیم، فرم اعتبارسنجی را قبول می‌کند و ارسال می‌شود و به صفحه موفقیت هدایت می‌کند.

نکته مهم درباره فیلدهای خالی

اگر همه فیلدها را خالی بگذاریم و فرم را ارسال کنیم، فرم بدون خطا ارسال خواهد شد. به طور پیش‌فرض، ورودی خالی قبول می‌شود، فرقی ندارد نوع آن چیست.

در قسمت بعدی درباره نحوه افزودن اعتبارسنجی بیشتر به فرم‌ها صحبت خواهیم کرد.

اعتبارسنجی فرم (Form Validation)

در مثال قبلی دیدیم که فرم‌ها به طور پیش‌فرض فیلدهای خالی را می‌پذیرند، چون معمولاً فرم‌ها ترکیبی از فیلدهای اجباری و اختیاری هستند.
برای مثال، یک فرم آدرس ممکن است موارد زیر را بخواهد:

  • آدرس خیابان (ضروری)
  • شهر (ضروری)
  • کشور (ضروری)
  • کد پستی (ضروری)
  • شماره واحد (اختیاری، فقط برای کسانی که آپارتمان دارند)

ویژگی required

ویژگی بولی required به شما اجازه می‌دهد مشخص کنید که کدام فیلدها باید حتماً پر شوند و کدام‌ها اختیاری هستند و می‌توانند خالی بمانند.

ویژگی placeholder

ویژگی placeholder داده‌ها را اعتبارسنجی نمی‌کند، اما به کاربر راهنمایی می‌دهد که چه چیزی یا چه فرمتی از داده مورد انتظار است. متن آن داخل فیلد ورودی نمایش داده می‌شود و معمولاً شامل یک نمونه یا دستورالعمل کوتاه است.
این متن وقتی کاربر شروع به تایپ می‌کند، محو می‌شود.

نکته مهم

به همین دلیل هرگز نباید placeholder را جایگزین برچسب <label> کرد. برچسب‌ها همیشه باید دیده شوند و به فیلدهای مربوطه متصل باشند.

افزودن required و placeholder

در مثال فرم، هر دو فیلد باید پر شوند؛ پس ویژگی required به هر دو اضافه می‌شود.

برای فیلد ایمیل، ویژگی placeholder را می‌گذاریم و مقداری مانند email@example.com قرار می‌دهیم.

برای فیلد رمز عبور هم می‌توانیم placeholder با یک راهنما مانند “حداقل ۸ کاراکتر” قرار دهیم.

تست اعتبارسنجی فرم

اگر فرم خالی باشد و دکمه ارسال زده شود، پیام خطا ظاهر می‌شود و فرم ارسال نمی‌شود.

نکته‌ای درباره اعتبارسنجی ایمیل

به صورت پیش‌فرض، فرم نوع email آدرس‌هایی بدون دامنه سطح بالا (TLD) را هم می‌پذیرد؛ یعنی چیزی مثل email@example هم معتبر شمرده می‌شود.

اعتبارسنجی پسورد با minlength

اگر پسورد کمتر از ۸ کاراکتر باشد و فرم ارسال شود، باز هم فرم پذیرفته می‌شود چون فقط placeholder را داریم که اعتبارسنجی انجام نمی‌دهد.

افزودن اعتبارسنجی پیشرفته‌تر با pattern

اگر بخواهیم مثلا ایمیل حتماً با TLD باشد (مثل .com یا .org)، باید از ویژگی pattern استفاده کنیم.

pattern اجازه می‌دهد با استفاده از عبارات منظم (Regular Expressions) قوانین پیچیده برای اعتبارسنجی تعریف کنیم.

مثلاً یک الگوی عبارات منظم می‌تواند مشخص کند که ایمیل باید شامل حروف یا اعداد، سپس علامت @، سپس نام دامنه، سپس نقطه و دامنه سطح بالا باشد.

منابع و فایل کمکی

الگوی کامل عبارت منظم را می‌توانید از فایل متنی موجود در فولدر تمرین 07_04 کپی کنید تا خطایی نداشته باشید.

بروزرسانی فرم نمونه

  • ویژگی pattern را به فیلد ایمیل اضافه کنید.
  • ویژگی minlength="8" را به فیلد پسورد اضافه کنید.

تست اعتبارسنجی پیشرفته

  • اگر ایمیل با فرمت اشتباه وارد شود، فرم ارسال نمی‌شود و پیام خطا ظاهر می‌شود.
  • اگر ایمیل را اصلاح کنید (مثلاً اضافه کردن .com) و پسورد کمتر از ۸ کاراکتر باشد، باز هم ارسال نمی‌شود.
  • پس از رفع همه مشکلات (ایمیل صحیح و پسورد حداقل ۸ کاراکتر)، فرم ارسال خواهد شد.

با چند ویژگی ساده HTML توانستیم اعتبارسنجی پایه را اضافه کنیم، اما برای اعتبارسنجی‌های پیشرفته‌تر معمولاً باید از JavaScript یا برنامه‌نویسی سمت سرور استفاده کرد.

ورودی‌های چک‌باکس و رادیو باتن (Checkbox and Radio Inputs)

تا اینجا ما از المان <input> برای دریافت داده‌های متنی استفاده کردیم، اما این المان می‌تواند برای دریافت اطلاعاتی که شامل انتخاب گزینه‌هاست هم استفاده شود؛ مثل چک‌باکس‌ها و دکمه‌های رادیویی که کاربر به جای تایپ متن، یک یا چند گزینه را انتخاب می‌کند.

چک‌باکس (Checkbox)

چک‌باکس‌ها برای ارائه یک یا چند گزینه به کار می‌روند. کاربر می‌تواند هر کدام از گزینه‌ها را تیک بزند یا بردارد و می‌تواند چند گزینه از یک گروه را همزمان انتخاب کند.

چک‌باکس‌ها نیاز به برچسب (label) دارند تا متن توضیحی کنارشان نمایش داده شود. برچسب‌ها معمولا بعد از خود چک‌باکس قرار می‌گیرند و با استفاده از ویژگی for در برچسب و id در چک‌باکس به هم مرتبط می‌شوند.

رادیو باتن (Radio Button)

رادیو باتن برای زمانی است که چند گزینه داریم و کاربر فقط باید یک گزینه را انتخاب کند. وقتی یک رادیو باتن انتخاب شد، فقط با انتخاب گزینه دیگر در همان گروه، انتخاب قبلی لغو می‌شود.

رادیو باتن هم مثل چک‌باکس نیاز به برچسب دارد.

افزودن چک‌باکس در فرم

فرض کنیم در فرم ما قبلاً فیلد ایمیل داشتیم، حالا می‌خواهیم یک چک‌باکس برای «عضویت در خبرنامه» اضافه کنیم.

  1. یک <div> بعد از گروه رمز عبور اضافه کنید.
  2. داخل آن، یک <input> و یک <label> قرار دهید.
  3. نوع ورودی را به checkbox تغییر دهید (چون پیش‌فرض text است).
  4. مقدار id را برای <input> برابر با newsletter بگذارید و در <label>، مقدار for="newsletter" را قرار دهید تا به هم لینک شوند.
  5. هر <input> باید ویژگی name داشته باشد تا داده‌های آن موقع ارسال فرم قابل شناسایی باشد. پس name="newsletter" را به <input> اضافه کنید.
  6. در <label> متن دلخواه مانند «بله، هفته‌ای نکته ارسال کن» بنویسید.

ویژگی value برای چک‌باکس

برای چک‌باکس باید ویژگی value هم اضافه کنید تا وقتی فرم ارسال شد، مقدار مشخصی همراه داده فرستاده شود.

  • اگر مقدار value تعیین نشود، مقدار پیش‌فرض on است. یعنی داده ارسال شده شبیه newsletter=on خواهد بود.
  • اگر مقدار مثلا subscribe باشد، داده می‌شود newsletter=subscribe.

انتخاب پیش‌فرض چک‌باکس

اگر می‌خواهید چک‌باکس از قبل انتخاب شده باشد، ویژگی checked را به <input> اضافه کنید.

چند چک‌باکس با هم (چند گزینه)

اگر چند گزینه برای انتخاب دارید، بهتر است آن‌ها را با المان‌های <fieldset> و <legend> گروه‌بندی کنید.

مثلاً برای انتخاب موضوعات مورد علاقه در خبرنامه، گزینه‌هایی مثل:

  • کدنویسی
  • ابزارها و نرم‌افزارها
  • بهره‌وری

هر گزینه یک چک‌باکس است با ویژگی‌های مشابه: نوع checkbox، اتصال id و for، مقدار name یکسان (مثلاً topic) و مقدارهای متفاوت برای value (مثل coding، tools، productivity).

وقتی فرم ارسال شود، چند مقدار topic=coding، topic=tools و… ارسال می‌شود برای گزینه‌های انتخاب شده.

تفاوت کلیدی رادیو باتن با چک‌باکس

  • در چک‌باکس، گزینه‌ها مستقل هستند و می‌توانید چند تا را همزمان انتخاب کنید.
  • در رادیو باتن، گزینه‌ها به صورت گروهی تعریف می‌شوند و فقط یکی از آن‌ها می‌تواند انتخاب شود.
  • برای رادیو باتن‌ها، تمام گزینه‌های گروه باید name یکسان داشته باشند تا این رفتار گروهی ایجاد شود.

مثال استفاده از رادیو باتن

مثلاً برای انتخاب فرکانس دریافت خبرنامه گزینه‌های زیر داریم:

  • هفتگی (weekly)
  • ماهانه (monthly)

برای هر گزینه، نوع radio است و هر دو name="frequency" دارند. این باعث می‌شود فقط یکی از این دو انتخاب شود.

به‌روزرسانی فرم اصلی

می‌توان این دو بخش را از فایل تمرین کپی کرده و در فرم اصلی قرار داد، درست بعد از بخش چک‌باکس عضویت در خبرنامه و قبل از دکمه ارسال.

  • اکنون کاربر می‌تواند چند موضوع برای خبرنامه انتخاب کند (چک‌باکس‌ها)
  • و تنها یک فرکانس برای دریافت خبرنامه انتخاب کند (رادیو باتن‌ها)

ما اصول اولیه استفاده از چک‌باکس‌ها و رادیو باتن‌ها را دیدیم، اما فرم‌ها و ورودی‌ها انواع و ویژگی‌های بیشتری دارند که یادگیری کامل آن‌ها خودش یک دوره جداگانه می‌طلبد.

لیست کامل ورودی‌ها و ویژگی‌ها را می‌توانید در سایت MDN مشاهده کنید.

عناصر اضافی فرم

حالا که با روش‌های مختلف استفاده از المان <input> آشنا شدیم، بیایید با چند گزینه‌ی دیگر نیز آشنا شویم:

  • <textarea>
  • <select>

textarea

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

  • برخلاف <input>، این عنصر فقط یک نوع ورودی دارد و نیازی به مشخص کردن صفت type نیست.
  • باید یک ویژگی name برای شناسایی داده‌ها هنگام ارسال فرم داشته باشد.
  • ویژگی cols برای تعیین عرض (بر اساس تعداد میانگین حروف در یک سطر) کاربرد دارد.
  • ویژگی rows تعیین می‌کند چند سطر متن به طور همزمان دیده شود.

این دو ویژگی اختیاری هستند چون معمولاً از CSS برای تنظیم دقیق ابعاد استفاده می‌شود.

select (لیست کشویی)

کنترل‌های کشویی (dropdown) راهی مناسب برای انتخاب از میان چند گزینه هستند که فضای کمتری نسبت به چند گزینه تکی اشغال می‌کنند.

  • عنصر <select> برای ساخت یک لیست انتخاب است.
  • عنصر <option> هر آیتم داخل لیست را مشخص می‌کند.
  • ویژگی value برای گزینه‌ها الزامی نیست. اگر تعریف نشود، متن داخل <option> به عنوان مقدار ارسال می‌شود.
  • اگر بخواهید مقدار متفاوتی هنگام ارسال فرم فرستاده شود، از ویژگی value استفاده کنید.

مثال و توضیح

چون این عناصر به خوبی با مثال «ایجاد حساب کاربری» ما هماهنگ نیستند و به فایل‌های خارجی نیاز ندارند، یک دموی کد ساده در CodePen ساخته‌ام تا بتوانید کنترل‌های فرم را ببینید.

  • لیست کشویی <select> پنج گزینه دارد اما فقط به اندازه یک خط متن جا اشغال می‌کند.
  • <textarea> برعکس ورودی متنی، امکان نوشتن چند خطی همراه با شکست خط را می‌دهد.
  • هر دو عنصر می‌توانند برچسب داشته باشند تا متن توضیحی نمایش داده شود.

فرم‌ها دنیای بسیار گسترده‌ای دارند. برای هر عنصر فرم، با انتخاب آن در ابزارهای مستندسازی می‌توانید همه ویژگی‌های آن را ببینید.

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

نکاتی در مورد Accessibility and Internationalization در زبان HTML

دسترسی‌پذیری چیست؟

در طول این دوره، روش‌هایی برای قابل‌دسترسی‌تر کردن HTML بیان شده است. حالا بیایید یک قدم عقب‌تر برویم و ببینیم دقیقاً منظور از «دسترسی‌پذیری» چیست.

دسترسی‌پذیری یعنی طراحی وب‌سایت‌ها به گونه‌ای که افراد بیشتری بتوانند از آن‌ها استفاده کنند.

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

اصل کلیدی بسیار ساده است:
همه باید به وب دسترسی داشته باشند.

در برخی کشورها، این موضوع حتی قانونی است. سازمان W3C فهرستی از قوانین و سیاست‌های دسترسی وب در کشورهای مختلف دارد. قوانین معمولاً برای سازمان‌های دولتی و صنایعی مثل بانک‌ها، مخابرات، کتابخانه‌ها، مراکز آموزشی و حمل‌ونقل اعمال می‌شوند.

W3C همچنین راهنمای مفصل «رهنمودهای دسترسی محتوای وب» (WCAG) را تهیه کرده است که توضیح می‌دهد چگونه وب‌سایت‌ها را قابل‌دسترسی کنیم. این راهنما بسیار جامع است، پس پیشنهاد می‌کنم با مقاله «WCAG در یک نگاه» شروع کنید.

نیازی نیست همه معیارها را یک‌باره یاد بگیرید، اما خوب است با چهار حوزه اصلی آشنا باشید:

  • قابل درک (Perceivable)
  • قابل استفاده (Operable)
  • قابل فهم (Understandable)
  • پایدار و سازگار (Robust)

منبع خوب دیگر وبسایت Web Accessibility in Mind است که آموزش، مقالات و ابزارهایی مثل ارزیاب عدم دسترسی و چک‌کننده کنتراست رنگ ارائه می‌دهد.

دسترسی‌پذیری حوزه وسیعی است و بسیاری از افراد در این زمینه متخصص می‌شوند.

برای مطالعه بیشتر، منابع اضافی را در فایل Links.PDF اضافه کرده‌ام.

مبانی ARIA (برنامه‌های کاربردی غنی اینترنتی قابل دسترس)

وب‌سایت‌های اطلاع‌رسان معمولاً ساختاری ساده و ثابت دارند چون محتوایشان زیاد تغییر نمی‌کند. اما وب‌سایت‌ها و برنامه‌های وب پویا (دینامیک) پیچیده‌تر هستند چون محتوا مکرراً به‌روزرسانی می‌شود، مثل شبکه‌های اجتماعی که پست‌ها و واکنش‌ها مرتب تغییر می‌کنند.

با پیشرفت وب و افزودن امکانات تعاملی، چالش‌های جدیدی در زمینه دسترسی‌پذیری ایجاد شد. مثلاً استفاده از کتابخانه‌های جاوااسکریپت برای افزودن محتوای پویا، گاهی باعث می‌شود که کد HTML معنایی‌اش کاهش پیدا کند و این برای خواننده‌های صفحه (screen readers) مشکل‌ساز باشد.

برای حل این مشکل، تکنولوژی‌ای به نام ARIA (برنامه‌های کاربردی غنی اینترنتی قابل دسترس) ایجاد شده است. ARIA مجموعه‌ای از ویژگی‌ها (attributes) است که به عناصر HTML اضافه می‌شود تا معنا و دسترسی آن‌ها بهتر شود.

نکته مهم:

اولین قانون استفاده از ARIA این است که ببینید اصلاً به آن نیاز دارید یا نه. اگر بتوانید از خود عناصر HTML یا ویژگی‌های آن‌ها که به‌صورت پیش‌فرض معنا و رفتار مورد نظر را دارند، استفاده کنید، بهتر است و نباید برای دسترسی‌پذیری، به زور ARIA اضافه کنید.

سه دسته اصلی ARIA:

  1. Roles (نقش‌ها)
    نقش‌ها به فناوری‌های کمک‌کننده مثل خواننده صفحه می‌گویند هر عنصر چه کاربرد و وظیفه‌ای دارد.
    مثال: نقش button به صفحه‌خوان می‌گوید این عنصر یک دکمه است.
    توجه: نقش‌ها فقط اطلاعات می‌دهند، عملکرد واقعی (مثل کلیک) را خود عنصر یا جاوااسکریپت باید فراهم کند.
  2. Properties (خصوصیات)
    اطلاعات اضافی درباره‌ی عنصر می‌دهند.
    مثال: خاصیت aria-required="true" روی یک فیلد فرم می‌گوید این فیلد حتماً باید پر شود. این برای کسانی که از صفحه‌خوان استفاده می‌کنند مفید است چون ممکن است علامت ستاره را نبینند. اما خود این خاصیت مانع ارسال فرم نمی‌شود؛ این کار با جاوااسکریپت باید انجام شود.
  3. States (وضعیت‌ها)
    وضعیت فعلی یک عنصر را تعریف می‌کنند که معمولاً با تعامل کاربر تغییر می‌کند.
    مثال: aria-checked="true" یا aria-checked="false" می‌گوید آیا یک چک‌باکس تیک خورده است یا نه.

ARIA ظاهر صفحه را تغییر نمی‌دهد، بلکه فقط به API‌های دسترسی مرورگر (که صفحه‌خوان‌ها استفاده می‌کنند) اطلاعات می‌دهد. استفاده نادرست از ARIA می‌تواند به جای بهبود، باعث کاهش دسترسی شود، پس همیشه تا جای ممکن از HTML معنایی و استاندارد استفاده کنید.

کدهای زبان (Language Subtags)

کدهای زبان معمولاً دو یا سه حرف کوچک هستند. این کدها می‌توانند شامل زبان پایه و گویش یا لهجه خاصی باشند. برای مثال:

  • en = انگلیسی
  • fr-CA = فرانسوی کانادایی
  • es-013 = اسپانیایی آمریکای مرکزی

این کدها در ثبت‌نام IANA (Internet Assigned Numbers Authority) ذخیره می‌شوند و فهرستی از آن‌ها به صورت فایل متنی وجود دارد. می‌توانید با کلیدهای Ctrl+F در مرورگر جستجو کنید یا از ابزارهای آنلاین جستجوی کد زبان استفاده کنید.

انواع زیرکدهای زبان

  • کد زبان (language subtag): حتماً باید استفاده شود.
  • کد منطقه (region subtag): کد منطقه یا کشور، معمولاً دو حرف بزرگ یا سه رقم است.
  • کد قلم یا خط نوشتاری (script subtag): چهار حرف است، حرف اول بزرگ. مثلاً برای بریل فرانسه: fr-Brai.

وقتی از lang استفاده می‌کنید، بهتر است آن را ساده نگه دارید: کد زبان پایه ضروری است، اما زیرکدهای منطقه یا قلم را فقط وقتی استفاده کنید که واقعاً لازم باشد.

ویژگی dir (جهت نوشتار)

برای مشخص کردن جهت نوشتار متن از صفت dir استفاده می‌شود. مقدارهای آن:

  • ltr (Left to Right) — از چپ به راست (مثلاً انگلیسی). این مقدار پیش‌فرض است، پس معمولاً لازم نیست بنویسید.
  • rtl (Right to Left) — از راست به چپ (مثلاً عربی، فارسی).
  • auto — مرورگر خودش جهت را تشخیص می‌دهد، بر اساس اولین کاراکتر متن.

اگر محتوای صفحه ترکیبی از زبان‌های مختلف با جهت‌های متفاوت دارید، استفاده از dir برای هر بخش کمک می‌کند نمایش به درستی انجام شود.

با مشخص کردن زبان صفحه (با lang) و جهت نوشتار (با dir)، می‌توان وب‌سایت‌های قابل دسترس‌تر و همه‌جانبه‌تری برای کاربران با زبان‌ها و خط‌های نوشتاری متفاوت ساخت.