❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

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

عودة للدرس❯ ❮عودة للدرس