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

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

أمثلة على التعليمات البرمجية والكتابة الفنية

عند توثيق أمثلة الرموز، استخدِم العنصر <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>، إلا إذا كان ذلك المصطلح معروفًا للقارئ، مثل "HTML" و "CSS" في هذه السلسلة. عند حدوث ذلك لأول مرة فقط، عندما يتم تعريف الاختصار أو الاختصار، يجب استخدام <abbr>. السمة title ليست ضرورية ولا مفيدة.

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

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

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

تشتمل بعض مجموعات الأحرف على تعليقات توضيحية صغيرة توضع فوق الأحرف أو على يمينها لتقديم معلومات عن اللفظ. العنصر <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 الطويلة. ولا يضيف واصلة.

على سبيل المثال، في سيرة "هال"، يوجد نص مكتوب برمز بايت، مع فصل كل بايت بمسافة. لا يحتوي رمز بايت على مسافات. للسماح لسلسلة طويلة من رمز البايت بالتقسيم فقط بين وحدات البايت في حال احتاج السطر إلى أن يلتف، نُضمِّن العنصر <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> هي كلها عناصر فارغة، ما يعني أنّه لا يمكن أن تحتوي على أي عُقد فرعية، وليست عناصر مدمجة أو نصوصًا. نظرًا لعدم وجود أي "داخل" حيث يمكن تخزين المحتوى، فليس لها علامة نهاية.

التحقق من فهمك

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