100% کامل شده تا

عناصر معنایی در اچ‌تی‌ام‌ال (HTML Semantic Elements)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


عناصر معنایی = عناصر دارای معنی.


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

یک عنصر معنایی بصورت واضح، معنای خود را برای مرورگر و توسعه دهنده توصیف می‌کند.[۱]

نمونه‌هایی از عناصر غیر معنایی: <div> و <span> - هیچ اطلاعاتی در مورد محتوای خود نمی‌دهد.

نمونه‌هایی از عناصر معنایی: <table>، <form> و <article> - به وضوح محتوای خود را تعریف می‌کند.



عناصر معنایی در HTML

بسیاری از وب‌سایت‌ها برای نشان دادن ناوبری، عنوان و پاورقی دارای کد HTML زیر هستند، مانند:

  • <div id="nav">
  • <div class="header">
  • <div id="footer">

در HTML برخی از عناصر معنایی وجود دارد که می‌توانند برای تعریف قسمت‌های مختلف یک صفحه وب استفاده شوند:



عنصر <section> در HTML

عنصر <section> یک بخش را در یک سند تعریف می‌کند.

طبق مستندات W3C's برای HTML: «یک بخش (Section)، گروه‌بندی موضوعی محتوا است که معمولاً دارای یک عنوان است.»

مثال‌هایی از مواردی که می‌توان از عنصر <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>

مثال

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

Responsive demo.svg





عنصر <article> در HTML

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

یک فصل (article) باید به تنهایی با مفهوم باشد و باید خواندن آن به تنهایی و جدا از بقیه وب‌سایت ممکن باشد.

نمونه‌هایی از مواردی که می‌توان از عنصر <article> استفاده کرد:

  • پست‌های انجمن
  • پست‌های بلاگ
  • نظرات کاربران
  • کارت‌های محصول
  • سرفصل‌های روزنامه

مثال

سه مقاله با محتوای مستقل و جامع:

<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>

مثال

<!DOCTYPE html>
<html>
<body>

<h1>The article element</h1>

<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>

</body>
</html>

Responsive demo.svg


مثال

برای استایل دادن به عنصر <article> از CSS استفاده کنید:

<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>

Responsive demo.svg



تودرتو کردن <article> در <section> یا برعکس؟

عنصر <article> محتوای جامع و مستقل را مشخص می‌کند.

عنصر <section> یک بخش در سند را تعریف می‌کند.

آیا می‌توان از تعریف آنها برای تصمیم‌گیری در مورد نحوهٔ تودرتو ساختن عنصرها استفاده کرد؟ نه نمی‌توان!

بنابران، شما صفحات HTML را با عناصر <section> که حاوی عناصر <article> و عناصر <article> که شامل عناصر <section> هستند را خواهید یافت.



عنصر <header> در HTML

عنصر <header> باید بعنوان ظرفی (Container) برای محتوای مقدماتی یا مجموعه ای از پیوندهای ناوبری استفاده شود.

یک عنصر <header> معمولاً شامل موارد زیر است:

  • یک یا چند عنصر عنوان (<h6> - <h1>)
  • لوگو یا آیکن
  • اطلاعات نویسنده سایت
توجه: می‌توانید چندین عنصر <header> را در یک سند HTML داشته باشید. با این حال، <header> را نمی‌توان در یک عنصر <footer>، <address> یا <header> دیگر قرار داد.

مثال

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>

مثال

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

Responsive demo.svg



عنصر <footer> در HTML

عنصر <footer> یک پاورقی برای سند یا بخش تعریف می‌کند.

یک عنصر <footer> معمولاً شامل موارد زیر است:

  • اطلاعات نویسنده
  • اطلاعات کپی رایت
  • اطلاعات تماس
  • نقشه سایت
  • بازگشت به پیوندهای بالا
  • مدارک مربوطه

می‌توانید چندین عنصر <footer> را در یک سند داشته باشید.

مثال

یک بخش footer برای پاورقی در یک سند:

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

مثال

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

</body>
</html>

Responsive demo.svg



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

مثال

<!DOCTYPE html>
<html>
<body>

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

Responsive demo.svg



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

مثال

<!DOCTYPE html>
<html>
<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>
  <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>

</body>
</html>

Responsive demo.svg


مثال

از CSS برای استایل دادن به عنصر <aside> استفاده کنید:

<!DOCTYPE html>
<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>

Responsive demo.svg



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

برچسب <figure> محتوای مستقل را مشخص می‌کند، مانند تصاویر، نمودارها، عکس‌ها، لیست کد و غیره.

تگ <figcaption>، زیرنویس عنصر <figure> را تعریف می‌کند. عنصر <figcaption> را می‌توان به عنوان اولین یا آخرین فرزند عنصر <figure> قرار داد.

عنصر <img> تصویر/تصویر واقعی را تعریف می‌کند.

مثال

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Places to Visit</h2>

<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

</body>
</html>

Responsive demo.svg



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

با توجه به W3C: «یک وب معنایی اجازه می‌دهد تا داده‌ها در برنامه‌ها، شرکت‌ها و جوامع به اشتراک گذاشته شده و مجدداً مورد استفاده قرار گیرد.»



عناصر معنایی در HTML

در زیر لیستی از عناصر معنایی در HTML آمده‌است.


منابع آموزشی




به‌روزرسانی شده: ۶ روز پیش