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