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

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

عناصر معنایی html5 چیست؟ و چه کاربردی دارد؟

عناصر معنایی html : سمنتیک (semantic) مطالعه در مورد معنای کلمات و عبارات در یک زبان است.

Semantic elements = elements with a meaning.

عناصر معنایی یعنی عناصری که معنا دارند.

به تگ هایی که یک معنی یا مفهومی را به ما ( من و شما ) و موتورهای جستجوگر ( مثل گوگل و.. ) یا مرورگرها ( مثل فایرفاکس یا گوگل کروم و.. ) میدهند تگ های معنایی می گویند.

Semantic Elements چیست؟

یک semantic element یا همان عنصر معنایی به طور واضح برای مرور گر و توسعه دهنده (developer) معنای خود را توضیح می دهد.

مثال هایی در مورد عناصر non-semantic (بدون معنی ) :

<div> and <span> درباره محتویات آن چیزی نمی گوید.

مثال هایی در مورد عناصر semantic:

<form>, <table>, <article> به وضوح محتوای آن را تعریف می کند.

تگ های معنایی یا Semantic در HTML

بسیاری از وب سایت ها برای نشان دادن هدر ، فوتر و navigation (ناوبری) دارای کد html هستند مانند :

اما در HTML چندین عنصر معنایی وجود دارد که می توانند به منظور تعریف کردن بخش های مختلف یک وب سایت به کار روند و جاگزین روش قبلی باشند. تگ هایی مانند:

Header : یعنی آن قسمت هدر صفحه وب است
Nav : یعنی منوی اصلی سایت
Section : یعنی یک بخش از یک چیزی، یا مثلا یک بخش خاص
Article : یعنی مطالب یا پست ها یا مقاله های سایت آنجا قرار دارند
Aside : یعنی ستون کناری سایت
Footer : یعنی بخش پایینی یا فوتر سایت

لیست کامل تگ های معنایی در HTML

<abbr>	<address>	<article>
<aside>	<audio>	<blockquote>
<body>	<button>	<caption>
<code>	<details>	<embed>
<figure>	<figcaption>	<footer>
<form>	<head>	<header>
<iframe>	<img>	<label>
<link>	<main>	<mark>
<meta>	<nav>	<output>
<p>	<picture>	<progress>
<script>	<section>	<source>
<style>	<summary>	<table>
<time>	<title>	<var>
<video>

عنصر section در HTML

تگ section برای ایجاد بخش های مجزا در صفحه HTML به کار می رود.

به طور مثال برای ارائه مطالب گروه بندی شده که معمولا یک عنوان خاص دارند، می توانید از تگ section استفاده کنید.

تگ section می تواند به صورت تو در تو (nested) مورد استفاده قرار گیرد، به عبارتی یک بخش می تواند زیرمجموعه های دیگری با section های بیشتر داشته باشد.

تگ section می تواند یک یا چند تگ عنوان (h1 تا h6) داشته باشد، اما به صورت منحصر بفرد و تنها یک مورد از هر تگ (h1 تا h6) و سلسه مراتب این تگ ها نیز باید رعایت شود.

مثال زیر نحوه استفاده از تگ section را نشان می دهد:

<section>
  <h1>WWF</h1>
  <p>صندوق جهانی طبیعت (WWF) یک سازمان بین‌المللی است که روی مسائل مربوط به حفاظت، تحقیق و احیای محیط‌زیست کار می‌کند که قبلاً صندوق جهانی حیات وحش نامیده می‌شد. WWF در سال 1961 تاسیس شد.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>پاندا به نماد WWF تبدیل شده است. لوگوی پانداهای معروف WWF از پاندایی به نام چی چی که در همان سال تاسیس WWF از باغ وحش پکن به باغ وحش لندن منتقل شد، نشات گرفت.</p>
</section>

<p>صندوق جهانی طبیعت (WWF) یک سازمان بین‌المللی است که روی مسائل مربوط به حفاظت، تحقیق و احیای محیط‌زیست کار می‌کند که قبلاً صندوق جهانی حیات وحش نامیده می‌شد. WWF در سال 1961 تاسیس شد.</p>

</section>

<h1>WWF's Panda symbol</h1>

<p>پاندا به نماد WWF تبدیل شده است. لوگوی پانداهای معروف WWF از پاندایی به نام چی چی که در همان سال تاسیس WWF از باغ وحش پکن به باغ وحش لندن منتقل شد، نشات گرفت.</p>

</section>

خروجی:

عنصر <article> در HTML

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

