عناصر معنایی = عناصری که معنا و مفهوم دارند.
یک عنصر معنایی، معنای خود را به وضوح هم برای مرورگر و هم برای توسعه‌دهنده توصیف می‌کند.
نمونه‌هایی از عناصر غیر-معنایی: <div> و <span> - هیچ‌چیز در مورد محتوای خود نمی‌گویند. نمونه‌هایی از عناصر معنایی: <img>، <table> و <article> - محتوای خود را به وضوح تعریف می‌کنند.
بسیاری از وب‌سایت‌ها حاوی کدهای HTML مانند <div id="nav">، <div class="header"> و <div id="footer"> برای مشخص کردن بخش ناوبری، سربرگ و پاورقی هستند. در HTML چندین عنصر معنایی وجود دارد که می‌توان از آن‌ها برای تعریف بخش‌های مختلف یک صفحه وب استفاده کرد:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
<section> در HTMLعنصر <section> یک بخش را در یک سند تعریف می‌کند. طبق مستندات HTML کنسرسیوم وب جهانی (W3C): «یک بخش (section)، گروه‌بندی موضوعی محتوا است که معمولاً یک عنوان (heading) دارد.»
نمونه‌هایی از مواردی که می‌توان از عنصر <section> استفاده کرد:
فصل‌ها
مقدمه
اخبار
اطلاعات تماس
یک صفحه وب به طور معمول می‌تواند به بخش‌هایی برای مقدمه، محتوا و اطلاعات تماس تقسیم شود.
دو بخش در یک سند:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section><article> در HTMLعنصر <article> محتوای مستقل و خودکفا (independent, self-contained) را مشخص می‌کند. یک مقاله (article) باید به تنهایی معنا داشته باشد و باید بتوان آن را به طور مستقل از بقیه وب‌سایت توزیع کرد.
نمونه‌هایی از مواردی که می‌توان از عنصر <article> استفاده کرد:
پست‌های انجمن (Forum)
پست‌های وبلاگ
نظرات کاربران
کارت‌های محصول
مقالات روزنامه
سه مقاله با محتوای مستقل و خودکفا:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>استفاده از CSS برای استایل‌دهی به عنصر <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1,
.browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html><article> در <section> یا برعکس؟عنصر <article> محتوای مستقل و خودکفا را مشخص می‌کند. عنصر <section> یک بخش را در یک سند تعریف می‌کند.
آیا می‌توانیم از این تعاریف برای تصمیم‌گیری در مورد نحوه تودرتو کردن این عناصر استفاده کنیم؟ خیر، نمی‌توانیم! بنابراین، شما صفحات HTMLای را خواهید یافت که عناصر <section> در آن‌ها حاوی عناصر <article> هستند و همچنین صفحات دیگری که عناصر <article> در آن‌ها حاوی عناصر <section> هستند.
<header> در HTMLعنصر <header> یک محفظه (container) برای محتوای مقدماتی یا مجموعه‌ای از لینک‌های ناوبری را نشان می‌دهد. یک عنصر <header> به طور معمول شامل موارد زیر است:
یک یا چند عنصر عنوان (<h1> - <h6>)
لوگو یا آیکون
اطلاعات نویسنده
توجه: شما می‌توانید چندین عنصر <header> در یک سند HTML داشته باشید. با این حال، <header> نمی‌تواند درون یک عنصر <footer>، <address> یا یک <header> دیگر قرار گیرد.
یک سربرگ برای یک <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> در HTMLعنصر <footer> یک پاورقی برای یک سند یا بخش تعریف می‌کند. یک عنصر <footer> به طور معمول شامل موارد زیر است:
اطلاعات نویسنده
اطلاعات حق نشر (کپی‌رایت)
اطلاعات تماس
نقشه سایت (sitemap)
لینک‌های بازگشت به بالا
اسناد مرتبط
شما می‌توانید چندین عنصر <footer> در یک سند داشته باشید.
یک بخش پاورقی در یک سند:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer><nav> در HTMLعنصر <nav> مجموعه‌ای از لینک‌های ناوبری را تعریف می‌کند. توجه داشته باشید که همه لینک‌های یک سند نباید داخل عنصر <nav> قرار گیرند. عنصر <nav> فقط برای بلوک‌های اصلی لینک‌های ناوبری در نظر گرفته شده است. مرورگرها، مانند صفحه‌خوان‌ها (screen readers) برای کاربران دارای معلولیت، می‌توانند از این عنصر برای تشخیص اینکه آیا رندر اولیه این محتوا را نادیده بگیرند یا خیر، استفاده کنند.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav><aside> در HTMLعنصر <aside> محتوایی را تعریف می‌کند که در کنار محتوایی که در آن قرار گرفته است، جای میگیرد (مانند یک نوار کناری یا sidebar). محتوای <aside> باید به طور غیرمستقیم با محتوای اطراف خود مرتبط باشد.
نمایش مقداری محتوا در کنار محتوایی که در آن قرار گرفته است:
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>استفاده از CSS برای استایل‌دهی به عنصر <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html><figure> و <figcaption> در HTMLتگ <figure> محتوای خودکفا مانند تصاویر، نمودارها، عکس‌ها، لیست کدها و غیره را مشخص می‌کند. تگ <figcaption> یک زیرنویس (caption) برای عنصر <figure> تعریف می‌کند. عنصر <figcaption> می‌تواند به عنوان اولین یا آخرین فرزند یک عنصر <figure> قرار گیرد. عنصر <img> تصویر یا تصویرسازی واقعی را تعریف می‌کند.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
به گفته codoloper: «یک وب معنایی اجازه می‌دهد تا داده‌ها در سراسر برنامه‌ها، شرکت‌ها و جوامع به اشتراک گذاشته شده و مجدداً استفاده شوند.»
در زیر لیستی از برخی عناصر معنایی در HTML آمده است.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/