عناصر نصية مضمّنة أخرى

لقد تناولنا معظم عناصر HTML، ولكن ليس كلها بالتأكيد. أحد الجوانب التي لم نناقشها هو عناصر النص المضمّنة. على عكس الاعتقاد الشائع، كان الهدف الأصلي من HTML هو مشاركة المستندات وليس فيديوهات القطط. هناك العديد من العناصر التي توفّر دلالات نصية للوثائق.

هناك وحدة تتناول الروابط وعنصر <a> element. ونناقش هنا بإيجاز بقية هذه العناصر.

أمثلة الرموز والكتابة الفنية

عند توثيق أمثلة الرموز، استخدِم العنصر <code>. يتم تلقائيًا عرض المحتوى النصي بخط أحادي المسافة. عند تضمين أسطر متعدّدة من الرموز، ضَع <code> داخل <pre> عنصر، الذي يمثّل نصًا منسّقًا مسبقًا.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

يربط العنصر <data> جزءًا معيّنًا من المحتوى بترجمة يمكن للآلة قراءتها. توفّر سمة value للعنصر الترجمة التي يمكن للآلة قراءتها لمحتوى العنصر. إذا كان محتوى <data> مرتبطًا بالوقت أو التاريخ، يجب استخدام عنصر <time> بدلاً منه، وهو يمثّل فترة زمنية محدّدة.

يمكن أن يتضمّن العنصر <time> السمة datetime لتوفير الوقت والتاريخ بتنسيق سهل القراءة للبشر ويمكن للآلة قراءته. يمكن للآلة قراءة سمة datetime، ما يوفّر معلومات مفيدة للتطبيقات، مثل التقاويم ومحرّكات البحث.

عند تقديم نموذج لناتج من برنامج، استخدِم الـ <samp> لتضمين النص. يعرض المتصفّح بشكل عام هذا النموذج أو الناتج المقتبس بخط أحادي المسافة أيضًا.

عند تقديم تعليمات تتضمّن التفاعل مع لوحة المفاتيح، الـ <kbd> عنصر يمكن استخدامه. يمثّل هذا العنصر بيانات أدخلها المستخدم النصية من لوحة مفاتيح أو الإدخال الصوتي أو أي جهاز آخر لإدخال النص.

يمكن استخدام عنصر <var> للتعبيرات الرياضية أو متغيرات البرمجة. تعرض معظم المتصفّحات المحتوى النصي بخط مائل من الخط المحيط. إذا كنت تكتب الكثير من المعادلات الرياضية، ننصحك باستخدام MathML، وهي لغة ترميز رياضية مستندة إلى XML لوصف الرموز الرياضية.

استخدِم عنصر <sup>للأس في نظرية فيثاغورس. هناك عنصر مشابه <sub> للأس السفلي يحدّد نصًا مضمّنًا يجب عرضه كخط سفلي لأسباب مطبعية فقط. الأسس والأرقام السفلية هي أرقام أو أشكال أو رموز أو تعليقات توضيحية أخرى أصغر من السطر العادي للنوع ويتم وضعها أعلى السطر أو أسفله قليلاً على التوالي.

استخدِم <del> للإشارة إلى النص الذي تمت إزالته أو "حذفه". يمكنك اختياريًا تضمين cite التي تم ضبطها على المصدر الذي يوضّح التغيير وسمة datetime مع التاريخ أو التاريخ والوقت بتنسيق التاريخ والوقت الذي يمكن للآلة قراءته. يمكن استخدام عنصر الشطب <s>، للإشارة إلى أنّ المحتوى لم يعُد ذا صلة، ولكن لم تتم إزالته فعليًا من المستند.

<ins> هو عكس عنصر <del>. يُستخدم هذا العنصر للإشارة إلى النص الذي تمت إضافته أو "إدراجه"، ويمكنك اختياريًا تضمين سمتَي cite أو datetime.

التعريفات ودعم اللغة

عند تضمين الاختصارات أو الأحرف الأولى من الكلمات، قدِّم دائمًا النسخة الكاملة من المصطلح بنص عادي عند استخدامه لأول مرة. بعد ذلك، قدِّم التمثيل المختصر لـ المصطلح بين علامتَي فتح وإغلاق <abbr> tags. لا تكون علامة <abbr> ضرورية إلا في هذه المرة الأولى عند تعريف الاختصار أو الأحرف الأولى من الكلمات. ليست سمة title ضرورية أو مفيدة.

