استفاده مناسب از تگهای Heading

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت


امیر سروری 15 دیدگاه HTML , استاندارد وب سایت , اصول طراحی وب سایت Sunday, 14th August , 2011 31489 بازدید

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت

بسیاری از طراحان وب سایت بر این عقیده هستند که کسب کردن استانداردهای طراحی وب سایت در استاندارد بودن کدهای HTML است وValidate بودن کدهای HTML به تنهایی نشان دهنده استاندارد بودن وب سایت طراحی شده توسط آنهاست . اما باید بدانید این تازه اول راه است !?

همه طراحان وب سایت از اهمیت تگهای Heading در بهینه سازی وب سایت برای موتورهای جستجو آشنا هستند اما آیا کاربرد این تگها فقط در بهینه سازی وب سایت خلاصه شده است ؟ آیا از ابتدا این تگها فقط برای بهینه سازی وب سایت طراحی شده اند ؟

مفهوم و اهمیت استفاده از تگهای Heading که شامل تگهای h1,h2,h3,h4,h5,h6 می شود و به ترتیب از درجه اهمیت بیشتر به کمتر می رسند چیزی فراتر از استفاده آنها فقط برای بهینه سازی وب سایت است .

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

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

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

Heading-tag-webtarget.ir

Heading-tag-webtarget.ir

با توجه به نمودارها درک این قضیه بسیار ساده تر خواهد شد . نمودار درختی نشان دهنده درجه اهمیت هر یک از تگهای h1,h2,h3,h4,h5,h6 را مشخص نموده است و در نمودار و شکل دوم یک تقسیم بندی فرضی از یک صفحه وب سایت بر اساس درجه اهمیت مطالب و استفاده از تگهای Heading مشخص شده است .

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

از انجام اشتباهات زیر در استفاده از تگهای Heading اجتناب کنید

با ورود CSS به دنیای طراحی وب سایت قدرت طراحان وب سایت در تغییر تگها به شکلهای متفاوت بیشتر شده است . این نکته را به خاطر داشته باشد که این تغییرات همیشه هم خوب نیستند . به طور مثال استفاده از یک تگ p به جای یک سرفصل یا تگ Heading اصلا توصیه نمی شود . این مشکل در زمانی نمود پیدا خواهد کرد که کد های CSS در وب سایت شما به هر دلیلی اعمال نشوند . در اینصورت خواننده و مخاطب نمیتواند محتوای وب سایت شما را از نظر درجه اهمیت دسته بندی نماید و سرفصل ها مشخص نخواهند بود . ( به طور مثال در فید و یا مرورگرهای متنی و در مواردی ایمیل )

دلیل دیگر نیز اهمیت تگهای Heading برای موتورهای جستجو است که دیگر همگی با این موضوع آشنا هستیم و از اهمیت این تگها برای موتورهای جستجو با خبریم . یک تگ p تغییر شکل یافته نمیتواند نقش یک تگ Heading را برای موتورهای جستجو داشته باشد .

ساختار نا مناسب و غیر آبشاری در رعایت درجه اهمیت تگهای Heading و محتوای وب سایت علاوه بر گیج کننده بودن برای مخاطب میتواند موتورهای جستجو را نیز گیج کند و این باعث خواهد شد که مهمترین مطالب وب سایت شما مورد توجه یک موتور جستجو قرار نگیرد و یا یک موضوع با درجه اهمیت کمتر برای شما به طور اشتباه برای یک موتور جستجو دارای درجه اهمیت بیشتری گردد .

استفاده بیش از حد و غیر استاندارد نیز میتواند باعث گیج کننده شدن محتوا برای مخاطبان گردد و همچنین باعث جریمه شدن وب سایت شما برای موتورهای جستجو .سعی کنید از اندازه های استاندارد تعریف شده برای این تگها به صورت استاندارد استفاده کنید . به این معنا که تگ h1 از نظر اندازه و رنگ باید بزرگ ترین و پررنگ ترین باشد و این درجه به ترتیب تا تگ h6 ادامه یابد . یکسان نمودن تگهای Heading از نظر اندازه و گاهی رنگ و فونت می تواند برای مخاطبان شما گیج کننده باشد . این اندازه و درجه اهمیت باید به صورت یکسان در وب سایت اعمال شود .

