بسیاری از طراحان وب سایت بر این عقیده هستند که کسب کردن استانداردهای طراحی وب سایت در استاندارد بودن کدهای HTML است وValidate بودن کدهای HTML به تنهایی نشان دهنده استاندارد بودن وب سایت طراحی شده توسط آنهاست . اما باید بدانید این تازه اول راه است !?
همه طراحان وب سایت از اهمیت تگهای Heading در بهینه سازی وب سایت برای موتورهای جستجو آشنا هستند اما آیا کاربرد این تگها فقط در بهینه سازی وب سایت خلاصه شده است ؟ آیا از ابتدا این تگها فقط برای بهینه سازی وب سایت طراحی شده اند ؟
مفهوم و اهمیت استفاده از تگهای Heading که شامل تگهای h1,h2,h3,h4,h5,h6 می شود و به ترتیب از درجه اهمیت بیشتر به کمتر می رسند چیزی فراتر از استفاده آنها فقط برای بهینه سازی وب سایت است .
هر صفحه از وب سایت میتواند یک ساختار و چهارچوب فرضی بر اساس درجه اهمیت مطالب داشته باشد که تگهای Heading می توانند در ایجاد این ساختار در هر صفحه وب سایت نقش اصلی را داشته باشند . اهمیت استفاده از تگهای Heading بیشتر در صفحات ساخته شده بر اساس محتوای متنی پر رنگ تر خواهد بود .
نمونه ای بسیار مناسب از چینش صفحات با محتوای متنی را میتوان در روزنامه ها و مجلات مشاهده نمود . استفاده مناسب از سر فصل ها و چینش مناسب ستون ها میتواند بیننده و مخاطب را نسبت به درجه اهمیت مطالب آگاه سازد و مخاطب به صورت ناخودآگاه یک ساختار از درجه اهمیت مطالب را در ذهن خود ایجاد نماید . برای شما پیش آمده است که در برخورد با یک صفحه مبتنی بر متن و یا حتی یک روزنامه فقط سرفصل ها را خوانده باشید و یا قسمتهای را خوانده اید که با فونت متفاوت ( ضخامت و رنگ ) نوشته شده اند .
دسته بندی مطالب بر اسا اهمیت میتواند مخاطب را در بهتر خواندن مطالب و محتوای صفحه شما کمک کند و باز دید کننده وب سایت شما از خواندن این مطالب لذت ببرد . در مورد موقعیت عناصر در سند HTML و نمودار درختی در این نوع از سندها قبلا مطلبی نوشته شده است . اکنون به بررسی نمودار درختی تگهای Heading در یک صفحه از وب سایت می پردازیم .
با توجه به نمودارها درک این قضیه بسیار ساده تر خواهد شد . نمودار درختی نشان دهنده درجه اهمیت هر یک از تگهای h1,h2,h3,h4,h5,h6 را مشخص نموده است و در نمودار و شکل دوم یک تقسیم بندی فرضی از یک صفحه وب سایت بر اساس درجه اهمیت مطالب و استفاده از تگهای Heading مشخص شده است .
درجه اهمیت مطالب در یک صفحه را میتوان به صورت آبشاری در نظر گرفت . به این صورت که درجه مطالب از بالا به پایین تغییر میکنند و طبیعتا سر فصل ( h1 ) در ابتدای صفحه و مطالبی با درجه اهمیت کمتر که ممکن به یک ، دو و یا چند قسمت تقسیم بندی شده باشند در پایین سر فصل قرار می گیرند . به همین ترتیب مطالب با درجه اهمیت کمتر به صورت تو در تو و آبشاری در یک صفحه وب چیده خواهند شد . مطالب می توانند از درجه اهمیت یکسانی برخوردار باشند و در اینجا در یک سطح ( با توجه به درخت ) قرار خواهند گرفت و در سر فصل آنها از تگهای heading یکسان و هم سطح استفاده خواهد شد . هر کدام از قسمتهای دارای درجه اهمیت یکسان نیز میتوانند به زیر مجموعه های متفاوتی تقسیم بندی شوند .به این نکته توجه داشته باشید که تگ h1 بهتر است فقط یک بار در صفحه وب سایت و به عنوان سر فصل کلی مطالب در آن صفحه مورد استفاده قرار گیرد .
از انجام اشتباهات زیر در استفاده از تگهای Heading اجتناب کنید
با ورود CSS به دنیای طراحی وب سایت قدرت طراحان وب سایت در تغییر تگها به شکلهای متفاوت بیشتر شده است . این نکته را به خاطر داشته باشد که این تغییرات همیشه هم خوب نیستند . به طور مثال استفاده از یک تگ p به جای یک سرفصل یا تگ Heading اصلا توصیه نمی شود . این مشکل در زمانی نمود پیدا خواهد کرد که کد های CSS در وب سایت شما به هر دلیلی اعمال نشوند . در اینصورت خواننده و مخاطب نمیتواند محتوای وب سایت شما را از نظر درجه اهمیت دسته بندی نماید و سرفصل ها مشخص نخواهند بود . ( به طور مثال در فید و یا مرورگرهای متنی و در مواردی ایمیل )
دلیل دیگر نیز اهمیت تگهای Heading برای موتورهای جستجو است که دیگر همگی با این موضوع آشنا هستیم و از اهمیت این تگها برای موتورهای جستجو با خبریم . یک تگ p تغییر شکل یافته نمیتواند نقش یک تگ Heading را برای موتورهای جستجو داشته باشد .
ساختار نا مناسب و غیر آبشاری در رعایت درجه اهمیت تگهای Heading و محتوای وب سایت علاوه بر گیج کننده بودن برای مخاطب میتواند موتورهای جستجو را نیز گیج کند و این باعث خواهد شد که مهمترین مطالب وب سایت شما مورد توجه یک موتور جستجو قرار نگیرد و یا یک موضوع با درجه اهمیت کمتر برای شما به طور اشتباه برای یک موتور جستجو دارای درجه اهمیت بیشتری گردد .
استفاده بیش از حد و غیر استاندارد نیز میتواند باعث گیج کننده شدن محتوا برای مخاطبان گردد و همچنین باعث جریمه شدن وب سایت شما برای موتورهای جستجو .سعی کنید از اندازه های استاندارد تعریف شده برای این تگها به صورت استاندارد استفاده کنید . به این معنا که تگ h1 از نظر اندازه و رنگ باید بزرگ ترین و پررنگ ترین باشد و این درجه به ترتیب تا تگ h6 ادامه یابد . یکسان نمودن تگهای Heading از نظر اندازه و گاهی رنگ و فونت می تواند برای مخاطبان شما گیج کننده باشد . این اندازه و درجه اهمیت باید به صورت یکسان در وب سایت اعمال شود .