الاستثناء من هذه القاعدة هو إذا كان المصطلح معروفًا جيدًا للقارئ، مثل HTML وCSS في هذه السلسلة.

عند تعريف مصطلح ليس اختصارًا أو أحرفًا أولى من الكلمات، استخدِم عنصر التعريف <dfn> لتحديد المصطلح الذي يتم تعريفه ضمن المحتوى المحيط به.

إذا كان المصطلح الذي يتم تعريفه ليس باللغة نفسها التي يُكتب بها النص المحيط، احرص على تضمين lang سمة لتحديد اللغة.

عند كتابة لغات مختلفة الاتجاهات، يوفّر HTML عنصر <bdi> لمعالجة النص الذي قد يكون ثنائي الاتجاه بشكل منفصل عن النص المحيط به. يكون عنصر التدويل هذا مفيدًا بشكل خاص عند إدراج محتوى غير معروف الاتجاه ديناميكيًا في الصفحة. تتجاوز علامة <bdo> اتجاه النص الحالي، ما يؤدي إلى عرض النص في اتجاه مختلف. تقدّم W3C مقدمة عن الخوارزميات الثنائية الاتجاه.

تتضمّن بعض مجموعات الأحرف تعليقات توضيحية صغيرة موضوعة أعلى الأحرف أو على يسارها لتقديم معلومات عن النطق. عنصر <ruby> هو الحاوية التي يجب استخدامها لتضمين هذه التعليقات التوضيحية التي تسهّل قراءة اللغات المكتوبة مثل الكورية والصينية واليابانية. يمكن أيضًا استخدام Ruby للغة العبرية والعربية والفيتنامية.

تم تضمين الأقواس في Ruby (<rp>) في المواصفات لتضمين الأقواس المفتوحة والمغلقة للمتصفّحات التي لا تتيح عرض <ruby>. عندما تتيح المتصفّحات عرض <ruby>، وهو ما تفعله جميع المتصفّحات الدائمة، لا يتم عرض محتوى أي عناصر <rp> يحتوي عنصر النص في Ruby (<rt>) على التعليقات التوضيحية الفعلية. كلاهما مضمّنان داخل <ruby>.

يُرجى العِلم أنّ الأقواس لن تظهر إذا كان متصفّحك يتيح عرض <ruby>.

التأكيد على النص

هناك عدة عناصر يمكن استخدامها للتأكيد على النص استنادًا إلى السبب الدلالي للتأكيد على النص (بدلاً من الأسباب المتعلّقة بالعرض، لأنّ هذه مهمة CSS).

• استخدِم عنصر <em> للتأكيد على نطاق من المحتوى أو إبرازه. يمكن تضمين عنصر <em>، مع الإشارة إلى درجة أكبر من التأكيد في كل مستوى من مستويات التضمين. يحمل هذا العنصر معنى دلاليًا ويمكن استخدامه لإعلام وكلاء المستخدمين السمعيين، مثل قرّاء الشاشة وAlexa وSiri، لتقديم التأكيد.
• استخدِم عنصر <mark> لتحديد النص ذي الصلة بطريقة ما أو تمييزه، مثل تمييز (أو "وضع علامة") على ظهور عبارات البحث في نتائج البحث. يتيح ذلك تحديد المحتوى الذي تم وضع علامة عليه بسرعة بدون إضافة تأكيد أو أهمية.
• يحدّد عنصر <strong> النص على أنّه ذو أهمية كبيرة. تعرض المتصفّحات عادةً المحتوى بوزن خط أثقل.
• يُستخدم عنصر <cite>، الذي تم تناوله في أساسيات النص، لوضع علامة على عناوين الكتب أو المقالات أو الأعمال الإبداعية الأخرى، أو مرجع مختصر أو بيانات وصفية للاقتباس من هذه الأعمال، مثل رقم ISBN لكتاب.

هناك ثلاثة عناصر تم إيقافها مؤقتًا، ولكن تمت إضافتها مرة أخرى إلى HTML. يجب استخدامها باعتدال، إن أمكن، لأنّها توفّر قيمة دلالية قليلة أو معدومة، ويجب دائمًا استخدام CSS لتنسيق عناصر HTML.

<i>