توصیه میکنم یک بار دیگر پس از خواندن این مطلب محتوای وب سایت خود را از نظر ساختار و درجه اهمیت بررسی کنید .



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


15 دیدگاه برای این نوشته ثبت شده است


  1. علی
    16 August 2011

    سلام .
    من مدرس و طراح وب سایت هستم
    خیلی خیلی وب سایت عالی و مفیدی دارید ممنونم از زحماتتون




  2. میلاد
    11 September 2011

    مرسی خیلی عالیه کلی مطلب مفید بدرد بخور یاد میگیریم.




  3. kourosh
    19 September 2011

    بسیار عالی بود مطلبتون ، فقط یه سوال ، تا چه حد میشه تگ های h رو با css تغییر داد . تغییر اندازه فونت ، رنگ و نحوه نمایششون . یا اگر هم بخوایم توی html لینکشون کنیم به جایی . این کار ها باعث نمیشه که از اهمیتشون برای search engine ها کم بشه ؟




    • امیر سروری
      19 September 2011

      kourosh @ سلام و ممنون . شما میتونید هر تغییری رو روی تگ h اعمال کنید اما دو نکته هست .

      نکته اول اینکه : تغییر بیش از اندازه تگ باعث میشه هنگامی که به هر دلیلی استایل ها لود نمیشن توی صفحه شما ( مثل فید ) صفحه شما به هم بریزه پس بهتره از استایل های خود تگ h با کمی تغییر در رنگ و یا اندازه استفاده کنید .
      نکته دوم اینکه : برای لینک کردن این نکته رو در نظر داشته باشید که هیچ تگی داخل تگ a نباید قرار بگیره به استثنای تگ img . بنابراین باید تگ a رو داخل تگ h قرار بدید تا مشکلی پیش نیاد .




  4. kourosh
    24 September 2011

    ممنون از راهنمایی تون ;)




  5. محمد مردانی
    20 November 2011

    خیلی ممنون




  6. پدرام
    19 March 2013

    یک سوال: اگر کل هدر یک سایت رو بشکل عکس در نظر گرفته باشیم، می تونیم از تگ h1 برای بهتر شدن نتایج موتورهاب جستجو استفاده کرد و حالت display: hidden رو براش بکار ببریم تا این تگ به نمایش در نیاد و فقط در موتور جستجو کارش رو انجام بده؟




  7. شهره
    5 August 2013

    ممنون بابت مطالب مفیدی که ارايه میدید.




  8. hadi066
    22 March 2014

    سلام سایت بسیار خوبی دارید مخصوصا بخش روانشناسی رنگها که هم نو و هم بسیار کاربردی است بسیار متشکرم




  9. پویا
    8 March 2015

    با تشکر از مطالب مفیدتون.
    اگر امکان داره توضیح بدید که داخل تگ هدینگ آیا محدودیت تعداد کاراکتر ها وجود دارد؟
    به عنوان مثال برای قراردادن کلمات کلیدی داخل تگ هدینگ محدودیت تعدادی داریم یا خیر؟




  10. Pessarak
    24 March 2015

    ممنون از زحمت هاتون میشه لطفا این اموزش ها فایل pdf شونم بزارین.!!!!




  11. افشین
    26 March 2016

    پست بسیار مفیدی بود

    من در استفاده از تگ ها دو مشکل دارم: یکی اینکه اگر بخوام عنوانی رو در متن تگ بدم کل اون پاراگراف تگ دار میشه (یا بهتره بگم بزرگ می شه) و یکی اینکه فونت تگ ها ظاهر بسیار نامناسبی دارن. ایا اگر تگ رو اختصاص بدم و بعد فونت رو کوچیک کنم مانند بقیه کلمات، ازش تگ از بین نمیره و همون کارایی رو خواهد داشت؟




  12. امیر
    28 April 2016

    ممنون مقاله مفیدی بود




  13. سمانه
    11 July 2017

    تگ h1 کجا گذاشته میشه



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

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

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.