العناووين ( Heading ) في الـ HTML

نبذة عامة

يوجد مجموعة من العناصر تستخدم كعناووين في الـ HTML ويفضل استخدامها كعناووين .

في الـ HTML يوجد 6 عناصر خاصة بالعناووين وهذه العناصر هي:

  •  <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> </h5>
  • <h6> </h6>

الـ h وهى اختصار لـ Heading بمعنى عنوان ، وأكبرهم حجماََ هو <h1> ويبدأ الحجم يتناقص تدريجيا

 

مثال بسيط

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

 

ستكون النتيجة كالتالي

HeadingElementHtml

لاحظ التدرج في نزول حجم الخط ، أكبرهم Heading 1 وهو عنصر <h1> واصغرهم heading6 وهو عنصر <h6>

 

<h1>

هذا العنصر هو العنوان الرئيسي  ، عنوان المستوى الأول للصفحة ، ولمحركات البحث مثل Google أو bing ، ويجب ان يكون في كل صفحة فقط عنصر واحد من <h1>  ، حجم الخط الإفتراضي له هو 36px أو 2em .

 

<h2>

وهو العنصر الفرعي لـ <h1> ، يوصى بإستخدام العناووين بالترتيب المناسب، للحصول على صفحة أجمل ونتائج بحث قوية وأفضل .

 

مثال أخر

هنا ترتيب معين يفضل استخدامه مع العناووين فيجب ان تكون بالترتيب من الأكبر حجماََ إلى الأقل حجمها ، طالما يوجد عنوان بالصفحة ، هذا يعنى ان هذا العنوان هو عنوان لفقرة معينة ، بمعنى انه سيكون متبوعاََ بفقرة توصف وتشرح تفاصيل عن محتوى العنوان ، وتذكر دائماََ البدء اولاََ بعنصر الـ <h1> بعد ذلك بقيه العناصر بالتدريج حسب الحجم .

<!doctype html>
<html>
<head>
<title>Web Designing</title>
</head>
<body>
    <h1>Web Designing</h1>	
    <p>Description for web designing</p>
	
        <h2>HTML</h2>
        <p>Description for HTML</p>
		
            <h3>HTML 4</h3>
            <p>Description for HTML4</p>
			
            <h3>HTML 5</h3>
            <p>Description for HTML5</p>
			
        <h2>CSS</h2>
        <p>Description for CSS</p>
		
            <h3>CSS 2</h3>
            <p>Description for css2</p>
			
            <h3>CSS 3</h3>
            <p>Description for css3</p>
			
        <h2>Javascript</h2>
        <p>Description for JavaScript</p>
		
            <h3>Javascript</h3>
            <p>Description for Javascript</p>
			
            <h3>Jquery</h3>
            <p>Description for Jquery</p>
</body>
</html>