يمكن استخدام عناصر <i> للمصطلحات الفنية أو الكلمات الأجنبية (مع سمة lang التي تحدّد اللغة) أو الأفكار أو أسماء السفن. يُستخدم هذا العنصر لتمييز المحتوى المضمّن عن النص المحيط به لسبب معيّن، مثل النص الاصطلاحي والمصطلحات الفنية والتصنيفات التصنيفية.

يجب عدم استخدام هذا العنصر لجعل النص مائلاً.

تستخدم MLW عنصر <span> للنص الغريب في أسفل مراجعة ورشة عمل Toasty McToastface. يوفّر عنصر <span> حاوية مضمّنة عامة ليس لها دلالات و لا تمثّل أي شيء. كان من المناسب أيضًا استخدام <i> في هذه الحالة.

النمط التلقائي لعنصر <i> هو عرض العنصر بخط مائل. في هذا المثال، ضبطنا font-style: normal لأنّ الأحرف المستخدَمة غير متاحة بخط مائل.

<u>

يُستخدم عنصر <u> للمحتوى الذي يتضمّن تعليقات توضيحية غير نصية. على سبيل المثال، قد تريد إضافة تعليقات توضيحية للكلمات التي تم تهجئتها بشكل خاطئ عن قصد. يتم تلقائيًا وضع خط تحت المحتوى، ولكن يمكن التحكّم في ذلك باستخدام CSS، مثلاً عن طريق إضافة خط أحمر متموّج تحت الكلمة لمحاكاة مؤشرات الأخطاء النحوية في معالج الكلمات.

<p>I always spell <u>licence</u> wrong</p>

<b>

يمكن استخدام عنصر <b> للفت الانتباه إلى نص ليس مهمًا بطريقة أخرى. لا ينقل هذا العنصر أي معلومات دلالية خاصة ولا يجب استخدامه إلا إذا لم يكن أي من العناصر الأخرى في هذا القسم مناسبًا للغرض. لم يتم تقديم أي مثال لأنّني لم أتمكّن من ابتكار حالة استخدام صالحة، وهذا يوضّح مدى "الخيار الأخير" الذي يمثّله هذا العنصر.

مسافة بيضاء

عندما تريد فواصل أسطر، مثلاً عند كتابة الشعر أو عنوان فعلي، يُستخدم عنصر فاصل الأسطر الذي يغلق ذاتيًا، <br>، لإضافة إرجاع السطر.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

لتوفير فاصل أو فاصل موضوعي بين أقسام المحتوى العرضي، مثلاً بين فصول كتاب أو بين مونولوج من 5,000 كلمة والوصفة التي يبحث عنها المستخدمون فعليًا، أدرِج <hr> عنصر. تشير الأحرف HR إلى "خط أفقي". على الرغم من أنّ المتصفّحات تعرض بشكل عام خطًا أفقيًا، فإنّ هذا العنصر يحمل معنى دلاليًا. الدور التلقائي هو separator.

يحتوي HTML أيضًا على عنصر يتيح تقسيم الكلمات. يقدّم عنصر <wbr> الذي يغلق ذاتيًا اقتراحًا للمتصفّح بأنّه إذا كان من المحتمل أن تتجاوز كلمة الحاوية، فهذا هو الموضع الذي يمكن للمتصفّح اختياريًا تقسيم السطر فيه. يُستخدم هذا العنصر عادةً للفصل بين الكلمات ضمن عناوين URL الطويلة. ولا يضيف واصلة.

على سبيل المثال، في سيرة Hal الذاتية، هناك نص مكتوب برمز البايت، مع فصل كل بايت بمسافة. لا يحتوي رمز البايت على مسافات. للسماح بتقسيم سلسلة طويلة من رمز البايت بين البايتات فقط إذا كان السطر بحاجة إلى الالتفاف، نُدرِج عنصر <wbr> في كل فرصة للتقسيم:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

عناصر <br> و<hr> و<wbr> هي جميعها عناصر فارغة، ما يعني أنّه لا يمكن أن تحتوي على أي عقد فرعية، لا عناصر مضمّنة ولا نص. بما أنّه ليس لأي من هذه العناصر أي "محتوى داخلي" يمكن تخزين المحتوى فيه، فليس لها علامة إغلاق.

اختبِر معلوماتكَ

اختبِر معلوماتك حول النص المضمّن.