مثال هایی از اینکه یک عنصر article کجاها می تواند استفاده شود:

پست Forum
پست بلاگ
مقاله ، روزنامه

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

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

<h1>The article element</h1>

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

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

<h2>Microsoft Edge</h2>

<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

</article>

خروجی:

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

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

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

<h1>Most Popular Browsers</h1>

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

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

<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 در تگ section یا بالعکس؟

article می تواند به صورت تو در تو تگ های section داشته باشد و همین طور تگ section می تواند تگ های article زیرمجموعه داشته باشد، مهم این است که کارکرد هر قسمت متناسب با محتوای آن مشخص شده باشد.

تگ Header

تگ header یک تگ عمومی است و می توان از آن در هر قسمت از صفحه که باید یک سرتیتر یا مجموعه ای از عناصر مرتبط با سرصفحه مانند تگ های h ، لوگوی صفحه، فرم جستجو و … قرار گیرند، استفاده کرد. یک عنصر header معمولا شامل :

یک یا دو عنصر heading (h1 – h6)
لوگو یا آیکون
اطلاعات مرتبط به تالیف و نگارش

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

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

نکته : به خاطر داشته باشید که در یک سند HTML می توانید از چندین تگ header استفاده کنید. با این حال ، تگ header نمی تواند درون تگ های footer ، address یا یک تگ header دیگر قرار بگیرد. مثال زیر نحوه استفاده از تگ header را نشان می هد.

عنصر footer در HTML

از این عنصر برای تعریف پاصفحه در وب سایت مورد استفاده قرار می گیرد.

یک تگ <footer> ، باید اطلاعاتی را در باره ی محتوی عناصر دیگر ارائه دهد.

تگ footer معمولا شامل موارد زیر می باشد:

اطلاعات مرتبط به تالیف و نگارش
اطلاعات مرتبط به کپی رایت
راه های ارتباطی
نقشه سایت (sitemap)
لینک های رجوع به بالای سایت
صفحه های مرتبط

مثال:

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

<p>Author: Hege Refsnes</p>

<p><a href="mailto:[email protected]">[email protected]</a></p>

</footer>

خروجی:

تگ nav در HTML

تگ nav لیستی از لینک های هدایت کننده (navigation bar) را تعریف می کند.

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

مانند لینک صفحه نخست، درباره ما، تماس با ما، بخش های اصلی و… .

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

<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 محتوایی را بیرون و جدا از محتوای اصلی تعریف می کند.

به عبارتی برای ایجاد یک قسمت مجزای مستقل ولی مرتبط با محتوای اصلی در سند HTML می توان از تگ aside استفاده کرد.

مثال 1:

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

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

خروجی:

مثال 2:

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

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

</body>

</html>

خروجی:

عناصر figure و figcaption در HTML

از تگ <figure> و <figcaption> ، برای افزودن متن و عناوین روی یک تصویر استفاده می شود.

تگ figure جهت تعریف محتوای دارای توضیح در سند HTML کاربرد دارد، منظور از محتوای دارای توضیح مواردی مانند تصاویر، نمودارها، کدها و… می توانند باشند که معمولا در کنار خود، متنی جهت توضیح یا برچسب دارند.

تگ figcaption یک توضیح برای عنصر figure در خود دارد. عنصر figcaption می تواند به عنوان اولین و یا آخرین فرزند یک عنصر figure قرار بگیرد.

مثال:

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

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

<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure>

</body>

</html>

خروجی:

در مثال بالا تگ <img>، یک تصویر و تگ <figcaption> ، متن روی تصویر را تعریف می کند.

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

تگ	توضیحات
<article>	تعریف یک article
<aside>	تعریف محتوای حاشیه ی صفحه
<details>	تعریف جزئیات اضافی که کاربر می تواند آن را مخفی کند.
<figcaption>	تعریف عنوان برای <figure>
<figure>	برای رسم نموداری های مختلف
<footer>	تعریف پاصفحه
<header>	تعریف سرصفحه
<main>	محتوای اصلی یک سند html
<mark>	علامتگذاری متن ها
<nav>	لینک های منو
<section>	تعریف یک بخش در یک سند html
<summary>	تعریف سرصفحه برای عنصر <details> در حالت مخفی آن
<time>	تعریف یک نوع date/time

کلام آخر

عناصر نوع Semantic در html5 عناصر جدیدی از html است که در نسخه ی HTML5 عرضه شده است، این عناصر باعث مفهومی تر شدن و درک بهتر بخش های صفحات وب برای موتورهای جستجوگر می شوند.

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