سرفصل‌های پست
آموزش طراحی سایت با HTML
با عرض سلام خدمت تمامی دنبال کنندگان مباحث طراحی سایت با HTML از سری آموزش‌های سایت میزفا ، در جلسه گذشته به معرفی تگ hr پرداختیم در این جلسه از آموزش HTML قصد داریم شما را با تگ h1 تا h6 در HTML که به منظور ایجاد سرتیتر یا عنوان در HTML به کار میروند، آشنا نماییم.
معرفی تگ h1 تا h6
از تگ های h1 تا h6 برای ایجاد یک تیتر یا عنوان در HTML استفاده می‌شود، به این تگ‌ها ، تگ‌های heading گفته می‌شود و در دسته‌ی تگ های قالب بندی متن جای می‌گیرند.
تگ های h1 تا h6 بر اساس درجه اهمیت در شش سایز (h1 , h2 , h3 , h4 , h5 , h6) استفاده می‌شوند و درجه اهمیت از h1 به h6 کاهش می‌یابد یعنی تگ h1 دارای بیشترین اهمیت و تگ h6 دارای کمترین اهمیت از دید موتورهای جست و جو است پس سعی کنید در استفاده از تگ ها در طراحی وبسایت خود نهایت دقت را داشته باشید.
برای درک بهتر کاربرد تگ های h1 تا h6 در طراحی سایت به مثال زیر توجه کنید :
<h1> Mizfa.com </h1> <h2> Mizfa.com </h2> <h3> Mizfa.com </h3> <h4> Mizfa.com </h4> <h5> Mizfa.com </h5> <h6> Mizfa.com </h6>
صفات تگ h1 تا h6
تگ های heading دارای صفت‌ھای class ، id ، style ، title ، dir ، lang و align ھستند که در جدول زیر به بررسی صفت های تگ h1 تا h6 خواھیم پرداخت:
| صفت ها | مقدار | توضیحات |
|---|---|---|
| align | left center right justify |
این صفت در HTML5 پشتیبانی نمی‌شود .
صفت align نحوه چینش متن درون تگ h1 تا h6 را کنترل میکند و چهار مقدار left ، center ، right و justify را به عنوان مقدار می‌پذیرد .
|
بقیه صفت ھا نیز جزء صفات عمومی ھستند که قبلا آنھا را معرفی کرده ایم.
نقش واهمیت تگ h1 تا h6 در سئو سایت
توجه داشته باشید که تگ های h1 تا h6 در سئو و بهینه سازی سایت بسیار اهمیت دارند و برای فهماندن قسمت‌های مهم سایت به موتورهای جست و جو از این تگ‌ها استفاده می‌شود. برای آشنایی بیشتر با مباحث بهینه سازی و سئو پیشنهاد میکنم مقالات آموزشی سئو سایت میزفا را به هیچ عنوان از دست ندهید
نکات تکمیلی در مورد تگ h1 تا h6
- تگ h1 تا h6 توسط تمامی مرورگرها پشتیبانی می‌شوند .
- تمامی مرورگرها به صورت پیش فرض تگ های h1 تا h6 را به صورت درون خطی یا inline level نمایش می‌دهند .
خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات این مقاله آموزشی مطرح کنید.
سلام می خواستم بدونم چطور نمی تونم نام محصول در صفحات محصول رو تگ h1 تبدیل کنم
در صفحه محصول نام رو که inspect می گیرم در .tpl محصولات که سرچ می کنم که پیداش کنم نیست که تگ h1 رو اضافه کنم.
ممنون میشم راهنمایی کنین. ما در حال حاضر سایت پرستاشاپی داریم.
سلام وقت بخیر. برای هر قالب و سایتی فرق داره و باید یک برنامه نویس بتونه این مورد رو برای شما پیاده سازی کنه.
سلام ممنون از اینکه پاسخگو هستید .
آدرس سایت softpluse.ir هستش.
من توی صفحه اول سایت آدرس سایت رو بعنوان تگ h1 درج کردم . اما چند تا سوال و مشکل در این زمینه دارم .
اول اینکه چه جوری میشه سایز این تگ h1 رو کوچک کرد چون اگه به آدرس سایت برید می بینید که نمایش این تگ نمود خوبی نداره .
دوم اینکه توی صفحات دیگر سایت کهمطالب در اونها منتشر میشه هم این تگ و هم تگ عنوان مقاله بصورت h1 شناخته میشه . چه جور باید این مشکل رو حل کرد ؟
سلام علی.
درباره سوال اول که باید به دنبال آموزش CSS باشی تا بتونی تغییر بدی.
سوال دوم هم ساده هست و شما در داخل متن از h1 استفاده نکن. به احتمال زیاد وقتی عنوان در وردپرس میزنی خودش تبدیل به H1 میشه.
با سلام
من سایتم رو با استفاده از ابزارهای آنلاین از لحاظ سئو چک می کنم همه میگن که تگ h1 رو نداره وقتی تگ h1 رو اضافه می کنم این خطا حذف میشه اما مشکلی که بوجود میاد اینکه برای صفحات داخلی عنوان هر مطلب هم باید بصورت h1 باشه و این باعث میشه که توی یک صفحه دو تا h1 داشته باشم چطور میشه مشکل رو حل کرد ممنون میشم اگه پاسخ بدین
سلام علی. باید کدهای اون صفحه رو نگاه کنی و ببینی اگر h1 نداره اضافه کنی. درضمن ابزارهای انلاین سئو بدون مشکل نیستن. ادرس قسمتی که مشکل داره رو بفرس تا بهتر بتونم راهنمایی کنم.
سلام و خسته نباشید
داخل متن وقتی میخام h1 بزنم یاست میگه استفاده کردی و استفاده نکن فکر میکنم تایتل اصلی رو قالبم h1 میکنه
از طرفی وقتی h1 نمیزنم سایت ماز میگه h1 نزدی
کدوم یک از اینا درست میگن؟ ماز یا یاست؟
سلام، وقتتون بخیر
با توجه به فرمتی که وردپرس در ساختار خود دارد، تمامی تایتل ها در صفحه با تگ H1 معرفی می‌شوند.
ممکن است که پوسته شما شخصی سازی شده باشد و تایتل در صفحه نمایش داده نشود یا با شخصی سازی از تگ های دیگری به جز تگ H1 برای معرفی تایتل استفاده کرده باشند.
این موضوع را در پوسته خود بررسی کنید و اگر در صفحه نهایی شما تایتل با تگ H1 معرفی شده بود، افزونه Yoast درست بیان کرده است.(که در بیشتر مواقع درست است).
اگر بر عکس این مورد بود Moz پاسخ درست را به شما داده است.
از پیامتون متشکرم.
سلام .ممنون از سایت خوبتون
چطوری یک مطلب تلگرام رو بدون پیوندهاش میشه به دیگران ارسال کرد؟
سلام. دامنه رو تقریبا ۱ ماه هست ثبت کردید. پیشنهاد میکنم به این زودی لینک سازی رو شروع نکنید.
سلام
میشه راهنمایی کنید سایت من مشکلش کجاست ممنون میشم
سلام، به اندازه تعداد مولکول‌های جهان ما مشکلات داریم، دقیق‌تر طرح مسئله کنید.
سلام. من قواعد تگ ها رو رعایت میکنم. h1 h2 h3 و … اما موقع چکاپ سایت فقط میزنه شما از تگ ۲ استفاده کردین!. مشکل از کجاست چطور میشه رفعش کرد. ممنونم.
سلام، لطفا آدرس سایت رو هم درج کنید تا بهتر بتونیم به شما کمک کنیم.
cleftlipiran.com
سپاس از شما
من بررسی کردم، صفحه اول شما تگ h1 نداره ولی مقاله های شما ۲ تا داره، مثلا مقاله “توصیه‌های بعد از عمل بینی” یک بار خوده قالب اضافه کرده این تگ h1 رو و یک بار هم خوده شما در متن اضافه کردید و این موضوع در استانداردهای سئو جا نداره و باید حداکثر یک بار از تگ h1 استفاده کرده باشید. از طرفی موقع چک کردن سایت شما حتما فقط صفحه اصلی رو برای بررسی انتخاب میکنید و برای همین چون در صفحه اصلی از تگ h1 استفاده نشده پیغام میده و میگه استفاده نکردید.
مثلا میتونید از صفحه اصلی اسم سایت رو به عنوان h1 قرار بدید. در بقیه صفحات بهتره عنوان مقاله h1 باشه.