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

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

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

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

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

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

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

تم تضمين قوس Ruby (<rp>) في المواصفات لاحتواء الأقواس المفتوحة والمغلقة للمتصفحات التي لا تتيح عرض <ruby>. عندما تتيح المتصفحات <ruby>، وهو ما تتيحه جميع المتصفحات الدائمة التحديث، لا يتم عرض محتوى أي عناصر <rp>. يحتوي عنصر نص الياقوت (<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> هي عناصر فارغة، ما يعني أنّه لا يمكن أن تتضمّن أي عقد فرعية، أي لا يمكن أن تتضمّن عناصر متداخلة أو نصًا. بما أنّ أيًا من هذه العناصر لا يحتوي على أي "محتوى داخلي" يمكن تخزينه، ليس لها علامة نهاية.

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

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