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

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> أكثر من مرة في ذات الصفحة.

إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

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