Semantic در لغت یعنی علم معنای کلمات یا عبارات
عناصر Semantic عناصری هستند که معنا دارند.
عناصر معنایی (semantic) چه هستند؟
عناصر معنایی (semantic)، عناصری هستند که از نام آنها می توان به وضوح به محتوای آنها پی برد.
مثال برای عناصر non-semantic مانند: <div> و <span> - از نام آنها نمی توان به محتوای آنها پی برد.
مثال برای عناصر semantic مانند: <form>, <table>, <img> - به وضوح، محتوای خود را توصیف می کنند.
پشتیبانی مرورگرها
تمام مرورگرهای جدید ( Internet Explorer 9+, Firefox, Opera, Chrome, Safari )عناصر معنایی را پشتیبانی می کنند.
عناصر Semantic جدید در HTML5
امروزه اکثر وب سایت ها، برای طراحی ظاهر صفحات خود از کدهایی شبیه زیر استفاده می کنند:
<"div id="nav">, <div class="header">, <div id="footer>
HTML5 برای تعریف بخش های مختلف یک صفحه وب، عناصر Semantic را ارائه داده است:
-
<article>
-
<aside>
-
<details>
-
<figcaption>
-
<figure>
-
<header>
-
<main>
-
<mark>
-
<nav>
-
<section>
-
<summary>
-
<time>
عنصر <section> در HTML5
عنصر <section> یک بخش یا قسمت مجزا در یک سند وب را تعریف می کند.
بر طبق مستندات کنسرسیوم جهانی وب (W3C) درباره HTML5: "عنصر <section> یک بخش از محتویات مربوط به هم است که بطور نمونه می تواند شامل یک عنوان باشد".
مثال :
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
عنصر <article> در HTML5
عنصر <article> یک مقاله مجزا از سایر محتویات را تعریف می کند.
مقاله باید به تنهایی دارای معنی باشد و امکان خواندن آن به طور مجزایی از سایر قسمت های سایت وجود داشته باشد.
موارد مختلف استفاده از تگ <article>:
-
متن پست ها در فروم ها
-
متن مطالب جدید در وبلاگ ها
-
متن خبری در سایت های خبری
-
توضیحات
مثال :
<article>
<h1>What Does WWF Do?</h1>
<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> در HTML5
عنصر <header> برای یک سند HTML یا برای یک بخش یک سرصفحه (عنوان) تعیین می کند.
عنصر <header> باید شامل مقدمه ای از محتویات صفحه باشد.
می توان چندین عنصر <header> را در یک صفحه استفاده نمود.
در مثال زیر یک عنوان برای مقاله تعریف شده است :
<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>
عنصر <footer> در HTML5
عنصر <footer> برای یک سند یا یک بخش (Section) از HTML یک پاورقی تعیین می کند.
می توان چندین عنصر <footer> را در یک صفحه استفاده نمود.
یک پاورقی (footer)، بطور نمونه می تواند شامل نام نویسنده، حق چاپ (copyright)، اطلاعات تماس و ... باشد.
مثال :
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
عنصر <nav> در HTML5
این عنصر برای دسته بندی و کنار هم قرار دادن گروهی از لینک ها استفاده می شود.
لینک هایی که درون این تگ تعیین شوند، به ترتیب در کنار هم قرار می گیرند.
تمام لینک های یک صفحه را نباید در این عنصر تعریف نمود. فقط لینک های اصلی و پایه ای صفحه در این بخش تعریف می شوند.
مثال :
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
عنصر <aside> در HTML5
این عنصر در کنار متن اصلي يک محتوا تعریف می کند .
محتویات عنصر <aside> باید با مطالب اطراف آن همخوانی داشته باشد.
مثال :
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
عناصر <figure> و <figcaption> در HTML5
در کتاب ها و روزنامه ها معمولا عکس ها دارای عنوان هستند.
از عنصر <figure>، برای تعیین یک محتوای مجزا مثل عکس، دیاگرام ها، لیست ها و ... بروی صفحه استفاده می شود.
از تگ <figcaption> ، برای تعیین یک عنوان یا توضیح برای تگ <fiqure> استفاده می شود.
این عنوان هم می تواند در ابتدا و هم در انتهای عنصر مادر قرار داده شود.
در مثال زیر، نحوه استفاده از تگ <fiqure> و تعیین یک عنوان توسط تگ <figcaption>، برای آن در عمل نمایش داده شده است:
مثال :
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>