سرخط خبرها

آموزش html تگ H

آموزش html تگ h

تگ عنوان یا همون heading tags که بیشتر با h1 , h2 , h3 و … اونها رو میشناسیم ، یکی از مهم ترین مسائلی است که یک وبمستر یا وبلاگ نویس حتما باید از آن آگاهی داشته باشد زیرا که عنوان ها و کلید واژه های بکار رفته در آنها میشه گفت یکی از مهم ترین مواردی هستند که موتور های جستجو و حتی بازدید کننده ها متوجه می شوند که نوشته ای که در ادامه آن می آید در چه رابطه هستش.همچنین یکی از مهم ترین موارد بهینه سازی سایت همین تگ های عناوین می باشد که در رابطه با نمایش مطلب در موتور های جستجو بسیار حائز اهمیت می باشند.همه طراحان وب سایت از اهمیت تگهای Heading در بهینه سازی وب سایت برای موتورهای جستجو آشنا هستند .

تگ های سرفصل (تگ های سری H) :

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

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

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

تگ < h1 > – < h6 > :

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

< h1 > بزرگترین سایز نوشته را ارائه داده و با بزرگتر شدن عدد بعد از h ، سایز نوشته آن کاهش می یابد و < h6 > کوچکترین سایز نوشته را ارائه می دهد .

سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر  و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی  به قبل و بعد از سر تیترها اضافه می کند.

در یک سند ساده HTML شما می تونید بدون اینکه CSS نویسی کنید یا برای عنوان ها سایز فونت تعیین کنید، یک سری سرفصل تعیین کنید. این سرفصل ها به ترتیب شماره از مهم شروع میشن تا به عنوان های کم اهمیت تر می رسیم. مهم ترین عنوان یک صفحه ساده HTML باید در تگ <h1> به این صورت قرار گرفته شود :

<h1>Title of the page</h1>

تگ های H تا شماره H6 ادامه دارند و شما می توانید عنوان های صفحه رو تا H6 ادامه بدید. مثلاً می تونید عنوان اصلی سایت تون رو H1 بزارید و عنوان مطالب رو H2 و عنوان منو های صفحه رو H3 و همینطور الی آخر.

مثال :

روش استفاده از تگ هدینگ به شکل زیر می باشد :
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

 

<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>عنوان بزرگ ۱</h1>
<h2>عنوان بزرگ ۲</h2>
<h3>عنوان بزرگ ۳</h3>
<h4>عنوان بزرگ ۴</h4>
<h5>عنوان بزرگ ۵</h5>
<h6>عنوان بزرگ ۶</h6>
</body>
</html>

خروجی کدهای نوشته شده در مرورگر به شکل زیر می باشد :

عنوان بزرگ ۱

عنوان بزرگ ۲

عنوان بزرگ ۳

عنوان بزرگ ۴

عنوان بزرگ ۵

 

آموزش انتخاب تگ عنوان مناسب

طبق جدول زیر تگ های مناسب برای عنوان های خودتون برگزینید.سعی کنید جدول رو در ذهنتون داشته باشید مخصوصا برای h1 , h2 , h3 که مهم تر هستند.

تگ عنوان – heading tag

مکان مناسب استفاده

بهترین تعداد بکار بردن

h1

عنوان مقاله یا مطلب

۱ بار

h2

عناوین داخل مطلب

بین ۲ تا ۵ بار

h3

زیر عنوان های داخل مطلب

تا ۶ بار

h4

عنوان برای منوها یا عنوان نظرات

بدون محدودیت

h5

عنوان برای منوهای سایت

بدون محدودیت

h6

عنوان برای فوتر (footer) سایت

بدون محدودیت

 

 

رای این که ظاهر مناسبی هم این تگ های عنوان داشته باشند شما باید تو شیوه نامه خودتون ویژگی هاشو تعریف کنید مثل اندازه فونت ، نوع فونت ، bold بودن و … . من مثلا خودم تگ h1 رو با فونت B-yekan گذاشتم ( آموزشی هم قبلا در رابطه با بکاربردن فونت دلخواه در سایتگذاشته بودم ) .

استایل و ظاهر تگ های عنوان h1 , h2 , h3

برای مثال من یک شیوه نامه در زیر آوردم که ببینید.

.single-post h2 {line-height: 20px;
font: 20px BYekan, Tahoma, Geneva, sans-serif;
letter-spacing: .3px;
margin: 10px 0 20px 0;
clear: both;}

چگونه تگ های عنوان رو انتخاب کنیم ؟

همینطور که خودتون میبینید خوده منم عنوان ها رو ما بین تگ h قرار میدم ، البته Bold کردن و heading tags مثل h1 , h2 و … رو اشتباه نگیرین یه وقت !!

اگر از سیستم های مدیریت محتوا مثل وردپرس و … استفاده می کنید با نه وبلاگ دارین مثل میهن بلاگ و بلاگفا  و … داخل ادیتور گزینه ای وجود داره که متن عنوان ها را از داخل متن با موس انتخاب می کنید سپس با ادیتور تگ عنوان مورد نظر رو بهش میدین.شکل زیر مربوط میشه به ادیتور وردپرس.

تگ h

نکات بخش تگ H:

-Heading ها در صفحات HTML از هر نظر اهمیت بالایی دارند . حتی از نظر بهینه بودن و سئوی صفحات سایت شما اثر بسزایی دارند . موتور های جستجوگر از این تگ ها استفاده می کنند تا محتوای سایت شما را بهتر تشخیص دهند .

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

-Heading ها را در مکان صحیح استفاده کنید و حتماً به خاطر داشته باشید که آنها را پس از استفاده در مکان مورد نظر ببندید . مکان صحیح استفاده از Heading ها به قالب و نحوه layout صفحه ی مورد نظر شما وابسته است ولی همانطور که پیشتر عرض شد، معمولاً عنوان اصلی باید H1 باشد و عنوان های مهم ولی غیر اصلی ، H2 بشن و عنوان های کم اهمیت تر H3 و همینطور تا آخر.

-سعی کنید کلید واژه های اصلی رو داخل این عنوان جوری بگنجانید که هم خواننده رو جلب کنه ، هم بی ربط نباشه ، هم کلید واژه ای باشه که زیاد سرچ مشه !

-زیاده روی در استفاده از این تگ ها خوب نیست ! در جدول بالا یک حدود مناسبی از تعداد به کار بردن آوردم.

نکته : اندازه و نوع فونت بصورت پیش فرض به صورت بالا قرار میگیرد ، اما در صورت دلخواه میتوانید نوع و اندازه و خصوصیات ظاهری دیگر تگ های عنوان (h1 – h2) را با استفاده از Css تغییر دهید.

 

QR Code For: آموزش html تگ H

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.