عناصر معنایی چیست؟

یک عنصر معنایی به وضوح معنای خود را برای مرورگر و توسعه دهنده توصیف می کند.

نمونه هایی از عناصر غیر معنایی: <div> و <span> – چیزی در مورد محتوای آن نمی گوید.

نمونه هایی از عناصر معنایی: <form>، <table> و <article> – محتوای آن را به وضوح تعریف می کند.

عناصر معنایی در HTML

بسیاری از وب‌سایت‌ها حاوی کدهای HTML مانند: <div id=”nav”> <div class=”header”> <div id=”footer”> برای نشان دادن پیمایش، هدر و پاورقی هستند.

عنصر <section> HTML

عنصر <section> یک بخش را در یک سند تعریف می کند.

با توجه به مستندات HTML W3C: “یک بخش یک گروه بندی موضوعی از محتوا است، معمولا با یک عنوان.”

نمونه هایی از جایی که می توان از عنصر <section> استفاده کرد:

• فصل ها

• معرفی

• اخبار

• اطلاعات تماس

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

عنصر <article> HTML

عنصر <article> محتوای مستقل و مستقل را مشخص می کند.

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

نمونه هایی از جایی که می توان از عنصر <article> استفاده کرد:

• پست های انجمن

• پست های وبلاگ

• نظرات کاربران

• کارت های محصول

• مقالات روزنامه

قرار دادن <article> در <section> یا بالعکس؟

عنصر <article> محتوای مستقل و مستقل را مشخص می کند.

عنصر <section> بخش را در یک سند تعریف می کند.

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

بنابراین، صفحات HTML با عناصر <section> حاوی عناصر <article> و عناصر <article> حاوی عناصر <section> را خواهید یافت.

عنصر <header> HTML

عنصر <header> یک محفظه برای محتوای مقدماتی یا مجموعه ای از پیوندهای ناوبری را نشان می دهد.

یک عنصر <header> معمولاً شامل:

یک یا چند عنصر عنوان (<h1> – <h6>)

لوگو یا نماد

اطلاعات نویسندگی

توجه: شما می توانید چندین عنصر <header> را در یک سند HTML داشته باشید. با این حال، <header> را نمی توان در یک <footer>، <address> یا دیگر عنصر <header> قرار داد.

عنصر HTML <footer>

عنصر <footer> یک پاورقی برای یک سند یا بخش تعریف می کند.

یک عنصر <footer> معمولاً حاوی:

اطلاعات نویسندگی

اطلاعات کپی رایت

اطلاعات تماس

نقشه سایت

بازگشت به لینک های بالا

مدارک مربوطه

شما می توانید چندین عنصر <footer> را در یک سند داشته باشید.

عنصر <nav> HTML

عنصر <nav> مجموعه ای از پیوندهای ناوبری را تعریف می کند.

توجه داشته باشید که همه پیوندهای یک سند نباید در یک عنصر <nav> باشند. عنصر <nav> فقط برای بلوک های اصلی پیوندهای ناوبری در نظر گرفته شده است.

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

عنصر <aside> HTML

عنصر <aside> مقداری از محتوا را جدا از محتوایی که در آن قرار داده شده است (مانند نوار کناری) تعریف می کند.

محتوای <aside> باید به طور غیر مستقیم با محتوای اطراف مرتبط باشد.

عناصر <figure> و <figcaption> HTML

تگ <figure> محتوای مستقلی مانند تصاویر، نمودارها، عکس‌ها، فهرست کدها و غیره را مشخص می‌کند.

تگ <figcaption> یک عنوان برای عنصر <figure> تعریف می کند. عنصر <figcaption> را می توان به عنوان اولین یا آخرین فرزند یک عنصر <figure> قرار داد.

عنصر <img> تصویر/تصویر واقعی را تعریف می کند.

چرا عناصر معنایی؟

بر اساس W3C: “وب معنایی اجازه می دهد تا داده ها را در برنامه ها، شرکت ها و جوامع به اشتراک گذاشته و مجددا استفاده شود.”