خانه / آموزش HTML / بخش سی و نهم-عناصر معنایی HTML5
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۱۷ آذر ۱۳۹۷ تعداد بازدید : 7 بازدید بدون دیدگاه

بخش سی و نهم-عناصر معنایی HTML5

قدم قبلی >< قدم بعدی

عناصر معنایی HTML5

در این  آموزش html  به معرفی عناصر معنایی HTML5 می پردازیم.

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

عناصر معنایی = عناصر با معنی.

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

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

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

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

عناصر معنایی HTML5 در تمام مرورگرهای مدرن پشتیبانی می شوند.

علاوه بر این، شما می توانید “آموزش” مرورگر های قدیمی تر به عنوان “عناصر ناشناخته” اداره کند.

عناصر معنایی جدید در HTML5

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

HTML5 عناصر معنایی جدیدی را برای تعریف بخش های مختلف یک صفحه وب ارائه می دهد:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

عنصر section 

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

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

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

عنصر article

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

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

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

  • پست انجمن
  • پست وبلاگ
  • مقاله روزنامه
قرار دادن <article> در <section> یا معاون نسخه؟

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

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

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

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

شما همچنین صفحاتی با عناصر <section> حاوی <section> عناصر و <article> عناصر حاوی <article> عناصر را پیدا خواهید کرد.

مثال برای یک روزنامه: ورزش <article> در بخش ورزش، ممکن است بخش فنی در هر <article> داشته باشد.

عنصر header

عنصر <header> یک سرصفحه برای یک سند یا بخش را مشخص می کند.

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

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

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

عنصر footer

عنصر <footer> یک پایه برای یک سند یا بخش مشخص می کند.

عنصر <footer> باید حاوی اطلاعاتی درباره عنصر حاوی آن باشد.

پاورقی معمولا شامل نویسنده سند، اطلاعات کپی رایت، پیوندهایی به شرایط استفاده، اطلاعات تماس و غیره است.

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

 عنصر nav

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

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

عنصر aside

عنصر aside بعضی از مطالب را جدا از محتوایی که در آن قرار داده شده است (مانند نوار جانبی).

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

عناصر figure و figcaption

هدف از یک عبارت رقمی این است که یک تصویر بصری را برای یک تصویر اضافه کنید.

در HTML5، یک تصویر و عنوان را می توان در یک عنصر <figure> گروه بندی کرد:

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

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

با HTML4، توسعه دهندگان از نام شناسه / نام کلاس خود به عناصر سبک استفاده می کنند: header، top، bottom، footer، menu، navigation، main، container، content، article، sidebar، topnav و غیره

این باعث شد که موتورهای جستجو برای تعیین محتوای صحیح صفحه وب غیرممکن باشد.

با عناصر HTML5 جدید (<header> <footer> <nav> <section> <article>)، این کار ساده تر خواهد شد.

 

گام قبلی >< گام بعدی
بخش سی و نهم-عناصر معنایی HTML5
5 (100%) 1 vote

لینک کوتاه این مطلب: https://tiktheme.com/?p=12065


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *