مدرس: خب من چند بار اصطلاح Semantic HTML رو گفتم
توی این بخش
پس بیاید خیلی سریع تعریف کنیم
که منظورم از Semantic HTML دقیقاً چیه
خب توی HTML وقتی درباره semantics حرف می‌زنیم
منظورمون اینه که بعضی المنت‌ها
در واقع یه معنی یا یه هدف خاص دارن
یعنی وقتی به یه المنت HTML فکر می‌کنیم
نباید به این فکر کنیم
که اون المنت چه شکلی روی صفحه دیده میشه
وقتی رندر بشه
بلکه باید به این فکر کنیم
که اون المنت واقعاً چه معنی‌ای داره
و نماد چی هست
پس این میشه تعریف Semantic HTML
البته همه المنت‌ها توی HTML معنایی ندارن
و در واقع قبلاً یه کم درباره‌ش صحبت کرده بودم
توی این المنت
مثلاً المنت strong
که متن رو بولد یا پررنگ نشون میده توی صفحه
یادتونه قبلاً من از المنت b استفاده کردم؟
که فقط متن رو پررنگ می‌کرد
اما هیچ معنی خاصی بهش نمی‌داد درسته؟
این رو قبلاً توضیح داده بودم
و حالا شاید براتون بیشتر روشن شده باشه
پس وقتی از strong استفاده می‌کنیم
متن همچنان بولد دیده میشه توی مرورگر
ولی نکته مهم اینجاست
که ما به اون متن یه معنی هم اضافه کردیم
یعنی میگیم این متن strong یا مهمه
یعنی یه بخش خیلی مهم از محتواست
و همینطور برای این بخش اینجا هم
این کلمه‌ی fundamental
اینجا از em استفاده کردیم برای تاکید کردن روش
که باعث میشه متن کج یا italic دیده بشه توی صفحه
اما معنی واقعی اینه
که داریم روش تاکید می‌کنیم
یعنی یه جور توجه یا تاکید ویژه بهش دادیم
و خب این معنی این المنت اینجا هست
خب؟
و همین موضوع برای همه المنت‌هایی
که توی ویدیوی قبلی استفاده کردیم هم درسته
مثل همین nav یا navigation
این فقط یه جعبه درست می‌کنه
که داخلش چهار تا لینک داریم
اما از نظر ظاهری کار خاصی انجام نمی‌ده
کارش اینه که به صورت معنایی نشون بده
که این بخش مربوط به ناوبری یا navigation هست
اما به جای nav
می‌تونستیم از یه المنت عمومی‌تر استفاده کنیم
یعنی div
مثلاً اینجا div می‌ذاشتیم
بازش می‌کردیم و می‌بستیم
از نظر ظاهری هیچ تغییری ایجاد نمی‌شد
یعنی فقط یه جعبه جدید درست می‌کرد
ولی جعبه‌ای بدون هیچ معنی
این یعنی معنی div
و قبل از HTML5
ما همیشه برای هر جعبه‌ای توی صفحه div استفاده می‌کردیم
اما بعد HTML5 اومد
و مفهوم Semantic HTML معرفی شد
و حالا باید از div فقط وقتی استفاده کنیم
که نمی‌خوایم به اون جعبه معنی خاصی بدیم
یعنی یه جعبه عمومی روی صفحه
اما توی این مورد ما می‌خوایم بگیم
که این بخش navigation هست
پس باید از nav استفاده کنیم
همین موضوع برای article header و footer هم صادقه
که این پایین داشتیم
و حتی برای paragraph یا پاراگراف هم همینطوره
چون در واقع
پاراگراف هم فقط یه جعبه‌ی پر از متن هست
اما تفاوتش اینه که p معنای خودش رو داره:
یعنی پاراگراف
ولی می‌تونستیم دوباره از div استفاده کنیم
و هیچ تغییری از نظر ظاهری ایجاد نمی‌شد
البته یه تغییر کوچیک اتفاق افتاد
فضای سفید اطراف p رو از دست دادیم
که مرورگر به صورت پیش‌فرض برای p میذاره
پس برش می‌گردونیم به p
چون هم معنی میده و هم اون فاصله رو نگه می‌داره
ولی ایده‌ای که گفتم همچنان درسته
چون می‌تونستیم
با CSS همین فاصله‌ها رو دوباره بسازیم
پس اگر می‌خواستیم می‌شد
کل صفحه وب رو فقط با div بسازیم
بعد با CSS بهشون استایل بدیم
اما خب این کارو نمی‌کنیم
ما از Semantic HTML استفاده می‌کنیم
تا به المنت‌هامون معنی بدیم
خب شاید بپرسید چرا این کارو می‌کنیم؟
دلایل مختلفی داره
و فکر کنم قبلاً یه بار هم اشاره کردم
یکی از دلایلش سئو یا Search Engine Optimization هست
یعنی موتورهای جستجو مثل گوگل
می‌تونن ساختار محتوای شما رو بهتر بفهمن
و در نتیجه بهتر تحلیل کنن که محتوای شما درباره چیه
و دلیل دیگه هم accessibility یا دسترس‌پذیریه
به خصوص برای افرادی که از screen reader استفاده می‌کنن
تا بتونن محتوای وب‌سایت ما رو بخونن
حالا ممکنه بپرسید چرا اصلاً این کارو می‌کنیم
و جوابش اینه که چندتا دلیل مختلف وجود داره
و فکر کنم قبلاً هم یه اشاره‌ای بهشون کردم
یکی از اون دلایل ♪♪بهینه‌سازی موتور جستجو♪♪ هست
یعنی اینکه موتورهای جستجو مثل گوگل
می‌تونن ساختار محتوای شما رو راحت‌تر بفهمن
و در نتیجه بهتر تحلیل کنن
که محتوای شما و صفحه‌تون درباره‌ی چیه
یه دلیل دیگه هم اینه که نوشتن HTML معنایی
برای ♪♪دسترس‌پذیری♪♪ خیلی مهمه مخصوصاً برای افرادی
که از صفحه‌خوان‌ها برای خوندن سایت‌ها استفاده می‌کنن
خب؟ پس این خیلی نکته‌ی کلیدی‌ای هست
امیدوارم این موضوع براتون روشن شده باشه
ما همین‌طور در طول دوره هم دوباره بهش برمی‌گردیم
و سر فرصت بیشتر توضیح می‌دیم
ولی می‌خواستم از همین اول دوره
خیلی واضح بگم
که وقتی داریم به HTML فکر می‌کنیم
نباید فقط به این فکر کنیم
که توی مرورگر چه شکلی نمایش داده میشه
بلکه حتی مهم‌تر از اون اینه که این المنت‌ها
واقعاً چه معنی‌ای دارن
و نماینده‌ی چی هستن
خب با این توضیحات بخش مربوط به این مبحث تموم شد
حالا توی ویدیوی بعدی
میایم یه مقدار VS Code رو بیشتر تنظیم می‌کنیم
و بعد میریم سراغ دو تا تمرین پایانی
که برای این بخش آماده کردم
پس معطل نکنید و مستقیم بریم سراغ ویدیوی بعد
اونجا ادامه می‌دیم