المان های معنایی (Semantics)
«المان های معنایی HTML» یعنی تگ هایی با معنی روشن. این تگ ها فهم صفحه را ساده می کنند. موتور جستجو هم خوشحال می شود. «معناشناسی (Semantics)» یعنی معنی دار بودن ساختار. پس با المان های معنایی HTML، کد تمیزتر و قابل فهم تر می شود.
المان معنایی چیست؟
یک المان معنایی معنی خود را به مرورگر و برنامه نویس توضیح می دهد. برای نمونه، <article> درباره محتوا حرف می زند. اما <div> بدون معنی مشخص است. بنابراین خواندن کد سریع تر می شود.
نکته: برای شروع منظم، صفحه المان های معنایی را نشانه گذاری کن. سپس برای نمایش کدها به کدهای رایانه ای سر بزن و درباره طراحی واکنش گرا هم بخوان.
المان <section> در HTML
المان «بخش (Section)» یک بخش موضوعی از صفحه است. معمولاً یک عنوان دارد. مثل فصل، مقدمه، خبر یا اطلاعات تماس.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The panda logo of WWF originated from a panda named Chi Chi.</p>
</section>
المان <article> برای محتوای مستقل
«مقاله (Article)» محتوای مستقل و خودبسنده است. بتوانی جداگانه منتشرش کنی. مثل پست وبلاگ، دیدگاه کاربر یا کارت محصول.
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser released in 2008.</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser by Mozilla.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge replaced Internet Explorer.</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 is a web browser released in 2008.</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source browser by Mozilla.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
رابطه <article> و <section>
گاهی <section> داخل <article> است. گاهی برعکس. از معنی محتوا کمک بگیر. مهم خودبسنده بودن مقاله و موضوع دار بودن بخش است.
المان <header> برای مقدمه و ناوبری
«سربرگ (Header)» جا برای عنوان، لوگو، یا لینک های مهم است. در یک سند چند سربرگ می توان داشت. ولی داخل <footer> یا <address> قرار نده.
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to protect nature for the future.</p>
</article>
المان <footer> برای پایین صفحه
«پابرگ (Footer)» شامل نویسنده، کپی رایت، تماس و لینک های کمکی است. می توان چند پابرگ داشت.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
المان <nav> برای لینک های ناوبری
«ناوبری (Navigation)» یعنی مجموعه لینک های اصلی. همه لینک ها لازم نیست داخل <nav> باشند. فقط بخش های مهم را بگذار.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
المان <aside> برای محتوای کناری
«کناری (Aside)» محتوای مرتبطِ غیرمستقیم است. مثل باکس نکته یا تاریخچه. کنار متن اصلی قرار می گیرد.
<p>We visited Epcot this summer. It was amazing!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park with international pavilions and events.</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>We visited Epcot this summer. It was amazing!</p>
<aside>
<p>Epcot has attractions and seasonal events.</p>
</aside>
<p>We had a great summer together!</p>
</body>
</html>
المان های <figure> و <figcaption>
«شکل (Figure)» محتوای مستقل مثل تصویر، نمودار یا کد است. «زیرنویس شکل (Figcaption)» توضیح کوتاه شکل را می نویسد.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
چرا المان های معنایی مهم اند؟
به خاطر دسترس پذیری بهتر، سئو بهتر، و نگهداری آسان تر. مثل دفتر یادداشت مرتب. پیدا کردن مطلب ساده تر می شود.
تمرین های سریع با المان های معنایی HTML
- یک
<header>با عنوان و لوگو بساز. - فهرست لینک ها را در
<nav>بچین. - یک پست را در
<article>بنویس. - بخش های صفحه را با
<section>جدا کن. - یک تصویر با
<figure>و توضیح بساز.
جمع بندی سریع
<article>محتوای مستقل است.<section>گروه موضوعی است.<header>و<footer>چارچوب صفحه اند.<nav>فقط لینک های مهم را نگه دارد.<aside>محتوای کناری مرتبط است.