جلسه چهارم: تگ‌های هدینگ در HTML | کامل‌ترین آموزش دنیا

آموزش‌ها آموزش طراحی سایت فرانت‌اند آموزش HTML
بروزرسانی شده در 18 تیر 1404

به جلسه چهارم دوره آموزش HTML تو آوای وب خوش اومدی! جایی که قراره تگ‌های هدینگ رو مثل یه حرفه‌ای بترکونی! تو جلسه سوم دست به کد شدی و تگ‌های پایه مثل <head>، <html> و <body> رو شناختی. حالا وقتشه با تگ‌های هدینگ (<h1> تا <h6>) صفحه‌اتو به یه اثر هنری تبدیل کنی! این تگ‌ها فقط تیتر نیستن یه ابزار جادویی‌ان برای ساختار، سئو، و خوانایی. تو این مقاله، از صفر تا صد تگ‌های هدینگ رو با مثال‌های عملی، نکات سئو، و پروژه‌های خفن یاد می‌گیری. آماده‌ای؟ بزن بریم!

آنچه در این مقاله می‌خوانید :

💡 تگ‌های هدینگ در HTML

تگ‌های هدینگ (Heading Tags) تو HTML، یعنی <h1> تا <h6>، مثل تیترهای یه کتاب یا سرتیترهای یه روزنامه‌ان که بهت می‌گن هر بخش از صفحه درباره چیه. <h1> غول تیترهاست بزرگ، مهم، و پرقدرت. بعدش <h2> تا <h6> ریزتر می‌شن و زیرمجموعه‌ها رو نشون می‌دن. اینا فقط برای قشنگ کردن نیستن یه ماموریت بزرگ دارن:

ساختار مرتب: صفحه‌اتو مثل یه نقشه راهنما می‌کنن تا کاربرا گم نشن.
سئو خفن: گوگل ازشون می‌فهمه موضوع صفحه‌ات چیه و بهت رتبه بهتری می‌ده.
چشم‌نوازی: متنای بلند رو تکه‌تکه می‌کنن تا کاربرا با لذت بخونن.

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

🏷️ معرفی تگ‌های هدینگ: از `<h1>` تا `<h6>`

تگ‌های هدینگ ۶ تا سطح دارن، مثل یه خانواده منظم که هر کدوم یه کار خاص می‌کنن:

<!DOCTYPE html>
    <html lang="fa">
    <head>
    <title>تگ‌های هدینگ</title>
    </head>
    <body>
        <h1> h1 تگ </h1>
        <h2> h2 تگ </h2>
        <h3> h3 تگ </h3>
        <h4> h4 تگ </h4>
        <h2> h5 تگ </h2>  
        <h3> h6 تگ </h3>
    </body>
    </html>

<h1>: پادشاه تگ‌هاست فقط یه بار تو هر صفحه میاد و موضوع اصلی رو فریاد می‌زنه. مثلاً: «آموزش کامل تگ‌های html».
<h2>: دستیار پادشاهه بخش‌های مهم صفحه رو نشون می‌ده، مثل تیترهای فرعی.
<h3>: یه پله پایین‌تره برای زیربخش‌های <h2> عالیه.
<h4>، <h5>، <h6>: ریزتر و جزئی‌ترن برای زیرمجموعه‌های کوچیک‌تر یا نکات ریز.

فکر کن داری یه مقاله می‌نویسی: <h1> عنوان کل مقاله‌ست، <h2> بخش‌هاشن، <h3> زیربخش‌ها، و <h4> تا <h6> جزئیات ریزتر. اینجوری همه‌چیز مثل یه پازل قشنگ سر جاش می‌شینه!

👀 یه مثال ساده برای شروع

بیا یه کد ببینیم که این تگ‌ها چطور کار می‌کنن:

<h1>HTML بهترین آموزش</h1>

<h2>تگ‌های پایه</h2>

<h3>تگ‌های هدینگ</h3>

<h2>HTML سئو و</h2>

اینو تو مرورگر باز کن می‌بینی هر تگ یه اندازه و اهمیت خاص داره. <h1> بزرگ و غرنده‌ست، <h2> یه کم آروم‌تره، و <h3> جزئی‌تر.

📈 تاثیر تگ‌های هدینگ تو سئو: کلید طلایی گوگل

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

<h1> و کلمه کلیدی: تگ <h1> مثل یه تابلوی نئونی تو خیابونه به گوگل می‌گه موضوع اصلی صفحه‌ات چیه. مثلاً اگه می‌خوای با «تگ‌های هدینگ HTML» رتبه بیاری، حتماً تو <h1> بذارش!
سلسله‌مراتب: وقتی <h2> و <h3> رو منظم استفاده می‌کنی، گوگل می‌فهمه صفحه‌ات مثل یه کتاب مرتب و ارزشمنده این یعنی امتیاز بیشتر!
تجربه کاربر (UX): هدینگ‌ها متن رو تکه‌تکه می‌کنن و کاربرا رو نگه می‌دارن گوگل اینو می‌بینه و بهت جایزه می‌ده.
نمایش تو نتایج گوگل: گاهی تیترای <h2> و <h3> تو پیش‌نمایش گوگل نشون داده می‌شن این یعنی کلیک بیشتر!

📌 نکات سئو با تگ‌های هدینگ: حرفه‌ای عمل کن

برای اینکه تو سئو بترکونی، این نکات رو یادت باشه:

فقط یه <h1> تو هر صفحه بذار مثل یه پادشاه، بیشتر از یکی قاطی‌پاطی می‌کنه!
کلمه کلیدی اصلیتو تو <h1> و کلمات مرتبط رو تو <h2> و <h3> پخش کن ولی طبیعی باشه، نه زوری!
از <h2> تا <h6> مثل پله‌ها برو از <h1> نپر به <h4>، گوگل گیج می‌شه!
تیتراتو کوتاه و جذاب نگه دار حدود 60 کاراکتر بهترینه.

🧪 پروژه عملی: یه صفحه مرتب با تگ‌های هدینگ بساز

بیا دست به کار شیم و با این تگ‌ها یه صفحه خفن بسازیم:

فایل headings.html رو بساز.

این کد رو بنویس:

<!DOCTYPE html>
    <html lang="fa">
    <head>
    <title>وبلاگ من: تگ‌های هدینگ</title>
    </head>
    <body>
        <h1>چرا تگ‌های هدینگ مهم‌ان؟</h1>
        <h2>تگ‌های هدینگ چیه؟</h2>
        <h3>کاربردشون</h3>
        <h4>یه نکته ریز</h4>
        <h2>سئو با هدینگ‌ها</h2>  
        <h3>چطور کار می‌کنه؟</h3>
    </body>
    </html>

🏁 جمع‌بندی: تگ‌های هدینگ، کلید موفقیت تو وب

تو این جلسه، تگ‌های هدینگ در HTML رو از صفر تا صد یاد گرفتی از کاربردشون تو ساختار و سئو گرفته تا پروژه‌های عملی و نکات حرفه‌ای. حالا که این ابزار خفن رو داری، برو به جلسه پنجم: تگ‌های پیشرفته‌تر و وب رو عمیق‌تر بترکون. با آوای وب، هر قدم یه پله‌ست به سمت بهترین شدن ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

💬 مخترع وب بعدی تویی؟ بیا ایده‌هات رو فریاد بزن!

نظرت درباره این مقاله چیه؟ دوست داری چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنته؟ تو نظرات برامون بنویس! تیم حرفه‌ای پشتیبانی آوای وب با جون و دل منتظرته!

شهرام نجفی

همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.