يتم استخدام علامة HR في مستندات الويب لعرض خط أفقي عبر الصفحة ، أو يطلق عليها أحيانًا قاعدة أفقية. على عكس بعض العلامات ، لا تحتاج هذه البطاقة إلى علامة إغلاق ، لذلك كل ما عليك فعله هو الكتابة لإدراج الخط.
يمتد الخط عبر العرض الكامل للصفحة ويحمل معه بعض السمات الافتراضية لوصف سمك الخط وموقعه ولونه ، ولكن يمكنك تغيير هذه الإعدادات إذا كنت ترغب في ذلك.
يمكنك تحرير خصائص الخط الأفقي في مستند HTML5 عن طريق تحرير CSS للصفحة. تم تغيير خطوط أفقية HTML4 على جانب HTML من المستند.
هو علامة الموارد البشرية الدلالي؟
في HTML4 ، لم تكن علامة الموارد البشرية دلالية. تصف العناصر الدلالية معانيها من حيث يمكن للمتصفح والمطور فهمها بسهولة. كانت علامة الموارد البشرية مجرد طريقة لإضافة سطر بسيط إلى مستند أينما تريد. وضع حد أعلى أو أسفل للعنصر الذي تريد أن يظهر الخط فيه خطًا أفقيًا في أعلى أو أسفل العنصر ، ولكن بشكل عام ، كانت علامة الموارد البشرية أسهل في الاستخدام لهذا الغرض.
وابتداءً من HTML5 ، أصبحت علامة الموارد البشرية الدلالية ، وهي تحدد الآن فاصلًا موضوعيًا ذا مستوى فاصل ، وهو فاصل في تدفق المحتوى الذي لا يضمن صفحة جديدة أو محددًا آخر أقوى - إنه تغيير في الموضوع. على سبيل المثال ، قد تجد علامة الموارد البشرية بعد تغيير مشهد في قصة ، أو يمكن أن تشير إلى تغيير في الموضوع في وثيقة مرجعية.
سمات الموارد البشرية في HTML4 و HTML5
في HTML4 ، يمكن تعيين علامة الموارد البشرية إلى سمات بسيطة بما في ذلك محاذاة ، العرض ، و لا ظل . يمكن ضبط المحاذاة إلى اليسار , مركز , حق أو برر . يضبط العرض عرض الخط الأفقي من النسبة المئوية 100٪ الافتراضية التي تمد الخط عبر الصفحة. ال لا ظل السمة يعرض خط لون خالص بدلاً من لون مظلل.
هذه السمات قديمة في HTML5. يجب عليك بدلاً من ذلك استخدام CSS لتمييز علامات HR في مستندات HTML5.
هذا هو مثال HTML5 لتمييز الخط الأفقي ليكون 10 بكسل عاليًا باستخدام CSS المضمّن (يتم إدراج الأنماط مباشرة في المستند مع HTML):
هناك طريقة أخرى لتحديد الخطوط الأفقية في HTML5 وهي استخدام ملف CSS منفصل ، والارتباط به من مستند HTML. في ملف CSS ، ستكتب التصميم على النحو التالي: hr {الطول: 10px}
يتطلب نفس التأثير في HTML4 إضافة سمة إلى محتوى HTML. فيما يلي كيفية تغيير حجم الخط الأفقي باستخدام بحجم صفة، عزا:
هناك المزيد من الحرية في تصميم الخطوط الأفقية في CSS مقابل HTML. فقط عرض و ارتفاع الأنماط متناسقة عبر جميع المتصفحات ، لذلك قد تكون هناك حاجة إلى بعض التجارب والخطأ عند استخدام أنماط أخرى. العرض الافتراضي هو دائمًا 100٪ من عرض صفحة الويب أو العنصر الرئيسي. الارتفاع الافتراضي للقاعدة هو بكسل اثنين.