تگ h1 تا h6 در HTML

ظتگ h1 تا h6 از سری آموزش html ، عنوان اصلی این جلسه ماست. در این مقاله نحوه نوشتن آنها، کاربرد و مکان جاگیری آنها توضیح داده خواهد شد. این تگ ها یکی از مهمترین المان های اچ تی ام ال به شمار میروند.

تگ h1 تا h6 آشنایی

تگ های H که به تگ heading نیز مشهور هستند، برای ایجاد عنوان یا تیتر های صفحه استفاده میشن. آقای جان مولر، یکی از مدیران آنالیز وبمستر های گوگل، در اهمیت استفاده از تگ های h1 تا h6 میگن:

  از تگ های H برای درک بهتر ساختار متن در یک صفحه استفاده می کنیم. 

در تکمیل بیانات ایشون باید بگم که تگ h1 مهمترین تگ از تگ های H و تگ h6 کم اهمیت ترین تگ H است. اگه بخوام یه مثال خوب بزنم، یه پادگان رو در نظر بگیرین. عناوین اونجا با ترتیب امیر، سرهنگ، سرگرد، سروان و …  اهمیت بندی شده. در دنیای HTML هم، تگ h1 همان امیر یا سرتیپ پادگانه و تگ h6 به اهمیت یک استوار در پادگانه. هرچند تگ h6 کم اهمیت ترین عضو گروه تگ H است اما بازم یه تگ h محسوب میشه و اهمیتش از یه متن معمولی یا یک پاراگراف بیشتره.

تگ h1 تا h6 کجا نوشته میشن؟

تگ های heading  باید داخل تگ body نوشته شوند. در فیلم آموزش HTML ، شما می تونید کاربرد عملی اونها رو تماشا کنین.

تگ h1 تا h6 در نمایشگر

 <!-- heading tags  -->


    <h1>h1 من HTML را دوست دارم </h1>

    <h2>h2 من HTML را دوست دارم </h2>

    <h3>h3 من HTML را دوست دارم </h3>

    <h4>h4 من HTML را دوست دارم </h4>

    <h5>h5 من HTML را دوست دارم </h5>

    <h6>h6 من HTML را دوست دارم </h6>


    <!-- heading tags  -->

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

تگ h1 تا h6 در سئو

تگ های heading در سئو از اهمیت ویژه ای برخوردارن. همانطور که حدس میزنین، باید شماره اول اونا، مهمترینشون باشه و شماره آخرشون کم اهمیت ترین. بله، h1 مهمترین تگ heading در سئو و تگ h6 کم اهمیت ترین آنهاست. دقیقا به همین خاطره که شما باید برای تیتر یا عنوان اصلی صفحه تون از تگh1 استفاده کنین و در ادامه مطلب و صفحه برای زیر تیتر های بزرگ از تگ h2 و الی ماشالله …

God Father

تگ h1 نقش پدرخونده رو در عنوان های صفحات اچ تی ام ال داره. یکی از مهمترین نکات آموزش html یادگیری استفاده صحیح از این تگه. این تگ رو همیشه برای اصلی ترین تیتر صفحه (نه کل سایت) استفاده کنین. هر چند به نظر بعضیا اهمیت این المان در سئو کم رنگ تر شده اما در عمل، گوگل به نحوه استفاده صحیح از اون اهمیت میده. نکته مهم دیگه ای که باید همیشه در نظر داشته باشین اینه که از این تگ تنها یک بار باید استفاده کنین وگرنه رتبه صفحه تون پایین میاد.

سرهنگ

شاید بپرسین که اگه تیتر های مهم دیگه ای در سراسر صفحه داشتم دربین تگ h1 تا h6، از کدوم تگ استفاده کنم؟ از تگ h2 استفاده کنین. هرچند اهمیت این تگ، از h1 کمتره اما برای تیترهای مهمترِ متن، یک گزینه عالیه. اما برای تیترهای زیرِ تیتر 2 از تگ h3 استفاده می کنن و این سلسله مراتب رو تا آخر ادامه بدین.

<!-- heading tags  -->


    <h1>آموزش برنامه نویسی </h1>


    <h2>HTML آموزش</h2>

        <h3>آموزش تگ لینک</h3>

            <h4>انواع لینک دهی</h4>

    <h2>PHP آموزش</h5>

        <h3>PHPآموزش توابع در </h3>


    <!-- heading tags  --> 

احتمالا در تکه کد بالا متوجه عرائضم شده اید ولی شاید بهتر باشه یکم توضیح بدم. فرض می کنیم شما صفحه ای دارید که در اون، به آموزش برنامه نویسی می پردازین. پس تیتر اصلی صفحه “آموزش برنامه نویسی” است. اما خود آموزش برنامه نویسی به دو شاخه “آموزش html” و “آموزش php” تقسیم میشه که هر کدوم از اونا هم دوباره زیر بخش دارن. و به این ترتیب باید در استفاده از تگ های h1 تا h6 وسواس به خرج بدین.

استایل های پیش فرض برای تگ های H

استایل های پیش فرض تگ h1

اکثر مرورگر ها تگ h1 رو با این استایل ها نشان می دهند:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

به اندازه فونت این تگ که برابر 2em است توجه کنین.

استایل های پیش فرض تگ h2

اکثر مرورگر ها تگ h2 رو با این استایل ها نشان می دهند:

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

توجه کنین که سایز فونت تگ h2 به اندازه 0.5em از تگ قبلی کوچیکتره.

استایل های پیش فرض تگ h3

اکثر مرورگر ها تگ h3 رو با این استایل ها نشان می دهند:

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

مشاهده می کنین که اندازه فونت داره به تدریج کمتر میشه.

استایل های پیش فرض تگ h4

اکثر مرورگر ها تگ h4 رو با این استایل ها نشان می دهند:

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

استایل های پیش فرض تگ h5

اکثر مرورگر ها تگ h5 رو با این استایل ها نشان می دهند:

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

استایل های پیش فرض تگ h6

اکثر مرورگر ها تگ h6 رو با این استایل ها نشان می دهند:

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

پشتیبانی تگ های H

تگ h1 تا h6 از همه صفات عمومی و رویداد ها پشتیبانی می کنند.

پشتیبانی مرورگر ها از تگ های H

همه مرورگر ها از تگ های heading پشتیبانی کامل می کنند.

آموزش از سایت آموزش amp