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

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

زمان مطالعه

5 دقیقه

تعداد بازدید

67

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

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

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

زمان مطالعه

5 دقیقه

تعداد بازدید

67

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

عناصر معنایی به معنی عناصر دارای معنی هستند که برای جاهای بخصوصی در صفحات وب از آن ها استفاده می شود.

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

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

نمونه هایی از عناصر غیر معنایی : div ، span

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

نمونه هایی از عناصر معنایی : form ، table ، article

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

عناصر معنایی در زبان نشانه گذاری HTML

بسیاری از وب سایت ها حاوی کد HTML شبیه به زیر هستند:

 

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

 

که برای نشان دادن navigation، header و footer از آن ها استفاده می شود.

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

  • Article
  • Aside
  • Details
  • Figcaption
  • Figure
  • Footer
  • Header
  • Main
  • Mark
  • Nav
  • Section
  • Summary
  • Time

 

عناصر معنایی در زبان نشانه گذاری HTML

 

عنصر section در زبان نشانه گذاری HTML

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

طبق اسناد چهارچوب (framework) W3C در زبان نشانه گذاری HTML: "یک بخش، گروه بندی موضوعی محتوا است که معمولا دارای یک عنوان است".

نمونه هایی از مواردی که برای تعریف آن ها می توان از عنصر section استفاده کرد عبارتند از:

  • فصل ها (بخش های یک آموزش)
  • معرفی (معرفی یک محصول یا یک شخص)
  • آیتم های اخبار
  • اطلاعات تماس

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

مثال: در زیر دو عنصر section در یک سند HTML تعریف شده است.

 

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

 

عنصر section در زبان نشانه گذاری HTML

 

عنصر article در زبان نشانه گذاری HTML

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

 

عنصر article در زبان نشانه گذاری HTML

 

مثال: در زیر برای استایل دادن به عناصر 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>

 

عنصر article در زبان نشانه گذاری HTML

 

عناصر تودرتو article درون عنصر section و بالعکس

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

و همینطور گفتیم که عنصر section بخشی را در یک سند HTML تعریف می کند.

آیا می توان از این تعاریف برای تصمیم گیری درباره نحوه نوشتن تودرتو این عناصر استفاده کرد؟ خیر، نمی توانیم.

بنابراین صفحات HTML را با عناصر section که حاوی عناصر article هستند را می توانید پیدا کنید و همینطور بالعکس.

عنصر header در زبان نشانه گذاری HTML

عنصر header در زبان نشانه گذاری HTML، نشان دهنده محتوای بالای وب سایت یا مجموعه ای از پیوندهای ناوبری است.

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

  • یک یا چند عنصر عنوان (h1 - h6)
  • لوگو (logo) یا نماد (icon)
  • اطلاعات کاربری

توجه: می توان چندین عنصر 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>

 

عنصر header در زبان نشانه گذاری HTML

 

عنصر footer در زبان نشانه گذاری HTML

عنصر footer در زبان نشانه گذاری HTML یک پاورقی برای سند یا یک بخش ایجاد می کند.

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

  • اطلاعات نویسنده
  • اطلاعات copyright
  • اطلاعات تماس
  • نقشه سایت (sitemap)
  • لینک بازگشت به بالا (back to top)
  • اسناد مرتبط

شما می توانید در یک سند HTML چندین عنصر footer داشته باشید

مثال: در زیر یک بخش پاورقی برای یک سند ایجاد کرده ایم

 

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

 

عنصر footer در زبان نشانه گذاری HTML

 

عنصر nav در زبان نشانه گذاری HTML

عنصر nav در زبان نشانه گذاری HTML، مجموعه ای از پیوندهای ناوبری (navigation links) را تعریف می کند.

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

مثال: در زیر مجموعه ای از پیوندهای ناوبری را برای شما آورده ایم

 

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

 

عنصر nav در زبان نشانه گذاری HTML

 

عنصر aside در زبان نشانه گذاری HTML

عنصر aside در زبان نشانه گذاری HTML، برخی از محتوا را جدا از آن محتوایی که در آن قرار دارد (مانند نوار کناری)، تعریف می کند.

محتوای عنصر 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>

 

عنصر aside در زبان نشانه گذاری HTML

 

مثال: در زیر از 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>

 

عنصر aside در زبان نشانه گذاری HTML

 

عناصر figure و figcaption در زبان نشانه گذاری HTML

عنصر figure در زبان نشانه گذاری HTML محتوای مستقل را تعریف می کند، مانند: تصاویر، نمودارها، عکس ها، لیست کدها و غیره.

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

مثال: در زیر یک نمونه از تعریف این دو عنصر را برای شما آورده ایم.

 

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

 

عناصر figure و figcaption در زبان نشانه گذاری HTML

 

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

طبق چهارچوب W3C : "یک وبسایت با عناصر معنایی، اجازه می دهد تا داده ها در برنامه ها، شرکت ها و جوامع به اشتراک گذاشته شود و مجددا مورد استفاده قرار گیرند."

عناصر معنایی در زبان نشانه گذاری HTML

در زیر لیستی از عناصر معنایی در زبان نشانه گذاری HTML را برای شما در قالب یک جدول آورده ایم.

 

عناصر معنایی در زبان نشانه گذاری HTML
تگ توضیحات
Article تعریف محتوای جامع و مستقل
Aside تعریف محتوا، جدا از محتوای صفحه
Details جزئیات اضافی را تعریف می کند که کاربر می تواند آن ها را مشاهده یا پنهان کند
Figcaption تعریف یک عنوان برای عنصر figure
Figure تعریف محتوای مستقل، مانند : عکس ها، نمودارها، تصاویر، لیست های کد و غیره
Footer تعریف پاورقی برای سند یا یک بخش
Header تعریف یک سرصفحه برای سند یا یک بخش
Main تعریف محتوای اصلی یک سند
Mark تعریف متن مشخص شده/برجسته شده
Nav تعریف پیوندهای ناوبری
Section تعریف یک قسمت در یک سند
Summary تعریف یک عنوان قابل مشاهده برای عنصر details
Time تعریف زمان/تاریخ

 

خب به پایان یک بخش مهم از مقالات آموزشی زبان نشانه گذاری HTML رسیدیم و کاربرد عناصر معنایی را فرا گرفتیم.

در مقاله بعدی به مبحث style guide در HTML می پردازیم.

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی