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

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

یک عنصر معنایی معنای آن را به طور واضح هم برای مرورگر و هم برای توسعه دهنده توصیف می کند.

 

نمونه هایی از عناصر غیر معنایی: <div> و <span> - در مورد محتوای آن چیزی نمی گوید.

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

 

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

بسیاری از وب سایت ها حاوی کد HTML مانند: <div id = "nav"> <div class = "header"> <div id = "footer"> برای نشان دادن ناوبری ، سربرگ و پاورقی هستند.

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

 

 

عنصر <section> در HTML

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

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

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

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

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

 

عنصر <article> در HTML

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

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

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

 

سه مقاله با محتوای مستقل:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome یک مرورگر وب است که توسط Google تولید شده و در سال 2008 منتشر شده است. Chrome امروزه محبوب ترین مرورگر وب جهان است!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox یک مرورگر وب منبع باز است که توسط Mozilla ساخته شده است. فایرفاکس از ژانویه 2018 دومین محبوب ترین مرورگر وب است.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge یک مرورگر وب است که توسط مایکروسافت تولید و در سال 2015 منتشر شد. Microsoft Edge جای اینترنت اکسپلورر را گرفت.</p>
</article>
امتحان کنید

 

برای سبک دادن به عنصر <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 یک مرورگر وب است که توسط Google تولید شده و در سال 2008 منتشر شده است. Chrome امروزه محبوب ترین مرورگر وب جهان است!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox یک مرورگر وب منبع باز است که توسط Mozilla ساخته شده است. فایرفاکس از ژانویه 2018 دومین محبوب ترین مرورگر وب است.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge یک مرورگر وب است که توسط مایکروسافت تولید و در سال 2015 منتشر شد. Microsoft Edge جای اینترنت اکسپلورر را گرفت.</p>
  </article>
</article>

</body>
</html>
امتحان کنید

 

<article> در <section> یا بالعکس؟

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

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

آیا می توانیم از تعاریف برای تصمیم گیری در مورد چگونگی لانه سازی این عناصر استفاده کنیم؟ نه ما نمی توانیم!

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

 

عنصر <header> در HTML

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

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

توجه: می توانید چندین عنصر <header> را در یک سند HTML داشته باشید. با این حال ، <header> را نمی توان در عنصر <footer> ، <address> یا عنصر <header> دیگری قرار داد.

یک عنوان برای <article>:
<article>
  <header>
    <h1>WWF چه کاری انجام می دهد؟</h1>
    <p>ماموریت WWF:</p>
  </header>
  <p>ماموریت WWF جلوگیری از تخریب محیط طبیعی سیاره ما است ،
   و آینده ای بسازند که در آن انسان ها با طبیعت هماهنگ زندگی کنند.</p>
</article>
امتحان کنید

 

عنصر <footer> در HTML

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

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

شما می توانید چندین عنصر <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> فقط برای بلوک اصلی پیوندهای ناوبری در نظر گرفته شده است.

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

مجموعه ای از پیوندهای ناوبری:
<nav>
  <a href="https://maxdev.ir/category/html_tutorial/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
امتحان کنید

 

عنصر <aside> در HTML

عنصر <aside> برخی از مطالب را جدا از محتوایی که در آن قرار داده شده است تعریف می کند (مانند یک نوار کناری).

محتوای <aside> باید به طور غیر مستقیم با محتوای اطراف آن مرتبط باشد.

برخی از مطالب را به غیر از محتوایی که در آن قرار داده شده نمایش دهید:
<p>من و خانواده ام این تابستان از مرکز Epcot بازدید کردیم. هوا خوب بود و Epcot شگفت انگیز بود! من تابستان بسیار خوبی را در کنار خانواده ام گذراندم!</p>

<aside>
<h4>مرکز Ecopt</h4>
<p>Epcot یک پارک موضوعی در Walt Disney World Resort است که دارای جاذبه های جذاب ، غرفه های بین المللی ، آتش بازی های برنده جایزه و رویدادهای ویژه فصلی است.</p>
</aside>
امتحان کنید

 

برای سبک دادن به عنصر <aside> از CSS استفاده کنید:
<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>من و خانواده ام این تابستان از مرکز Epcot بازدید کردیم. هوا خوب بود و Epcot شگفت انگیز بود! من تابستان بسیار خوبی را در کنار خانواده ام گذراندم!</p>

<aside>
<p>مرکز Epcot یک پارک تفریحی در Walt Disney World Resort است که دارای جاذبه های جذاب ، غرفه های بین المللی ، آتش بازی های برنده جایزه و رویدادهای ویژه فصلی است.</p>
</aside>

<p>من و خانواده ام این تابستان از مرکز Epcot بازدید کردیم. هوا خوب بود و Epcot شگفت انگیز بود! من تابستان بسیار خوبی را در کنار خانواده ام گذراندم!</p>

</body>
</html>
امتحان کنید

 

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

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

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

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

 
<figure>
  <img src="https://maxdev.ir/admin/uploads/pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
امتحان کنید

 

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

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