القسم الأول
📰 العناوين: h1 حتى h6
HTML توفر ستة مستويات من العناوين من h1 (الأكبر والأهم) إلى h6 (الأصغر والأقل أهمية). فكر فيها كعناوين كتاب: الفصل (h1)، المبحث (h2)، العنصر الفرعي (h3)، وهكذا.
1
<h1>عنوان من المستوى 1 — الأكبر</h1>
الأكبر والأهم — يجب أن يكون فريداً في الصفحة
2
<h2>عنوان من المستوى 2</h2>
عنوان قسم رئيسي
3
<h3>عنوان من المستوى 3</h3>
عنوان قسم فرعي
4
<h4>عنوان من المستوى 4</h4>
عنوان أصغر
5
<h5>عنوان من المستوى 5</h5>
نادر الاستخدام
6
<h6>عنوان من المستوى 6</h6>
الأصغر — نادر جداً
قاعدة SEO مهمة: لا تستخدم العناوين لتكبير النص! المتصفح يعطيها حجماً افتراضياً. استخدمها لتحديد أهمية المحتوى وترتيبه المنطقي. محركات البحث تقرأ h1 وتفهم منها موضوع صفحتك الرئيسي.
⚠️ خطأ شائع: بعض المبتدئين يستخدمون <h1> لكل شيء ظناً أنه "أكبر وأجمل". هذا خطأ — استخدم CSS لتغيير الحجم، واستخدم العناوين بترتيبها الصحيح.
🛠️ جرب بنفسك:
القسم الثاني
📝 الفقرات وتنسيق النص
النصوص هي جوهر أي موقع. HTML توفر عدة عناصر للتعامل مع النصوص بشكل دلالي (أي كل عنصر له معنى محدد).
1
<p>هذه فقرة نصية عادية. المتصفح يضيف مسافة فوقها وتحتها تلقائياً.</p>
p = Paragraph. أكثر tag استخداماً للنص
2
<p>هذه الكلمة <strong>مهمة جداً</strong> في الجملة.</p>
strong = غامق + يعني أهمية دلالية
3
<p>هذا النص <em>مؤكد عليه</em> بالمائل.</p>
em = Emphasis. مائل + يعني تأكيداً
4
<p>كود برمجي: <code>console.log("hello")</code></p>
code = لعرض الكود بخط monospace
5
<p>السطر الأول<br>السطر الثاني في نفس الفقرة</p>
br = line break. ينزل سطراً بدون فقرة جديدة
6
<hr>
خط أفقي فاصل — self-closing لا يحتاج إغلاق
7
<p>نص <mark>مظلل</mark> بالأصفر.</p>
mark = تظليل مثل الفلوماستر الأصفر
8
<p>السعر الأصلي: <del>100 ريال</del> الآن 80 ريال</p>
del = نص مشطوب (محذوف)
| العنصر | الشكل في المتصفح | المعنى الدلالي |
|---|
<strong> | نص غامق | محتوى مهم ودلالي |
<b> | نص غامق | غامق فقط — بدون أهمية دلالية |
<em> | نص مائل | تأكيد دلالي |
<i> | نص مائل | مائل فقط — بدون تأكيد دلالي |
<mark> | نص مظلل | نص مميز أو ذو أهمية |
<del> | نص محذوف | محتوى تم حذفه |
strong مقابل b: رغم أنهما يبدوان متطابقَين في المتصفح، إلا أن <strong> له معنى دلالي (يقول لمحركات البحث: هذا مهم). استخدم دائماً <strong> للمحتوى المهم.
🛠️ جرب بنفسك:
القسم الثالث
📋 القوائم: ul و ol و dl
القوائم من أكثر عناصر HTML استخداماً. تنقسم إلى ثلاثة أنواع رئيسية. كل نوع يُستخدم في حالة محددة.
1
<!-- النوع 1: قائمة غير مرتبة (Unordered List) -->
ul = Unordered List = نقاط
2
<ul>
بداية القائمة — كل عنصر بنقطة
3
<li>HTML</li>
li = List Item. يجب أن يكون داخل ul أو ol
5
<li>JavaScript</li>
عنصر ثالث
8
<!-- النوع 2: قائمة مرتبة (Ordered List) -->
ol = Ordered List = أرقام
9
<ol>
بداية القائمة المرقمة تلقائياً
10
<li>تعلّم HTML أولاً</li>
سيظهر كـ "1." تلقائياً
11
<li>ثم CSS</li>
سيظهر كـ "2." تلقائياً
12
<li>أخيراً JavaScript</li>
سيظهر كـ "3."
15
<!-- قائمة متداخلة (Nested List) -->
يمكن وضع قائمة داخل قائمة
17
<li>الواجهة الأمامية
عنصر رئيسي (سيتبعه ul آخر)
18
<ul>
قائمة فرعية داخل li
19
<li>HTML</li>
عنصر فرعي
21
</ul>
إغلاق القائمة الفرعية
23
</ul>
إغلاق القائمة الخارجية
متى تستخدم ul مقابل ol؟
✅ <ul> — عندما الترتيب لا يهم (قائمة مكونات، قائمة أصدقاء، قائمة مميزات)
✅ <ol> — عندما الترتيب مهم (خطوات وصفة طبخ، مراحل تعلّم، ترتيب نتائج)
🛠️ جرب القوائم:
القسم الرابع
🔗 الروابط والصور — العمود الفقري للويب
الروابط: <a>
تاج <a> (اختصار Anchor = مرساة) يُنشئ الروابط. بدونه لن تكون الصفحات متصلة ببعضها.
1
<!-- رابط خارجي -->
للمواقع الخارجية
2
<a href="https://google.com">زيارة جوجل</a>
href = hypertext reference. يحدد الوجهة
4
<!-- فتح في تبويب جديد -->
target="_blank" يفتح في Tab جديد
5
<a href="https://google.com" target="_blank">افتح في تبويب جديد</a>
_blank = في تبويب جديد منفصل
7
<!-- رابط داخلي (للملفات في نفس المجلد) -->
للتنقل بين صفحاتك
8
<a href="about.html">صفحة عنّي</a>
يبحث عن about.html في نفس المجلد
10
<!-- رابط للإيميل -->
يفتح برنامج البريد الإلكتروني
11
<a href="mailto:ahmed@email.com">راسلني</a>
mailto: يفتح الإيميل تلقائياً
13
<!-- رابط القفز لقسم في نفس الصفحة -->
# + id = قفز لقسم معين
14
<a href="#contact">اذهب للتواصل</a>
يقفز للعنصر الذي لديه id="contact"
الصور: <img>
1
<!-- صورة من الإنترنت -->
2
<img src="https://example.com/photo.jpg" alt="وصف الصورة">
src = المسار. alt = النص البديل. لا تحتاج إغلاق
4
<!-- صورة من نفس المجلد مع تحديد الحجم -->
صورة محلية على جهازك
6
src="images/profile.jpg"
في مجلد images داخل مجلدك
7
alt="صورة الملف الشخصي"
alt إلزامي للـ SEO وإمكانية الوصول
8
width="300"
العرض بالـ pixel
9
height="200">
الارتفاع بالـ pixel
لماذا alt مهم جداً؟
1️⃣ إذا لم تتحمل الصورة، يظهر alt بدلاً منها
2️⃣ محركات البحث تقرأ alt لمعرفة موضوع الصورة
3️⃣ التطبيقات المساعدة لذوي الاحتياجات الخاصة تقرأ alt بصوت عالٍ
القسم الخامس
🏛️ التقسيم الدلالي للصفحة (Semantic HTML)
HTML5 قدّمت عناصر دلالية (semantic) بدلاً من استخدام <div> لكل شيء. كل عنصر له معنى محدد يساعد المتصفحات ومحركات البحث.
<html>
<head> ... </head> ← المعلومات الخفية
<body>
<header> ... </header> ← رأس الصفحة (اللوجو والقائمة)
<nav> ... </nav> ← قائمة التنقل
<main> ← المحتوى الرئيسي (مرة واحدة فقط)
<section> ... </section> ← قسم موضوعي
<article> ... </article> ← مقال مستقل
<aside> ... </aside> ← محتوى جانبي
</main>
<footer> ... </footer> ← ذيل الصفحة
</body>
</html>
semantic-page.html — هيكل صفحة كاملة
1
<header>
رأس الصفحة — يحتوي عادة اللوجو والناف
2
<h1>اسم الموقع</h1>
اسم الموقع أو العلامة التجارية
3
<nav>
navigation — قائمة التنقل
4
<ul>
القائمة كـ ul (أفضل ممارسة)
5
<li><a href="#">الرئيسية</a></li>
رابط في قائمة التنقل
6
<li><a href="#about">عنّي</a></li>
رابط يقفز لقسم #about
11
<main>
المحتوى الرئيسي — يجب أن يكون فريداً في الصفحة
12
<section id="about">
section = قسم موضوعي له id للقفز إليه
13
<h2>عنّي</h2>
عنوان القسم
14
<p>أنا مطور ويب...</p>
محتوى القسم
15
</section>
إغلاق section
18
<footer>
ذيل الصفحة — حقوق النشر، روابط إضافية
19
<p>© 2025 اسمك. جميع الحقوق محفوظة.</p>
محتوى الفوتر
✅ لماذا Semantic HTML مهم؟
1. محركات البحث تفهم بنية صفحتك أفضل → ترتيب أعلى في النتائج
2. أدوات إمكانية الوصول (Screen Readers) تعمل بشكل صحيح
3. كودك أسهل في القراءة والصيانة لاحقاً