تگ 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 پی استور با تگ </h1>

<h2>h2 پی استور با تگ </h2>

<h3>h3 پی استور با تگ </h3>

<h4>h4 پی استور با تگ </h4>

<h5>h5 پی استور با تگ </h5>

<h6>h6 پی استور با تگ </h6>


<!-- heading tags  -->

نتیجه استفاده از این کد در نمایشگر چنین خواهد شد:

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

تگ h1 تا h6 در سئو

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

God Father

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

سرهنگ

شاید بپرسین که اگه تیترهای مهم دیگه‌ای در سراسر صفحه داشتم دربین تگ h1 تا h6، از کدوم تگ استفاده کنم؟ از تگ h2 استفاده کنین. هرچند اهمیت این تگ، از h1 کمتره اما برای تیترهای مهم‌ترِ متن، یک گزینه عالیه. اما برای تیترهای زیرِ تیتر ۲ از تگ 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: ۱.5em;
  margin-top: ۰.83em;
  margin-bottom: ۰.83em;
  margin-left: ۰;
  margin-right: ۰;
  font-weight: bold;
}

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

پاورپوینت معرفی زبان HTML — آشنایی با زبان رایج نشانه گذاری

کلیک کنید

استایل‌های پیش فرض تگ 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 از همه صفات عمومی و رویدادها پشتیبانی می‌کنند.

پاورپوینت زبان های برنامه نویسی، سیستم عامل ها و Data bases

پاورپوینت زبان های برنامه نویسی، سیستم عامل ها و Data bases

کلیک کنید

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

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

نام مرورگر
پشتیبانی می کند؟	بله	بله	بله	بله	بله