آموزش طراحی سایتآموزش HTML

تگ h1 تا h6 در HTML

آموزش طراحی سایت با HTML

با عرض سلام خدمت تمامی دنبال کنندگان مباحث طراحی سایت با HTML از سری آموزش‌های سایت میزفا ، در جلسه گذشته به معرفی تگ hr پرداختیم در این جلسه از آموزش HTML قصد داریم شما را با تگ h1 تا h6 در HTML که به منظور ایجاد سرتیتر یا عنوان در HTML به کار میروند، آشنا نماییم.

 معرفی تگ h1 تا h6

از تگ های h1 تا h6 برای ایجاد یک تیتر یا عنوان در HTML استفاده می‌شود، به این تگ‌ها ، تگ‌های heading گفته می‌شود و در دسته‌ی تگ ‌های قالب بندی متن جای می‌گیرند.
تگ های h1 تا h6 بر اساس درجه اهمیت در شش سایز (h1 , h2 , h3 , h4 , h5 , h6) استفاده می‌شوند و درجه اهمیت از h1 به h6 کاهش می‌یابد یعنی تگ h1 دارای بیشترین اهمیت و تگ h6 دارای کمترین اهمیت از دید موتورهای جست و جو است پس سعی کنید در استفاده از تگ ها در طراحی وبسایت خود نهایت دقت را داشته باشید.

برای درک بهتر کاربرد تگ های h1 تا h6 در طراحی سایت به مثال زیر توجه کنید :

<h1>
   Mizfa.com
</h1>
<h2>
   Mizfa.com
</h2>
<h3>
   Mizfa.com
</h3>
<h4>
   Mizfa.com
</h4>
<h5>
   Mizfa.com
</h5>
<h6>
   Mizfa.com
</h6>

تگ h1-تگ h6
نتیجه کد بالا

 

صفات تگ h1 تا h6

تگ های heading دارای صفت‌ھای class ،  id ، style ، title ، dir ، lang و align ھستند که در جدول زیر به بررسی صفت های تگ h1 تا h6 خواھیم پرداخت:

صفت ها مقدار توضیحات
align left
center
right
justify
این صفت در HTML5 پشتیبانی نمی‌شود .

صفت align نحوه چینش متن درون تگ h1 تا h6 را کنترل می‌کند و چهار مقدار left ، center ، right و justify را به عنوان مقدار می‌پذیرد .

  • left : متن داخل تگ‌های heading در سمت چپ صفحه قرار می‌دهد.
  • right : متن داخل تگ‌های heading در وسط صفحه قرار می‌دهد.
  • center : متن داخل تگ‌های heading را در سمت راست صفحه قرار می‌دهد.
  • justify : متن داخل تگ‌های heading را از ھر دو طرف تراز می‌کند.

بقیه صفت ھا نیز جزء صفات عمومی ھستند که قبلا آنھا را معرفی کرده ایم.

نقش واهمیت تگ h1 تا h6 در سئو سایت

توجه داشته باشید که تگ های h1 تا h6 در سئو و بهینه سازی سایت بسیار اهمیت دارند و برای فهماندن قسمت‌های مهم سایت به موتورهای جست و جو از این تگ‌ها استفاده می‌شود. برای آشنایی بیشتر با مباحث بهینه سازی و سئو پیشنهاد می‌کنم مقالات آموزشی سئو سایت میزفا را به هیچ عنوان از دست ندهید

نکات تکمیلی در مورد تگ h1 تا h6

  • تگ h1 تا h6 توسط تمامی مرورگرها پشتیبانی می‌شوند .
  • تمامی مرورگرها به صورت پیش فرض تگ های h1 تا h6 را به صورت درون خطی یا inline level نمایش می‌دهند .

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

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

