‎‎عناصر معنائيHTML Semantic Elements -‎

Previous >    <Next  

‎‎عنصر معنائي چيستWhat are Semantic Elements -‎

‎عنصر معنائي به عناصري گويند كه آن داراي معناي خاصي باشد .يك عنصر معنائي به وضوح معناي ‎خود را براي توسعه دهنده ومرورگر توصيف ميكند.

‎بعوان مثال عناصر‎<div>‎ و‎<span>‎ ، غير معنائي است ‎محتوي آنها مطلب خاصي را مطرح نمي كنند.

‎نمونه هاي عنصر معنائي عناصر‎<table>‎ ،‎<article>‎ ‎و‎<form>‎ ‎هستند كه محتوي خودشان را بوضوح مطرح ميكنند.

‎‎عناصر معنائيSemantic Elements in HTML -‎

‎‎در بسياري از وب سايت ها كدهائي مثل نمونه زير وجود دارد.

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

‎كه آنها مشخص كننده قسمت پيمايشي، تيتر وپاورقي ميباشند، اين كدها ‎نشان دهنده اين مطلب است كه‎<div>‎ ‎خود چيزي را در جهت محتوا بيان نميكند .اما با ويژگي هاي استفاده شده معاني متفاوتي پيدا ‎ميكند.

‎برخي از عناصر معنائي درHTML وجو دارد كه ازآنها ميتوان براي تعريف بخش هاي مختلف مفهوم دار ‎صفحات وب استفاده نمود .انها مطابق زيرند:

HTML5 Semantic Elements

‎‎عنصر بخشHTML <section> Element -‎

‎با عنصرHTML ‎<section>‎ بخشي را در سند تعريف مي نمايند .در طبقه بندي W3S‎در مستندات صفحات عناويني كه باهم همخواني داشته دربخش مي گنجانند .نمونه هائي از گروه ‎مطالب كه ميتوان در بخش استفاده نمود، در زير عنوان شده است.

‎‎يك صفحه وب معمولا ميتواندبه بخشهائي براي معرفي، محتوا واطلاعات تماس تقسيم شود.

‎‎مثال ـ استفاده از دوبخش در يك سند.

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

--(go to editor for change code and run)

‎‎عنصر مستقلHTML <article> Element -‎

‎با عنصرHTML ‎<article>‎ يك محتوي مستقل را معرفي مي شود .اين محتوي بايد ‎بصورتي باشد، كه بتوان آنر جدا نمود ومجزاي آن كامل باشد.

‎‎نمونه اي از گروه مطالب كه ميتوان در‎<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>

--(go to editor for change code and run)

‎‎مثال ـ استايل عنصر‎<article>‎ باCSS

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

--(go to editor for change code and run)

‎Nesting <article> in <section> or Vice Versa?‎

‎استفاده تودر توي دوعنصر‎ <secttion>‎ ‎و‎ <article> ‎

‎با توچه به تعاريفي كه ازدو عنصر فوق شده است، ممكن است موضوعاتي باشد كه در روش تو درتو ‎درآن دو، بتوان استفاده نمود .منعائي براي اينكار نيست .اما متنW3S عدم استفاده را بيان ‎كرده است .وپيشنهاد پيدا كردن چنين موردي عيني را داده است.

‎‎عنصر هدرHTML <heade> Element -‎

‎عنصر‎<header>‎ فضا يا ظرفيست براي در برداشتن مطالب مقدماتي ويا پيوند هاي ‎كلي هدايت كننده(navigation link)

‎‎عنصر‎<header>‎ معمولا شامل موارد زيراست:

‎

‎توجه ـ ميتوان چندين عنصرsapn><header>‎ در يك سند داشت .اما نبايد آنرا در يك عنصر< ‎<footer>‎‎يا‎<address>‎ يا عنصر ديگر خودش قرارداد .

‎‎مثال ـ يك هدر در‎<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>

--(go to editor for change code and run)

‎‎عنصر پاورقيHTML <footer> Element -‎

‎باعنصر‎<footer>‎ يك پاورقي براي سند يا يك بخش ميتوان تعريف نمود .اين عنصر ‎معمولا شامل موارد زير ميشود.

‎‎در يك سند ميتوانيد از عنصر پاورقي به تعداد دلخواه داشته باشيد .در تعداد محدويت ندارد.

‎‎مثال ـ بخش پاورقي در يك سند

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

--(go to editor for change code and run)

‎‎عنصر ناوHTML <nav> Element -‎

‎عنصرHTML ‎<nav >‎ مجموعه اي از پيوند هاي آبشاري ياناوبري راتعريف ميكند. ‎نمونه هائي ،مثل فهرست مطالب، منوها و...درnav استفاده ميشوند.

‎

‎توجه داشته باشيد كه همه پيوندها نبايد در بخش ناوبري قرار ياشند، فقط پيوندهاي نواحي اصلي ‎ناوبري در آن قرارميگيرد.

‎مرورگرها، مانند صفحه خوان كاربران غير فعال، مي توانند ازاين عنصر براي حذف نمايش اوليه اين ‎محتوي استفاده كنند.

‎‎مثال ـ نمونه مجموعه پيوندناوبري

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

--(go to editor for change code and run)

‎‎عنصرحاشيهHTML <aside> Element -‎

‎بعضي از محتوا ها را جدا ازمحتوي اصلي در اين عنصر قرارميدهند،مثل محتوي حاشيه ها .البته ‎بايد موارد فوق با محتوي اصلي مرتبط باشد.

‎‎مثال ـ نمونه استفاده عنصر‎<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>

--(go to editor for change code and run)

‎‎مثال ـ استفاده از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>

--(go to editor for change code and run)

‎HTML <figure> and <figcaption> Elements‎

‎‎عناصر شكل وعنوان شكل

‎عنصر‎<figure>‎ محتوائي از نوع اشكال، نمودار، تصويرو...را تعريف مي نمايد . ‎همچنين عنصر‎<figcaption>‎ عنواني را براي عنصر ‎<figure>‎‎تعريف ميكند .عنصر عنوان در دل figure قرار ميگيرد .

‎‎مثال ـ معرفي تصوير با عنصر‎<figure>‎

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

--(go to editor for change code and run)

‎‎عناصر معنائيSemantic Elemens in HTML -‎

‎‎در جدول زير برخي از عناصر معنائي آمدهاست

‎
‎‎تگ عنصر معنائي ‎‎شرح عنصر
‎ <article> ‎‎يك متن مستقل را تعريف ميكند
‎ <aside> ‎‎يك متن حاشيه اي را تعريف ميكند
‎ <detail> ‎‎متن اضافي را تعريف ميكند .كاربر ميتوان آنرنمايان يا پنهان كند.
‎ <figcaption> ‎‎عنواني را براي عنصرfigure تعريف ميكند .
‎ <figure> ‎‎محتوائي مثل دياگرام، تصوير ،فوتو، ليست كدو...تعريف مي نمايد.
‎ <footer> ‎‎متن پاورقي را براي سند يابخشي از سند تعريف ميكند
‎ <header> ‎‎محتوائي را براي عنوان تعريف ميكند.
‎ <main> ‎‎محتواي اصلي سند را تعريف ميكند.
‎ <mark> ‎‎متني علامت دار ويا هاي لايت شده را معرفي ميكند.
‎ <nav> ‎‎پيوند هاي كلي ناوبري يا آبشاي را تعريف ميكند.
‎ <section> ‎‎بخشي را در سند تعريف مي نمايد.
‎ <summary> ‎‎يك تيتر قابل مشاهده براي عنصر‎<detail>‎ تعريف مي نمايد .
‎ <time> ‎‎تاريخ وزمان را تعريف ميكند.

Previous >    <Next