أي صفحة ويب هي في الأساس صفحة مكتوبة بلغة HTML، لذلك لازم تعرف الوسوم الأساسية اللي لازم تكون موجودة في كل صفحة.
خلينا نشوف مثال بسيط لأبسط صفحة HTML ممكن تكتبها:
من المثال ده نلاحظ إن في 5 وسوم أساسية لازم تتواجد في أي صفحة ويب:
- نوع المستند
DOCTYPE - وسم
<html>– العنصر الأب للصفحة - وسم
<head>– يحتوي على بيانات الصفحة - وسم
<title>– عنوان الصفحة في المتصفح - وسم
<body>– المحتوى اللي بيشوفه الزائر
تعريف نوع المستند – <!DOCTYPE html>#
الـ <!DOCTYPE> مش وسم من وسوم HTML، لكنه إعلان أو تعريف بنكتبه في أول سطر في أي صفحة HTML.
الغرض منه إنه يقول للمتصفح:
“خلي بالك، الصفحة دي مكتوبة بلغة HTML من النوع الفلاني.”
يعني هو معلومة للمتصفح بتحدد نوع وإصدار HTML اللي الصفحة مكتوبة بيه، عشان المتصفح يعرف يعرض الصفحة بشكل صحيح.
في الإصدارات القديمة زي HTML 4.01، كان تعريف الـ DOCTYPE طويل ومعقد شوية لأنه كان بيعتمد على حاجة اسمها DTD (تعريف هيكل المستند).
لكن في HTML5 بقى أبسط بكتير، وكل اللي محتاج تكتبه هو:
<!DOCTYPE html>
السطر ده بيقول للمتصفح إن الصفحة مكتوبة بـ HTML5، وده كفاية جدًا عشان كل المتصفحات تعرضها بشكل متناسق.
باختصار:
<!DOCTYPE>هو تعليمات تنظيمية للمتصفح، مش بيظهر للمستخدم، لكنه ضروري عشان الصفحة تشتغل صح.
وسم <html> – العنصر الجذر للصفحة#
الوسم <html> هو البداية الحقيقية لأي صفحة ويب.
تقدر تعتبره “الأساس” اللي بتتبني عليه كل العناصر التانية، عشان كده بنسميه العنصر الجذر (Root) في مستند الـ HTML.
الوسم بيتكوّن من جزئين:
<html>– وسم افتتاحي</html>– وسم إغلاق
كل محتوى الصفحة بيكون بين الاتنين دول: النصوص، الصور، العناوين، وكل العناصر الأخرى.
وغالبًا بيحتوي <html> على وسمين أساسيين:
<head>: يحتوي على معلومات عن الصفحة (زي العنوان أو ملفات CSS).<body>: يحتوي على المحتوى اللي بيظهر فعليًا للمستخدم.
من غير <html>، الصفحة مش هتكون صفحة HTML أصلًا.
وسم <head> – يحتوي على بيانات الصفحة#
الوسم <head> هو المكان اللي بنحط فيه معلومات عن الصفحة نفسها، مش المحتوى اللي بيشوفه المستخدم.
يعني هو الجزء اللي بيقدّم بيانات للمتصفح ومحركات البحث، زي العنوان والوصف والترميز.
عادة بيحتوي على:
<title>: عنوان الصفحة اللي بيظهر في المتصفح أو محركات البحث.<meta>: لتحديد الوصف، الكلمات المفتاحية، والترميز (encoding).<link>: لربط الصفحة بملفات خارجية (زي CSS).<style>: لكتابة أكواد CSS مباشرة داخل الصفحة.<script>: لإضافة أكواد JavaScript.
مثال بسيط:
<head>
<title>صفحة تجريبية</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
باختصار: وسم
<head>مسؤول عن كل الإعدادات والمعلومات اللي بتساعد الصفحة تشتغل وتظهر بشكل صحيح، لكنها لا تظهر للمستخدم.
وسم <title> – عنوان الصفحة في المتصفح#
الوسم <title> هو اللي بيحدد عنوان الصفحة، وده اللي بيظهر في تبويب المتصفح من فوق.
كمان هو اللي بيظهر لما تحفظ الصفحة في المفضلة أو لما تظهر في نتائج البحث.
مكانه لازم يكون داخل <head>، مثلًا:
<head>
<title>دليل HTML للمبتدئين</title>
</head>
العنوان ده مش بس شكلي، ده كمان مهم جدًا لتحسين محركات البحث (SEO).
العنوان الجيد بيساعد صفحتك تظهر بشكل أفضل في نتائج البحث.
نصائح لاختيار عنوان قوي:
- خليه وصفي وواضح.
- يفضل يكون في حدود 50–60 حرفًا.
- استخدم كلمات مترابطة تعبر عن محتوى الصفحة بدقة.
باختصار:
<title>هو اللي بيدي صفحتك هويتها سواء للمستخدم أو لمحركات البحث.
وسم <body> – المحتوى المرئي للمستخدم#
الوسم <body> هو المكان اللي بيحتوي على كل المحتوى اللي بيشوفه المستخدم فعليًا في صفحة الويب — العناوين، الفقرات، الصور، الجداول، الروابط، القوائم… إلخ.
بييجي دايمًا بعد <head>، ومفيش غير واحد بس في الصفحة.
مثال:
<body>
<h1>مرحبًا بك في موقعي</h1>
<p>دي فقرة تجريبية بسيطة.</p>
<img src="photo.jpg" alt="صورة توضيحية">
</body>
كل ما تراه في المتصفح موجود داخل
<body>.
ببساطة،<body>هو قلب الصفحة — فيه كل ما يراه ويتفاعل معه المستخدم.
الخلاصة#
دلوقتي عرفنا الهيكل الأساسي لأي صفحة ويب، والوسوم اللي لازم تبدأ بيها كل صفحة HTML بشكل صحيح.
في الدرس الجاي هنتعمق شوية في عناصر الميتا (Metadata) اللي بنكتبها داخل وسم <head>،
وهنتكلم كمان بشكل بسيط عن السيو التقني (Technical SEO)
علشان تفهم إزاي محركات البحث بتقرأ صفحتك وتتعامل معاها.
استعد لأننا هنبدأ نفهم “إزاي المتصفح ومحركات البحث بيشوفوا موقعك من الداخل”