الفقرات وتنسيق النص والعناصر السطرية

الفقرات والمسافات البيضاء

وسم <p> هو اللبنة الاساسية لعرض النصوص على الويب. تضيف المتصفحات تلقائيا مسافات عمودية فوق وتحت كل فقرة لفصل كتل النص بصريا. من اهم السلوكيات التي يجب فهمها هي طي المسافات البيضاء: مهما وضعت من مسافات او علامات جدولة او اسطر فارغة بين الكلمات في كود HTML فان المتصفح يختزلها جميعا الى مسافة واحدة عند عرض الصفحة.

<p>هذا    يحتوي      مسافات         كثيرة.</p>
<!-- المتصفح يعرض: "هذا يحتوي مسافات كثيرة." -->

<p>هذا
يحتوي
اسطر جديدة
في المصدر.</p>
<!-- المتصفح يعرض: "هذا يحتوي اسطر جديدة في المصدر." -->

اذا كنت تحتاج الى الحفاظ على المسافات وفواصل الاسطر كما هي -- مثلا عند عرض شعر او رسومات نصية -- استخدم عنصر <pre> (النص المنسق مسبقا). سيعرض المتصفح المحتوى تماما كما يظهر في الكود المصدري بما في ذلك جميع المسافات وفواصل الاسطر وعادة بخط ثابت العرض.

فواصل الاسطر والخطوط الافقية

يدرج وسم <br> فاصل سطر واحد داخل الفقرة. وهو عنصر فارغ اي ليس له وسم اغلاق. استخدمه فقط عندما يكون فاصل السطر جزءا من المحتوى نفسه كما في العناوين البريدية او الشعر. لا تستخدم وسوم <br> لانشاء مسافات عمودية بين العناصر فهذه مهمة خصائص CSS مثل margin و padding.

ينشئ وسم <hr> خطا افقيا يمثل فاصلا موضوعيا بين اقسام المحتوى. وهو ايضا عنصر فارغ. دلاليا يشير الى تغيير في الموضوع وليس مجرد زخرفة بصرية.

<p>ادريس صالح<br>
123 شارع تطوير الويب<br>
مدينة الانترنت، HTML 12345</p>

<hr>

<p>قسم جديد يبدا بعد الفاصل الموضوعي.</p>

تنسيق النص الدلالي

يوفر HTML عناصر تضيف تنسيقا بصريا ومعنى دلاليا للنص في ان واحد. فهم الفرق بين العناصر الدلالية والعناصر التقديمية امر بالغ الاهمية لسهولة الوصول وتحسين محركات البحث.

عنصر <strong> يحدد النص على انه ذو اهمية قوية. تعرضه المتصفحات بخط عريض وقد تنطقه قارئات الشاشة بتاكيد اضافي. عنصر <b> ايضا يعرض النص بخط عريض لكنه لا يحمل اي اهمية دلالية بل يلفت الانتباه البصري فقط. وبالمثل <em> يشير الى التاكيد ويعرض بخط مائل بينما <i> يعرض نصا مائلا بدون اي تاكيد ضمني ويستخدم عادة للمصطلحات التقنية والكلمات الاجنبية.

<p><strong>تحذير:</strong> لا تحذف هذا الملف.</p>
<p><b>ملاحظة:</b> هذا عريض بصريا لكنه ليس عاجلا.</p>

<p>يجب عليك التسليم <em>حتما</em> قبل يوم الجمعة.</p>
<p>كلمة <i>schadenfreude</i> المانية الاصل.</p>

عناصر سطرية اضافية

يقدم HTML مجموعة غنية من العناصر السطرية لتوصيف النصوص المتخصصة. عنصر <mark> يبرز النص كانه محدد بقلم تحديد اصفر وهو مفيد لنتائج البحث. عنصرا <del> و <ins> يشيران الى النص المحذوف والمدرج على التوالي ويعرضان بخط يتوسطه شطب وخط تحته. عنصرا <sub> و <sup> ينشئان نصا منخفضا ومرتفعا وهما ضروريان للصيغ الكيميائية والتعبيرات الرياضية. عنصر <small> يمثل التعليقات الجانبية او النص القانوني الصغير.

للمحتوى التقني يحدد <code> الكود البرمجي السطري بخط ثابت العرض بينما <kbd> يمثل ادخال لوحة المفاتيح. عنصر <abbr> مع سمة title يقدم التوسع الكامل للاختصارات و <span> هو حاوية سطرية عامة تستخدم للتنسيق مع CSS عندما لا يوجد عنصر دلالي مناسب.

<p>نتائج البحث عن: <mark>تنسيق HTML</mark></p>

<p>السعر: <del>49.99$</del> <ins>29.99$</ins></p>

<p>الماء هو H<sub>2</sub>O. المساحة هي 5م<sup>2</sup>.</p>

<p><small>تطبق الشروط والاحكام.</small></p>

<p>اضغط <kbd>Ctrl</kbd> + <kbd>S</kbd> للحفظ.</p>

<p>استخدم دالة <code>console.log()</code> لتصحيح الاخطاء.</p>

<p>اخترعت <abbr title="World Wide Web">WWW</abbr> عام 1989.</p>

<p>هذا يحتوي <span style="color: blue;">كلمة زرقاء</span> بداخله.</p>

الاقتباسات

يستخدم عنصر <blockquote> لتوصيف قسم من المحتوى مقتبس من مصدر اخر. تقوم المتصفحات عادة بازاحة الاقتباسات. يمكنك تضمين سمة cite مع رابط المصدر الاصلي رغم ان هذا لا يظهر بصريا بشكل افتراضي.

<blockquote cite="https://example.com/article">
  <p>الطريقة الوحيدة لعمل شيء عظيم هي ان تحب ما تفعله.</p>
</blockquote>