إعلان
تعلم الآن

HTML الوسوم من <h1> إلى <h6>

تعريفهم

يوجد 6 وسوم يمكن استخدامها لعرض عنواين في الصفحة و هي تبدأ من <h1> الذي يعطيك أكبر عنوان و تنتهي عند <h6> الذي يعطيك أصغر عنوان.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسوم إبتداءاً <h1> إلى <h6>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

خصائصهم

لا يملك أي خصائص تم إعدادها خصيصاً لهم.

إستخدامهم

في المثال التالي قمنا بعرض جميع العناوين من الأكبر إلى الأصغر حتى تلاحظ فرق الحجم بينهم.

مثال

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
		

جرب الكود

تصميمهم الإفتراضي

بشكل عام جميع المتصفحات تعرض الوسم <h1> بالتنسيق التالي.

h1 {
	display: block;
	font-size: 2em;
	margin-top: 0.67em;
	margin-bottom: 0.67em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
	

بشكل عام جميع المتصفحات تعرض الوسم <h2> بالتنسيق التالي.

h2 {
	display: block;
	font-size: 1.5em;
	margin-top: 0.83em;
	margin-bottom: 0.83em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
	

بشكل عام جميع المتصفحات تعرض الوسم <h3> بالتنسيق التالي.

h3 {
	display: block;
	font-size: 1.17em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
	

بشكل عام جميع المتصفحات تعرض الوسم <h4> بالتنسيق التالي.

h4 {
	display: block;
	font-size: 1em;
	margin-top: 1.33em;
	margin-bottom: 1.33em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
	

بشكل عام جميع المتصفحات تعرض الوسم <h5> بالتنسيق التالي.

h5 {
	display: block;
	font-size: .83em;
	margin-top: 1.67em;
	margin-bottom: 1.67em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
	

بشكل عام جميع المتصفحات تعرض الوسم <h6> بالتنسيق التالي.

h6 {
	display: block;
	font-size: .67em;
	margin-top: 2.33em;
	margin-bottom: 2.33em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
	

نصائح و ملاحظات

العنوان الرئيسي الذي تضعه للصفحة يعتبر أهم عنوان تضعه فيها بالنسبة لمحركات البحث ( Search Engines ) مثل جوجل و ياهو و غيرهما. بعدها في الأهمية يأتي مباشرةً العناوين الموضوعة للفقرات. يليها العناوين الفرعية الأقل أهمية الموضوعة في الفقرات, و في النهاية محتوى الفقرات نفسه.

لذلك ننصحك دائماً بوضع عنوان الصفحة الأساس بداخل وسم <h1> </h1> و عنوان أي فقرة بداخل وسم <h2> </h2> و أي عنوان فرعي في الفقرة بداخل وسم <h3> </h3> و هكذا.

لا تستخدم الوسم <h1> </h1> أكثر من مرة في ذات الصفحة.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة