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

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

مثال هایی از عناصر غیر اسمی : <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> در HTML5

این عنصر یک بخش در داخل سند تعریف می کند

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

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

مثال : 

 <section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section> 

عنصر <article> در HTML5 

این عنصر محتوایی مستقل را تعریف می کند.

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

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

• پست های فوروم (انجمن)
• پست های بلاگ
• مقالات روزنامه ها

مثال : 

 <article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 

<article> داخل <section> یا بالعکس

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

 <article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 

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

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

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

 >figure>
  >img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  >figcaption>Fig1. - The Pulpit Rock, Norway.>/figcaption>
>/figure>