‫16 نظرها

  1. سلام می خواستم بدونم چطور نمی تونم نام محصول در صفحات محصول رو تگ h1 تبدیل کنم
    در صفحه محصول نام رو که inspect می گیرم در .tpl محصولات که سرچ می کنم که پیداش کنم نیست که تگ h1 رو اضافه کنم.
    ممنون میشم راهنمایی کنین. ما در حال حاضر سایت پرستاشاپی داریم.

    1. سلام وقت بخیر. برای هر قالب و سایتی فرق داره و باید یک برنامه نویس بتونه این مورد رو برای شما پیاده سازی کنه.

  2. سلام ممنون از اینکه پاسخگو هستید .
    آدرس سایت softpluse.ir هستش.
    من توی صفحه اول سایت آدرس سایت رو بعنوان تگ h1 درج کردم . اما چند تا سوال و مشکل در این زمینه دارم .
    اول اینکه چه جوری میشه سایز این تگ h1 رو کوچک کرد چون اگه به آدرس سایت برید می بینید که نمایش این تگ نمود خوبی نداره .
    دوم اینکه توی صفحات دیگر سایت کهمطالب در اونها منتشر میشه هم این تگ و هم تگ عنوان مقاله بصورت h1 شناخته میشه . چه جور باید این مشکل رو حل کرد ؟

    1. سلام علی.
      درباره سوال اول که باید به دنبال آموزش CSS باشی تا بتونی تغییر بدی.
      سوال دوم هم ساده هست و شما در داخل متن از h1 استفاده نکن. به احتمال زیاد وقتی عنوان در وردپرس میزنی خودش تبدیل به H1 میشه.

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

    1. سلام علی. باید کدهای اون صفحه رو نگاه کنی و ببینی اگر h1 نداره اضافه کنی. درضمن ابزارهای انلاین سئو بدون مشکل نیستن. ادرس قسمتی که مشکل داره رو بفرس تا بهتر بتونم راهنمایی کنم.

  4. سلام و خسته نباشید
    داخل متن وقتی میخام h1 بزنم یاست میگه استفاده کردی و استفاده نکن فکر میکنم تایتل اصلی رو قالبم h1 میکنه
    از طرفی وقتی h1 نمیزنم سایت ماز میگه h1 نزدی
    کدوم یک از اینا درست میگن؟ ماز یا یاست؟

    1. سلام، وقتتون بخیر
      با توجه به فرمتی که وردپرس در ساختار خود دارد، تمامی تایتل ها در صفحه با تگ H1 معرفی می‌شوند.
      ممکن است که پوسته شما شخصی سازی شده باشد و تایتل در صفحه نمایش داده نشود یا با شخصی سازی از تگ های دیگری به جز تگ H1 برای معرفی تایتل استفاده کرده باشند.
      این موضوع را در پوسته خود بررسی کنید و اگر در صفحه نهایی شما تایتل با تگ H1 معرفی شده بود، افزونه Yoast درست بیان کرده است.‌(که در بیشتر مواقع درست است).
      اگر بر عکس این مورد بود Moz پاسخ درست را به شما داده است.
      از پیامتون متشکرم.

  5. سلام .ممنون از سایت خوبتون
    چطوری یک مطلب تلگرام رو بدون پیوندهاش میشه به دیگران ارسال کرد؟

    1. سلام. دامنه رو تقریبا ۱ ماه هست ثبت کردید. پیشنهاد میکنم به این زودی لینک سازی رو شروع نکنید.

    1. سلام، به اندازه تعداد مولکول‌های جهان ما مشکلات داریم، دقیق‌تر طرح مسئله کنید.

  6. سلام. من قواعد تگ ها رو رعایت میکنم. h1 h2 h3 و … اما موقع چکاپ سایت فقط میزنه شما از تگ ۲ استفاده کردین!. مشکل از کجاست چطور میشه رفعش کرد. ممنونم.

    1. سلام، لطفا آدرس سایت رو هم درج کنید تا بهتر بتونیم به شما کمک کنیم.

        1. من بررسی کردم، صفحه اول شما تگ h1 نداره ولی مقاله های شما ۲ تا داره، مثلا مقاله “توصیه‌های بعد از عمل بینی” یک بار خوده قالب اضافه کرده این تگ h1 رو و یک بار هم خوده شما در متن اضافه کردید و این موضوع در استانداردهای سئو جا نداره و باید حداکثر یک بار از تگ h1 استفاده کرده باشید. از طرفی موقع چک کردن سایت شما حتما فقط صفحه اصلی رو برای بررسی انتخاب میکنید و برای همین چون در صفحه اصلی از تگ h1 استفاده نشده پیغام میده و میگه استفاده نکردید.
          مثلا میتونید از صفحه اصلی اسم سایت رو به عنوان h1 قرار بدید. در بقیه صفحات بهتره عنوان مقاله h1 باشه.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر