عناصر معنایی (Semantic) در HTML
عناصر معنایی = عناصری که معنا و مفهوم دارند.
عناصر معنایی چه هستند؟
یک عنصر معنایی، معنای خود را به وضوح هم برای مرورگر و هم برای توسعه‌دهنده توصیف می‌کند.
نمونه‌هایی از عناصر غیر-معنایی: <div> و <span> - هیچ‌چیز در مورد محتوای خود نمی‌گویند. نمونه‌هایی از عناصر معنایی: <img>، <table> و <article> - محتوای خود را به وضوح تعریف می‌کنند.
عناصر معنایی در HTML
بسیاری از وب‌سایت‌ها حاوی کدهای 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
در زیر لیستی از برخی عناصر معنایی در HTML آمده است.