Markdown: صيغة عناوين Markdown وإرشادات التسلسل الهرمي

العناوين هي الهيكل العظمي ��مستندك — تخبر القراء ومحركات البحث على حد سواء بكيفية تنظيم محتواك.

1. ما ستتعلمه

• صيغتي عناوين Markdown: ATX و Setext
• كيفية استخدام مستويات العناوين الستة بشكل صحيح
• قواعد التسلسل الهرمي للعناوين وأفضل الممارسات
• أخطاء العناوين الشائعة وكيفية إصلاحها
• كيف تؤثر العناوين على SEO وإمكانية الوصول

2. قصة حقيقية لمسؤول مستندات

(1) نقطة الألم: تسلسل هرمي فوضوي للعناوين

تولت سارة مشروع مدونة تقنية ووجدت أن المقالات السابقة استخدمت العناوين بشكل عشوائي — بعضها استخدم #، وبعضها استخدم ##، وبعضها لم يستخدم عناوين على الإطلاق، وأخرى قفزت من H1 مباشرة إلى H3 متجاوزة H2 تمامًا. نتيجة لذلك، تعطل مولد جدول المحتويات في الموقع تمامًا، واشتكى القراء من عدم قدرتهم على العثور على المحتوى.

(2) الحل: قواعد موحدة للعناوين

وضعت سارة قواعد للعناوين: كل مقالة تحتوي على عنوان # واحد فقط، ويجب أن تتدرج العناوين خطوة بخطوة (## → ### → ####) دون تخطي المستويات. استخدمت برنامجًا نصيًا لإصلاح جميع المقالات الخمسين دفعة واحدة. بعد الإصلاح، عاد جدول المحتويات التلقائي للعمل، وزاد وقت بقاء القراء على الصفحة بنسبة 40%.

3. صيغتا العناوين

يوفر Markdown صيغتين للعناوين:

graph TB
    A[عناوين Markdown] --> B[نمط ATX]
    A --> C[نمط Setext]
    B --> D[# إلى ######]
    B --> E[الأكثر شيوعًا]
    C --> F[=== و ---]
    C --> G[H1 و H2 فقط]

graph TB
    A[عناوين Markdown] --> B[نمط ATX]
    A --> C[نمط Setext]
    B --> D[# إلى ######]
    B --> E[الأكثر شيوعًا]
    C --> F[=== و ---]
    C --> G[H1 و H2 فقط]

(1) نمط ATX (موصى به)

يستخدم نمط ATX عدد رموز # للإشارة إلى مستوى العنوان — # واحد لـ H1، و ## لـ H2، وهكذا:

# عنوان المستوى 1 (H1)
## عنوان المستوى 2 (H2)
### عنوان المستوى 3 (H3)
#### عنوان المستوى 4 (H4)
##### عنوان المستوى 5 (H5)
###### عنوان المستوى 6 (H6)

(2) نمط Setext

يضع نمط Setext === أو --- أسفل نص العنوان:

عنوان المستوى 1
=======

عنوان المستوى 2
-------

▶ مثال: مقارنة بين نمطي العناوين

# H1 بنمط ATX
H2 بنمط ATX
============

ملاحظة: السطر الذي يحتوي على === أسفله يُعرض كـ H1، حتى لو كان النص يقول "H2".

4. إرشادات التسلسل الهرمي للعناوين

(1) استخدام التسلسل الهرمي بشكل صحيح

يجب أن يكون لعناوين المستند تسلسل هرمي واضح، مثل جدول محتويات الكتاب:

# عنوان المستند (H1 واحد فقط)
## الفصل 1 (H2)
### 1.1 قسم (H3)
#### 1.1.1 قسم فرعي (H4)
### 1.2 قسم (H3)
## الفصل 2 (H2)

(2) التأثير على SEO وإمكانية الوصول

التسلسل الهرمي للعناوين مهم جدًا لـ SEO وقارئات الشاشة:

▶ مثال: تسلسل هرمي صحيح مقابل خاطئ للعناوين

✅ صحيح:
# درس تخطيط CSS
## Flexbox
### خصائص حاوية Flex
### خصائص عنصر Flex
## Grid
### خصائص حاوية Grid

❌ خاطئ:
# درس تخطيط CSS
### خصائص حاوية Flex (تخطى H2)
## Flexbox
#### خصائص Flexbox بالتفصيل (قفزة غير مناسبة H3→H4)
## Grid

5. التنسيق والأحرف الخاصة في العناوين

(1) يمكنك استخدام عريض ومائل وتعليمات برمجية في العناوين

## تثبيت التبعيات باستخدام `npm install`
## فهم **flex-grow** و **flex-shrink** و **flex-basis**
## ما هو *التصميم المتجاوب*؟

(2) تجنب محتوى العناوين الطويل جدًا

❌ تجنب:
## درس مفصل حول كيفية استخدام مكتبة requests في Python لإرسال طلبات HTTP

✅ موصى به:
## إرسال طلبات HTTP باستخدام مكتبة requests

▶ مثال: قبل وبعد تحسين العنوان

❌ طويل جدًا:
## ستعلمك هذه المقالة كيفية إعداد بيئة تطوير Python في VS Code على Windows

✅ محسّن:
## إعداد Python في VS Code

6. مثال كامل: بنية العناوين لمقال

# تحليل البيانات باستخدام Python

## 1. تحضير البيانات
### (1) استيراد المكتبات
### (2) قراءة البيانات
### ▶ مثال: قراءة ملف CSV

## 2. تنظيف البيانات
### (1) معالجة القيم المفقودة
### ▶ مثال: ملء القيم الفارغة
### (2) إزالة التكرارات

## 3. تصور البيانات
### (1) المخططات الخطية
### ▶ مثال: رسم مخطط اتجاه
### (2) المخططات الشريطية

النتيجة المتوقعة: بنية مستند واضحة الطبقات يمكن للقراء ومحركات البحث فهمها بسرعة.

❓ أسئلة شائعة

📖 ملخص

• صيغتا عناوين: ATX (#) و Setext (===)؛ يُنصح باستخدام ATX طوال الوقت
• ضع دائمًا مسافة بعد #، وإلا فلن يتم التعرف عليه كعنوان
• H1 واحد لكل صفحة، تدرج خطوة بخطوة دون تخطي المستويات
• اجعل العناوين قصيرة (H1 ≤ 60 حرفًا)؛ تجنب حشو الكلمات المفتاحية
• يمكن أن تتضمن العناوين تعليمات برمجية وعريض ومائل وتنسيقات أخرى
• التسلسل الهرمي الجيد للعناوين يخدم القراء ومحركات البحث على حد سواء

📝 تمارين

1. مبتدئ: اكتب قطعة Markdown قصيرة تحتوي على عناوين H1 و H2 و H3 (اختر الموضوع بنفسك — ملاحظة قراءة أو خطة دراسية). تأكد من أن كل مستوى عنوان يحتوي على # واحد أكثر بالضبط من المستوى الذي فوقه.

2. متوسط: افتح مستندًا كتبته مؤخرًا وتحقق مما إذا كان تسلسله الهرمي للعناوين يتبع القواعد. إذا كان هناك تخطي للمستويات أو فوضى، قم بإصلاحها. ثم احسب عدد H1 لديك (الإجابة الصحيحة هي 1).

3. متقدم: استخدم إضافة Markdown All in One في VS Code لإنشاء جدول محتويات (اكتب [TOC] أو استخدم الأمر) وتحقق من صحة التسلسل الهرمي لعناوينك. إذا بدا جدول المحتويات المُنشأ غير صحيح، فمستويات عناوينك بحاجة إلى تعديل.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن