تگ section و article در html5
در این مقاله قصد دارم درباره استفاده از دو تگ section و article صحبت کنیم و تفاوت های آن ها را با هم بررسی کنیم.
تگ section
کاربرد تگ section برای تقسیم بندی صفحه می باشد و به بیان دیگر نماینده قسمتی از صفحه می باشد. در مورد اینکه دقیقا چه جایی باید از تگ section استفاده شود این مطلب گفته می شود که در قسمتهایی از صفحه که ارتباط معنایی با هم دارند شما می توانید آن ها را یک قسمت در نظر بگیرید و از تگ section استفاده کنید. معمولا sectionها دارای یک تگ header می باشند و ممکن است که تگ footer نیز داشته باشند و همچنین در داخل تگ Section تگ های article, aside, nav, section می تواند قرار بگیرد.
در مواقعی که ما می خواهیم یک تگ، به عنوان نگه دارنده تگ های دیگر و یا برای قالب بندی و یا برای نوشتن اسکریپت استفاده شود بهتر است از تگ section استفاده نشود و به جای آن از تگ div استفاده شود.
تگ article
این تگ هم مثل تگ section یک تگ جدید در html5 می باشد و می توان تگ article را نوعی تگ section به حساب آورد ولی از نظر کاربرد تگ article مستقل و دقیقتر نسبت به تگ section می باشد و معنی دقیقتری را منعکس می کند. ما تگ section را می توانیم نوعی article بلندتر و وسیعتر حساب کنیم.
نکته ای دیگری که تفاوت این دو تگ با هم است این می باشد که در داخل تگ article، تگ article دیگه ای نمیشه استفاده کرد ولی تگ های section, nav, aside را به همراه تگ header و footer را همانند تگ section می توان استفاده کرد
برای جا افتادن استفاده از این دو تگ فرض کنیم که ما یک صفحه از چندین قسمت مختلف ولی مرتبط با هم داشته باشیم آن ها را در یک Section قرار میدهیم(استفاده از تگ section) و هر کدام از قسمت ها را در یک article قرار میدهیم(استفاده از تگ article) و اگر قسمت های مختلفی در صفحه ما وجود داشت که با هم هیچ ارتباطی نداشتند از تگ div استفاده میکنیم که نسبت به دو تگ قبلی بازه بزرگتری را پوشش میدهد.
در این قسمت چند نمونه مثال قرار میدهیم که نحوه استفاده را نمایش میدهد
اولین مثال برای استفاده یک تگ article ساده می باشد که برای قسمت مقالات یک وبلاگ می تواند به کار برده شود.
[PHPS]
<article>
<h1>Title</h1>
<p>Content…</p>
</article>
[/PHPS]
مثال بعدی برای یک مقاله بزرگ وبا قسمت های مختلف که در یک وبلاگ امکان دارد استفاده بشود
[PHPS]
<article>
<h1>Title</h1>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
<section>
<h2>Section title</h2>
<p>Content</p>
</section>
</article>
[/PHPS]
و مثال بعدی برای صفحه اصلی یک وبلاگ می باشد
[PHPS]
<header id="page-header">
<h1>Site title</h1>
<form>Search</form>
<nav class="site-nav">
<ul>Site navigation</ul>
</nav>
</header>
<sectionid="main-content">
<article>
<h1>Article title</h1>
<p>Summary</p>
</article>
<article>
<h1>Article title</h1>
<p>Summary</p>
</article>
<article>
<h1>Article title</h1>
<p>Summary</p>
</article>
</section>
<aside class="sidebar">
<section>
<h2>Blogroll…</h2>
</section>
<section>
<h2>Photos…</h2>
</section>
</aside>
<footer id="page-footer">
<h2>Footer</h2>
</footer>
[/PHPS]
------------------------------------------
موفق باشید
