تگ های جدید گروه بندی عناصر در HTML5

در ادامه سلسله مقالات آموزش HTML,CSS در این جلسه به بررسی تگ های کنترلی در html5 خواهیم پرداخت.

همانطور که در مقاله آشنایی با تگ های span,div مطالعه کردید به منظور گروه بندی عناصر موجود در صفحه از این دو تگ استفاده می شد،تگ div به منظور گروه بندی تگ های بلاکی و تگ span به منظور گروه بندی تگ های inline استفاده می شدند،اما در html5 تگ های کنترلی جدیدی معرفی شده اند که از این تگ ها جهت کنترل و گروه بندی کردن بعضی از تگ ها بدون نیاز به استفاده از تگ های div و span استفاده می کنند.

<figure> و <figcaption>

همانطور که می دانید یکی از مهمترین عناصری که در هر صفحه وبی وجود دارد،تصاویر می باشند،اضافه کردن تصاویر به صفحات وب با استفاده از تگ img صورت می گیرد،از طرفی هر تصویری یک توضیح خاصی را نیز به همراه دارد (منظور صفت title و alt است) اما این توضیحات در حالت عادی به کاربر نمایش داده نمی شوند ولی بعضی مواقع نیاز است توضیح تصویر در کنار آن تصویر باشد (مانند اسلایدر ها که همراه تصویر توضیح مورد نظرش نیز در کنارش قرار می گیرد).

در HTML5 به منظور بهینه سازی کدها،برای ایجاد چنین حالت هایی دو تگ figure,figurecaption را معرفی کرد که به کمک انها می توانیم یک تصویر را به همراه توضیحاتش در صفحه وب نمایش دهیم،پیش از این برای ایجاد چنین حالتی مجبور بودیم از تگ div استفاده کنیم و تصاویر و توضیحات خود را داخل این تگ div قرار دهیم.به مثال زیر توجه کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>شرکت پیشگامان صفر و یک فرساد</title>
    <meta charset="utf-8">
</head>
<body>
	<figure>
		<img src="mysite/images/myImage.png" alt="">
		<figcaption>مقالات آموزش اچ تی ام ال و سی اس اس </figcaption>
	</figure>
</body>
</html>

خورجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:

البته این تگ فقط مخصوص تگ img نیست، برای سایر تگ ها که نیاز به توضیح دارند، و بایستی همراه با توضیحشان در یک تگ جهت کنترلشان قرار بگیرند ازتگ های figure و figcaption استفاده می کنیم،همچنین تگ figurecaotion را می توانیم اولین یا آخرین فرزند تگ figure قرار بدهیم به طور مثال:

<figure>
		<figcaption>HTML</figcaption>
		<p>Hypertext Markup Language</p>
</figure>

نکته دیگری که باید به آن توجه داشت این است که می توانید چندین تگ به همراه تگ figurecaption استفاده کنید.به مثال زیر توجه کنید.

<figure>
		<img src="mysite/images/myImage.png" alt=""/>
		<p>Hypertext Markup Language</p>
		<figcaption>مقالات آموزش اچ تی ام ال و سی اس اس </figcaption>
</figure>

<hgroup>

این تگ همانطور که از نامش پیداست به منظور گروه بندی تگ های heading (منظور تگ های h1 تا h6 است) استفاده می شود.به طور مثال :

<hgroup>
		<h1>pzof.ir</h1>
		<h2>طراحی و پیاده سازی پرتال های تحت وب </h2>
</hgroup>

نکته : توجه داشته باشید که این تگ "فقط" برای کنترل تگ های heading است، یعنی هیچی تگی غیر از شش تگ h1, h2 ,h3 ,h4 ,h5 ,h6 نمی تواند درون این تگ قرار بگیرد و اگر تگ دیگری غیر از شش تگ فوق را داخل تگ heading قرار دهید اشتباه است.

مهمترین کاربرد تگ heading در در تگ header و برای ایجاد لوگو و توضیح سایت می باشد اما استفاده آن در سایر بخش های صفحه وب نیز مشکلی ندارد.

<details>

این تگ همانطور که از نامش پیداست به منظور ایجاد توضیحات بیشتر،یا ارائه جزیئات بیشتری از یک مطلب استفاده می شود،به عنوان مثال فرض کنید مقاله ای را در سایت خود قرار داده اید،به منظور معرفی رفرنس مقاله خود به کاربران می توانید از این تگ استفاده کنید. درون تگ details از تگ دیگری با نام summary استفاده می شود که حاوی توضیح اصلی (عنوان توضیحات) خواهد بود.

این تگ یک حالت collapsible برای محتوای داخل خود ایجاد می کند یعنی ابتدا فقط محتوای داخل تگ summary نمایش داده می شود و با کلیک بر روی این محتوا،سایر محتوای تگ details نیز نمایش داده خواهد شد.به مثال زیر توجه کنید:

<!doctype html>
<html lang="en">
<head>
    <title>شرکت پیشگامان صفر و یک فرساد</title>
    <meta charset="utf-8">
</head>
<body dir="rtl">
	<p>نرم افزار،عنصر کلیدی در تکامل محصولات و سیستم های کامپیوتری و یکی از مهمترین فن اوری های در دنیا به شمار می رود.
		<details>
			<summary>مهندسی نرم افزار - ترجمه : عین الله جعفرنژاد قمی</summary>
			ویرایش هفتم،فصل اول صفحه 37
		</details>
	</p>
</body>
</html>

خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:

با کلیک بر روی "مهندسی نرم افزار – ترجمه : عین الله جعفرنژاد قمی" سایر اطلاعات موجود در تگ details،toggle خواهند شد.(یعنی اگر اطلاعات در حالت نمایش باشند،جمع خواهند شد و بالعکس)

نکته : البته همه مرورگرها از این تگ به خوبی پشتیبانی نمی کنند.برای مشاهده لیست مرورگرهایی که از این تگ پشتیبانی می کنند به این لینک مراجعه کنید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد،با ادامه مقالات آموزش HTML,CSS با ما همراه باشید.

کامنت جدید ...