شما اینجا هستید

عناصر دارای معنی و مفهوم، عناصر معنایی هستند.

عناصر معنایی چه چیزی هستند؟

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

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

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, … اینکار شناسایی محتوای صفحه وب را برای موتورهای جستجو غیر ممکن میکرد. به وسیله عناصر HTML5 مانند : <header> <footer> <nav> <section> و <article> شناسایی محتوای صفحه وب راحتتر شده.

 عناصر غیر معنایی مانند <div> و <span> چیزی در مورد محتوای خود به ما نمیگوید، اما عناصر معنایی مانند <form>، <table> و <img> محتوایشان روشن و واضح است.

پشتیبانی مرورگرها

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

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

برخی از وب سایتها شامل کدهایی مانند <”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> یک قسمت را در سند تعریف میکند. Section گروه بندی موضوعی محتوا است که معمولا یک عنوان هم دارد که با تگهای <h1> یا <h2> مشخص میگردد. صفحه نخست وب سایت میتونه به بخشهایی برای معرفی، محتوا و اطلاعات تماس تقسیم شود.

<section>
  <h1>PPP</h1>
  <p>The Puya pardaz parsian for Nature (PPP) is....</p>
</section>

عنصر <article>

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

نمونه هایی از جاهایی که میتوان از <article> بهره گرفت:

  • پستهای تالار گفتگو

  • پستهای بلاگ

  • نوشتارهای خبرنامه

<article>
  <h1>PPP</h1>
  <p>The Puya pardaz parsian for Nature (PPP) is....</p>
</article>

عنصر <header>

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

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

<article>
  <header>
    <h1>What Does PPP Do?</h1>
    <p>PPP's mission:</p>
  </header>
  <p>PPP's mission is to website design for all of people .</p>
</article>

عنصر <footer>

عنصر <footer> یک پاورقی برای سند یا یک بخش تعریف میکند. یک عنصر <footer> باید شامل اطلاعاتی در مورد محتوای عنصری که شامل آن است باشد. پاورقی معمولا شامل نویسنده سند، اطلاعات کپی رایت، پیوند به قوانین استفاده، اطلاعات تماس و … است. چندین عنصر <footer> را میتوان در یک سند تعریف کرد.

<footer>
  <p>Posted by: mohammad</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

عنصر <nav>

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

<nav>
  <a href="http://learn.puyapardaz.ir/content/learn/learning-topics/48">HTML</a> |
  <a href="http://learn.puyapardaz.ir/content/learn/learning-topics/49">CSS</a> |
  <a href="http://learn.puyapardaz.ir/content/learn/learning-topics/47">مفاهیم اولیه</a> |
  <a href="http://learn.puyapardaz.ir/content/learn/learning-topics/47">jQuery</a>
</nav>

عنصر <aside>

عنصر <aside> برای محتوا نوار کناری تعریف میکند. اصولا محتوای نوار کناری به محتوای اصلی مرتبط هست.

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

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

در کتابها و روزنامه ها، تصاویر معمولا عنوان دارند. هدف از عنوان، افزودن توضیح به یک تصویر است. در HTML5 تصاویر و عناوین را به وسیله عنصر <figure> میتوان گروه بندی کرد:

<figure>
  <img src="puyapardaz.jpg" alt="puyapardaz" width="304" height="228">
  <figcaption>Fig1. - website design.</figcaption>
</figure>

 

دیدگاه‌ها

صفحه‌ها

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

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