جلسه ۱۶: فرو رفتن در عناصر Semantics در html

فراتر رفتن از div.
موارد زیر را بیان خواهیم کرد
- بررسی اجمالی
- مطالعه موردی
- عناصر معنایی ساختاری
hgroup
header
nav
footer
article
section
time
aside
بررسی اجمالی
با توجه به dictionary.com
، بیایید به تعریف Semantics
نگاهی بیندازیم:
معنایی [si-man-tik]
:
صفت
از معانی مختلف کلمات یا سایر نمادها ناشی می شوند
در این درس ، ما به اهمیت در نظر گرفتن Semantic
هنگام ساخت صفحات HTML
خود خواهیم پرداخت.
ما تاکنون تمرکز خود را بر استفاده از HTML
برای ساخت صفحات وب خود و ارائه نمایش معینی از محتوا گذاشته ایم. با استاندارد HTML5
، عناصر زیادی معرفی شدند که HTML
را از یک نشانه گذاری ارائه محور به یک رویکرد معنایی محور تر منتقل کردند.
منظور ما از این دقیقاً چیست؟ با بازگشت به تعریف ، هدف HTML
معنایی اون است که معنی هر قسمت از محتوای صفحه وب شما را به وضوح نشان دهد.
توجه داشته باشید که چگونه عناصر HTML5
ذاتاً چیزی درباره سبک قلم مرتبط با متن نشان نمی دهند. با HTML5
، مرز بین معنای محتوا و استایل سازی محتوا کاملاً مشخص است. تمرکز بر استفاده از HTML
برای ساختار معنایی محتوای وب خود مزایای مختلفی را فراهم می کند ، از جمله:
محتوای وب خود را به میزان بسیار بیشتری در دسترس خوانندگان معلول قرار می دهد
استفاده از استایل ها با CSS
سازگارتر و قابل پیش بینی تر خواهد شد
موتورهای جستجو از اطلاعات معنایی برای درک بهتر صفحات وب شما استفاده خواهند کرد
آزمون:
عناصر معنایی ساختاری
در درس قبلی ، ما یاد گرفتیم که چگونه از عناصر div
برای جدا کردن مطالب به بخشهای مختلف استفاده کنیم. با این حال ، عناصر div معنای ذاتی ندارند و اغلب به عنوان ظرف های عمومی برای محتوای طراحی شده استفاده می شوند. با HTML5
، چندین عنصر ساختاری برای تفکیک محتوا به ظروف مناسب تر از نظر معنایی معرفی شد.
<hgroup>
از عناصر hgroup
می توان برای گروه بندی عناصر عنوان استفاده کرد.
<header>
از عنصر header
می تواند برای نشان دادن محتوایی که مشابه عنوان اصلی در یک فایل متنی است استفاده شود.
بسیاری از عناصر header
صفحه وب دارای آرم و منو سایت هستند. به طور کلی ، عنوان در سراسر صفحات ثابت می ماند (اگر سایت شما حاوی چندین صفحه باشد). عناصر هدر اغلب حاوی عناصر مسیریابی هستند که کاربران را به قسمت های مختلف صفحه وب شما هدایت می کنند.
<nav>
عناصر nav
باید برای قرار دادن اجزای صفحه وب شما که برای پیمایش به قسمتهای مختلف صفحه وب شما هستند ، استفاده شود.
یک عنصر nav
اغلب در داخل عنصر header
یافت می شود. اگر می خواهید عناصر پیمایش خود را در جای دیگر صفحه وب قرار دهید ، پیروی از این کنوانسیون ضروری نیست.
<footer>
همانطور که از نام آن پیداست ، عنصر footer
برای قرار دادن محتوایی استفاده می شود که به عنوان زیر صفحه شما در نظر گرفته شود.
یک پاورقی می تواند مواردی مانند نویسنده وب سایت ، اطلاعات مربوط به حق چاپ یا حتی منو و عناصر پیمایش را در صفحات دیگر وب سایت شما ذخیره کند.
<article>
از عناصر article
باید برای قرار دادن جداگانه مطالب استفاده شود که مختص یک صفحه خاص است. ورود به وبلاگ ، یک مقاله خبری /
علمی و یک پست در انجمن همه نمونه های خوبی از مطالب هستند که از نظر معنایی برای ذخیره در عناصر article
مناسب هستند.
عناصر article
باید عنوان داشته باشند تا نشان دهند محتوای مقاله در چه زمینه ای است.
<section>
عناصر section
گروه بندی موضوعی مطالب را در صفحه وب شما نشان می دهند. به عنوان مثال ، اگر صفحه وب شما محتوای یک کتاب را در خود جای داده باشد ، می توان از عناصر section
برای فصل های کتاب استفاده کرد.
عناصر section
نیز باید دارای عنصری باشند که نشان دهد مطالب بخش مربوط به چیست.
به طور کلی ، در مواردی که باید محتوای خود را در گروه های معنایی قرار دهید که با شرح هیچ عنصر معنایی دیگری متناسب نیست ، از عناصر section
استفاده می شود.
از عناصر section
می توان برای تجزیه محتوای یک عنصر article
به اجزای معنایی گسسته استفاده کرد.
<time>
از عنصر time
استفاده کنید تا برای قسمت هایی از محتوای خود که زمان یا تاریخ خاصی را نشان می دهد ، یک تایم قابل خواندن توسط ماشین تهیه کنید. عنصر time
دارای یک ویژگی datetime
است که تاریخ / زمان را در قالب های مختلف به عنوان ورودی می گیرد ، که می توانید در اینجا اطلاعات بیشتری در مورد آن کسب کنید.
time
باید برای مواردی مانند زمان یک رویداد یا تاریخ انتشار پست وبلاگ در یک وب سایت استفاده شود. عناصر time
با متغیرهای متفاوتی ارائه نمی شوند ، اما راهی برای نشان دادن معنایی به رایانه برای محتوای زمان یا تاریخ در نظر گرفته می شود.
<aside>
عناصر aside
به طور کلی برای نگهداری اطلاعات استفاده می شود که بخشی از محتوای اصلی شما نیست ، اما به نوعی با آن مرتبط است.
از عناصر aside
می توان برای مواردی مانند پشتیبانی اطلاعات در مقاله ، یا یک نوار کناری با عناصر پیمایش استفاده کرد.
اکنون که با عناصر معنایی آشنا شدید ، بیایید در درس بعدی اضافه کردن جداول در یک صفحه HTML
را بیاموزیم.