الهيكلة الصحيحة للمحتوى باستخدام الترويسات (H1, H2, H3)
يا هلا بالجميع! اليوم بنتكلم عن شيء أساسي ومهم جداً في أي صفحة ويب: الترويسات أو Headings. مو بس عشان شكل صفحتك يكون مرتب، لا، فيه أسباب أعمق بكثير تخليها ضرورية.
ليش الترويسات مهمة؟
ببساطة، الترويسات زي الفهرس لصفحتك. تساعد المتصفحات ومحركات البحث (زي جوجل) تفهم محتوى صفحتك وتصنفه صح. كمان، تخلي القارئ يستوعب المحتوى بسرعة ويقدر يتنقل بين الأقسام بسهولة. تخيل تقرا كتاب بدون فصول وعناوين فرعية، بتحس بضياع صح؟ هذا بالضبط اللي يصير بدون ترويسات صحيحة.
ملاحظة: الترويسات مو بس عشان التنسيق البصري. تقدر تتحكم بشكلها بالـ CSS. وظيفتها الأساسية هي هيكلة المحتوى دلالياً (Semantic Structure).
كيف تستخدمها صح؟
الـ H1: العنوان الرئيسي (مرة وحدة بس!)
الـ هو أهم عنوان في صفحتك، لازم يكون واحد بس لكل صفحة. يعبر عن الموضوع الأساسي للصفحة كلها. فكر فيه كعنوان الكتاب.
<h1>دليل بناء موقعك الأول</h1>الـ H2: العناوين الفرعية الأساسية
الـ يجي بعد الـ ويقسم المحتوى الرئيسي لأقسام أساسية. فكر فيها كفصول الكتاب.
<h2>اختيار اسم النطاق والاستضافة</h2>
<h2>تصميم الواجهة الأمامية</h2>الـ H3 (و H4, H5, H6): تفاصيل أكثر
الـ يستخدم لتقسيم أقسام الـ لتفاصيل أدق، وهكذا دواليك مع و و . كل ما نزلت في الرقم، كل ما صار العنوان أكثر تفصيلاً ويتبع العنوان اللي قبله في الهرمية. فكر فيها كأقسام داخل الفصل الواحد.
<h3>أنواع الاستضافة المتاحة</h3>
<h3>أهمية تجربة المستخدم (UX)</h3>تذكر: الهرمية مهمة جداً! لا تنط من
لـمباشرة بدون، إلا إذا كان السياق يتطلب ذلك بشدة، لكن الأفضل دائماً المحافظة على التسلسل.
مثال عملي
شوف كيف ممكن نرتب محتوى صفحة بسيطة:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>دليل الهيكلة الصحيحة</title>
<style>
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; }
h1 { color: #2c3e50; }
h2 { color: #34495e; }
h3 { color: #0056b3; } /* As per instruction */
h4 { color: #555; }
blockquote {
background-color: #fcfcfc; /* As per instruction */
border-left: 5px solid #eee;
margin: 1.5em 10px;
padding: 0.5em 10px;
color: #666;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: 'Courier New', monospace;
background-color: #e9e9e9;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>كل ما تحتاج معرفته عن تطوير الويب</h1>
<p>هذا الدليل سيأخذك في رحلة متكاملة لتعلم أساسيات تطوير الويب، من البداية وحتى الاحتراف.</p>
<h2>القسم الأول: أساسيات الويب</h2>
<p>هنا سنتعرف على اللغات الأساسية التي تشكل العمود الفقري لأي موقع.</p>
<h3>فهم HTML</h3>
<p>لغة هيكلة المحتوى، وهي أول خطوة في بناء أي صفحة ويب.</p>
<h4>العناصر الأساسية في HTML</h4>
<ul>
<li>الفقرات <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;"><p></code></li>
<li>الروابط <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;"><a></code></li>
<li>الصور <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;"><img></code></li>
</ul>
<h3>فهم CSS</h3>
<p>لغة التنسيق التي تعطي الجمال والجاذبية لموقعك.</p>
<h4>طرق تضمين CSS</h4>
<ul>
<li>Inline styles</li>
<li>Internal stylesheet</li>
<li>External stylesheet</li>
</ul>
<h2>القسم الثاني: البرمجة التفاعلية</h2>
<p>سننتقل هنا إلى كيفية جعل موقعك يتفاعل مع المستخدمين.</p>
<h3>مقدمة إلى JavaScript</h3>
<p>اللغة التي تحول موقعك من مجرد صفحة ثابتة إلى تطبيق ديناميكي.</p>
</body>
</html>وبكذا، نكون رتبنا المحتوى بشكل منطقي وواضح، وهذا مو بس للمستخدمين، حتى محركات البحث بتحبك أكثر!
ختاماً، لا تستهين بقوة الترويسات. هي مفتاح لموقع ناجح ومحتوى سهل الفهم والوصول. طبقها صح وشوف الفرق.