دي مجموعة الوسوم اللي بنستخدمها علشان نكتب محتوى الصفحة زي العناوين، الفقرات، الفواصل، إلخ.
أولًا: العناوين <h1> إلى <h6>
📌 وظيفتها:
-
بتستخدم لكتابة عناوين داخل الصفحة.
-
فيه 6 مستويات للعناوين:
-
<h1>هو أكبر وأهم عنوان (عادةً عنوان رئيسي). -
<h6>هو أصغر وأقل أهمية.
-
📌 ملاحظات مهمة:
-
يُفضل استخدام
<h1>مرة واحدة فقط في الصفحة. -
محركات البحث زي Google بتستخدم العناوين لفهم محتوى الصفحة.
<h1>عنوان رئيسي - h1</h1>
<h2>عنوان فرعي - h2</h2>
<h3>عنوان أصغر - h3</h3>
<h4>عنوان ثانوي - h4</h4>
<h5>عنوان فرعي جداً - h5</h5>
<h6>عنوان صغير جداً - h6</h6>
ثانيًا: الفقرات <p>
📌 وظيفتها:
-
تُستخدم لكتابة نصوص أو جمل.
-
كل فقرة تبدأ من سطر جديد
<p>دي أول فقرة في الصفحة وبتوضح إزاي نستخدم وسم <p>.</p>
<p>ودي فقرة تانية، ممكن نكتب فيها أي نص تاني.</p>
ثالثًا: السطر الأفقي <hr>
📌 وظيفته:
-
يرسم خط أفقي عبر الصفحة.
-
يُستخدم للفصل بين أقسام أو محتويات.
<h2>مقدمة</h2>
<p>ده النص بتاع المقدمة.</p>
<hr>
<h2>المحتوى</h2>
<p>ده نص المحتوى بعد الخط الفاصل.</p>
رابعًا: الفواصل <br>
📌 وظيفته:
-
يعمل كسر سطر (line break)، يعني يخلي النص اللي بعده يبدأ في سطر جديد.
-
عكس
<p>، ميعملش فقرة جديدة، بس يكسر السطر داخل نفس الفقرة
<p>
سطر أول<br>
سطر تاني<br>
سطر ثالث
</p>
خامسًا: التعليقات <!-- تعليق -->
📌 وظيفتها:
-
كتابة ملاحظات داخل الكود ما بتظهرش للمستخدم.
-
بتفيدك لو حابب تشرح لنفسك أو لحد بيقرأ الكود بعدك.
-
كمان ممكن تستخدمها مؤقتًا لإخفاء جزء من الكود
<!-- ده تعليق مش هيظهر في الصفحة -->
<p>النص ده هيظهر عادي.</p>
<!-- <p>النص ده متشال بالتعليق ومش هيظهر.</p> -->
فيديو مثال كامل يضم كل العناصر دي
