جلسه ی هفتم : Heading ها

headingهمانطور که در جلسات پیش گفتیم کد هایی که در میان تگ body قرار می گیرند قسمت قابل مشاهده ی سایت می باشند . ( یعنی هر کدی در این قسمت بنویسیم خروجی آن را در وب سایت مشاهده خواهیم نمود ) Heading  ها از این دسته کد ها می باشند . ( برای مشاهده ی آموزش Html به زبان ساده کلیک کنید )

 

Heading چیست ؟

Heading به معنای عنوان می باشد .هدینگ ها برای مشخص کردن عناوین و سرفصل ها استفاده می‌ شوند ، برای استفاده از هدینگ ها کافیست شما متن مورد نظر خود را درون تگ هدینگ قرار دهید .

هدینگ ها عموما دارای ۶ حالت می باشند که بزرگترین حالت آن <h1></h1> و کوچک ترین حالت آن <h6></h6> می باشد .

حال شاید با خود فکر کنید که چرا ما از این تگ ها استفاده می کنیم . این تگ ها فقط برای بزرگ یا کوچک نمودن متن نمی باشد در اصل از این تگ ها برای سئو ی سایت استفاده می کنیم .

نکته : سئو مخفف کلمه ی Search Engine Optimization می باشد که کاربرد آن بهینه سازی سایت می باشد که بهینه سازی سایت باعث افزایش تعداد ورود کاربران از گوگل می باشد . ( در آینده توضیح کامل خواهیم داد )

Heading 1

تگ h1 عنوان یا همان سرفصل وب سایت ما می باشد در نسخه ی قبلی HTML ( یعنی HTML 4.0 )  ما فقط می توانستیم از یک تگ h1 در هر صفحه از سایت استفاده نماییم اما در نسخه ی فعلی HTML ( یعنی HTML 5 ) به علت وجود تگ های جدید برای بخش بندی سایت می توانیم از چندین تگ h1 استفاده نماییم .

متن بالا به معنی نیست که ما می توانیم در یک پست از چند تگ h1 بلکه به این معنی می باشد که در هر پست می توانیم فقط از یک تگ h1 استفاده کنیم اما در کنار هم بودن این پست ها در یک صفحه مشکلی ندارد .

نحوه ی استفاده : برای استفاده از این ویژگی کافیست متن مورد نظر را داخل تگ h1 قرار می دهیم . به نمونه کد زیر توجه کنید :

<h1>متن مورد نظر</h1>

Heading 2

از تگ h2 برای عنوان دادن به بخش های مختلف تگ h1 استفاده می شود ، یعنی تگ های h2 بخش های اصلی تگ h1 می باشد . برای درک بهتر این موضوع بگذارید آن را در قالب یک مثال بیان کنیم . یک کتاب را فرض نمایید ، نام این کتاب تگ h1 ما می باشد و عنوان نوشته های آن تگ h2 می باشد . به نمونه کد زیر توجه کنید :

<h2>متن مورد نظر</h2>

تاثیر تگ h2 بر سایت

فرض کنید یک کتاب با هزار صفحه نوشته اما بدون حتی یک عنوان برای این نوشته ها چاپ شده است . مشخصا این کتاب جذابیتی برای خواندن ندارد و مخاطب از خواندن آن صرف نظر می کند . در صورت عدم استفاده از تگ h2 دقیقا همین مشکل برای سایت ما پیش می آید ، یعنی مخاطبان علاقه ای به خواندن مطالب سایت ما ندارند .

تگ h2 نیز مانند تگ h1 دارای محدودیت می باشد پس بهتر است که در استفاده از تگ h2 زیاده روی نکنیم ( شورشو در نیارید چون گوگل شوروشو در میاره ☺ ) چون تاثیر منفی بر روی سایت شما دارد ، البته بسته به میزان نوشته ی شما می شود از تعداد بیشتری تگ h2 استفاده نمود .

نکته: نهایتا از چهار تگ h2 می توان استفاده کرد.

Heading 3

تگ h3 برای تگ h2 همانند تگ h2 برای تگ h1 می باشد .(خودم میدونم بد گفتم 😐 ) از تگ h2 برای عنوان دادن به بخش های مختلف تگ h1 استفاده می شود ، یعنی تگ h3 داخل تگ h2 قرار می گیرد و به دسته بندی داخل تگ h2 کمک می کند . به نمونه کد زیر توجه کنید :

<h3>متن مورد نظر</h3>

چگونه از تگ h3 بهره ببریم ؟

به مثال کتاب بر می گردیم فرض کنید عنوان این کتاب طراحی سایت می باشد ( h1 ) و عنوان مقاله ای که نیاز دارید درون تگ head می باشد ( h2 ) ولی شما فقط به تگ meta در این مقاله نیاز دارید در اینجا ما از تگ h3 برای راحتی کاربران استفاده می کنیم ، تا افراد بتوانند به راحتی به مبحث مورد نطر خود دسترسی داشته باشند و برای خواندن قسمتی از مطلب مجبور نباشند تمام متن را بخوانند .

به طور کلی نحوه ی استفاده از این تگ های بالا به شیوه ی زیر می باشد .

نحوه ی استفاده از heading

 Heading 4

از تگ h4 برای عنوان دادن به بخش های مختلف تگ h3 استفاده می شود ( 😐 ) اما معمولا ما از تگ h4 استفاده نمی کنیم . برای استفاده از این تگ ما باید یک متن بسیار بلند ( برای مثال حداقل هزار کلمه ) با عنوان های تو در تو نیاز داریم تا بتوانیم از این تگ استفاده نماییم . به نمونه کد زیر توجه کنید :

<h4>متن مورد نظر</h4>

Heading 5 و Heading 6

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

تگ های h5 و h6 کاربرد بسیار کمی دارند ( یجورایی اصن به کارتون نمیان 😐 ) و خیلی کم پیش می آید که یک مطلب به عنوان های h5 و h6 نیاز داشته باشد . عموما یه این تگ ها تگ های مرده می گویند زیرا از آن ها استفاده ای نمی شود . به نمونه کد زیر توجه کنید :

<h5>متن مورد نظر</h5>
<h6>متن مورد نظر</h6>

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

ایجاد پاراگراف را در مطالب دیگر آموزش خواهیم داد .

خب دوستان لطفا به نمونه کد زیر توجه کنید :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

خروجی این کد :

نمایش heading ها در کد

خلاصه مطلب :

  1. از تگ Heading برای مشخص کردن عنوان های صفحه استفاده می شود .
  2. از تگ h1 برای عنوان اصلی مطلب یا وب سایت ما استفاده می شود .
  3. به ترتیب تگ های h2 ، h3 و h4 زیر مجموعه ی یکدیگر می باشند و از آن ها برای دسته بندی یک مطلب استفاده می شوند .
  4. تمامی تگ ها زیر مجموعه ی تگ h1 می باشند .
  5. به تگ های h5 و h6 تگ مرده می گویند .

 

سخن نویسنده : این آموزش حدود ۱۰۰۰ کلمه می باشد ولی از تگ های h4 ، h5 و h6 در آن استفاده نشده است یعنی شما می توانید یک مقاله ی بلند داشته باشید اما از تگ های بالا در آن استفاده نکنید زیرا نیازی به آن ها نیست .

ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها