یادداشت کن لذت ببر

عناصر معنایی HTML5 جیست؟

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

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

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

توسعه دهندگان با 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 را همه مرورگرهای مدرن پشتیبانی میکنند.

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

 <section>

 <h1>PPP</h1>

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

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

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

• پستهای تالار گفتگو
• پستهای بلاگ
• نوشتارهای خبرنامه

 <article>

 <h1>PPP</h1>

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

عنصر <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>

 <p>Posted by: mohammad</p>

 <p>Contact information: <a href="mailto:someone@example.com">

 someone@example.com</a>.</p> </footer>

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

عنصر <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>

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

 <figure>

 <img src="puyapardaz.jpg" alt="puyapardaz" width="304" height="228">

 <figcaption>Fig1. - website design.</figcaption> </figure>