أساسيات النص

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

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

العناوين، مرة أخرى

هناك ستة عناصر لعناوين الأقسام، وهي <h1> و<h2> و<h3> و<h4> و<h5> و<h6>، حيث يكون <h1> هو الأهم و<h6> هو الأقل أهمية. لسنوات عديدة، قيل للمطوّرين إنّ المتصفحات تستخدم العناوين لتحديد مستويات المستندات. كان هذا هدفًا في الأصل، ولكن لم تنفّذ المتصفحات ميزات تحديد مستويات المستندات، وتمت إزالة خوارزمية تحديد المستويات المقترَحة رسميًا من مواصفات HTML. ومع ذلك، يعتمد مستخدمو برامج قراءة الشاشة بشكل كبير على العناوين كاستراتيجية استكشاف للتعرّف على محتوى الصفحة، والتنقّل بين العناوين باستخدام المفتاح h. إنّ التأكّد من تنفيذ مستويات العناوين بشكل منطقي، كما لو كنت تحدّد مستويات مستند، يجعل المحتوى متاحًا وينصح به بشدة.

تلقائيًا، ينسّق المتصفح <h1> بأكبر حجم، و<h2> بحجم أصغر قليلاً، مع كل مستوى عنوان لاحق يكون أصغر تلقائيًا. من الناحية التاريخية، كانت أوراق الأنماط الخاصة بوكيل المستخدم تقلّل أيضًا حجم خط عناصر <h1> المضمّنة داخل عناصر التقسيم، مثل <article> أو <aside> أو <nav> أو <section>.

تضمّنت بعض أوراق الأنماط الخاصة بوكيل المستخدم أدوات الاختيار التالية (أو ما شابهها) لتنسيق عناصر <h1> المضمّنة كما لو كانت مستويات عنوان أقل:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

ومع ذلك، لم يسبق أن عدّل نموذج إمكانية الوصول إلى العناصر (AOM) وبرامج قراءة الشاشة مستويات العناوين استنادًا إلى التضمين، وكان يتم دائمًا الإبلاغ عن <h1> المضمّنة على أنّها "عنوان، المستوى 1". أدى ذلك إلى عدم تطابق حيث ظهرت العناوين المضمّنة أصغر مرئيًا بينما بقيت عناوين من المستوى الأعلى للتقنيات المساعدة.

بما أنّ مواصفات HTML أزالت خوارزمية تحديد مستويات المستندات، أزالت المتصفحات قواعد أوراق الأنماط القديمة الخاصة بوكيل المستخدم. نتيجةً لذلك، تحتفظ عناصر <h1> المضمّنة بحجم خط <h1> العادي بدلاً من أن تتقلّص تلقائيًا.

لا تعتمد على تضمين عناصر <h1> داخل عناصر التقسيم للتنسيق المرئي أو التسلسل الهرمي الهيكلي. ميِّز المحتوى دائمًا باستخدام عناصر العناوين المتسلسلة (<h1> إلى <h6>) استنادًا إلى بنية المستند. يضمن ذلك أن يكون المحتوى واضحًا ومتاحًا لمحركات البحث وبرامج قراءة الشاشة والمشرفين المستقبليين.

خارج العناوين، يتكوّن معظم النص المنظَّم من سلسلة من الفقرات. في HTML، يتم تمييز الفقرات باستخدام العلامة <p>، وعلامة الإغلاق اختيارية ولكن يُنصح بها دائمًا.

يحتوي قسم ‎ #about على عنوان وعدة فقرات:

هذا القسم ليس معلمًا لأنّه لا يحتوي على اسم العنصر الظاهر على واجهة المستخدم. لتحويل هذا القسم إلى region، وهو دور مَعلم، يمكنك استخدام aria-labelledby لتوفير اسم العنصر الظاهر على واجهة المستخدم:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

لا تنشئ المعالم إلا عند الحاجة إليها وعندما يكون ذلك مناسبًا. يمكن أن يصبح وجود عدد كبير جدًا من المعالم مربكًا بسرعة لمستخدمي برامج قراءة الشاشة.

الاقتباسات والنصوص المقتبسة

عند تمييز مقالة أو مشاركة مدونة، قد تحتاج إلى تضمين اقتباس أو اقتباس بارز، مع نص مقتبس مرئي أو بدونه. هناك عناصر لهذه المكوّنات الثلاثة: <blockquote> و<q> و<cite> للنص المقتبس المرئي، أو السمة cite لتوفير مزيد من المعلومات للبحث.

يحتوي قسم #feedback على عنوان وثلاث مراجعات، وهذه المراجعات هي اقتباسات طويلة، بعضها يحتوي على اقتباسات، يليه فقرة تحتوي على النص المقتبس للاقتباس. إذا حذفنا المراجعة الثالثة لتوفير مساحة، سيكون الترميز على النحو التالي:

لا تشكّل المعلومات عن مؤلف الاقتباس أو النص المقتبس جزءًا من الاقتباس، وبالتالي لا تظهر في <blockquote>، ولكنها تأتي بعد الاقتباس. على الرغم من أنّ هذه النصوص هي نصوص مقتبسة بالمعنى العام للمصطلح، فإنّها لا تشير في الواقع إلى مصدر معيّن، لذا يتم تضمينها في عنصر فقرة <p>.

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

على الرغم من أنّنا قدّمنا معلومات النص المقتبس في فقرة بعد كل اقتباس طويل، فإنّ الاقتباسات المعروضة سابقًا تم ترميزها بهذه الطريقة لأنّها لم تأتِ من مصدر خارجي. إذا كان الأمر كذلك، يمكن (ويجب؟) الإشارة إلى المصدر.

إذا تم جلب المراجعة من موقع إلكتروني للمراجعات أو كتاب أو عمل آخر، يمكن استخدام العنصر <cite> لعنوان المصدر. يمكن أن يكون محتوى <cite> عنوان كتاب أو اسم موقع إلكتروني أو برنامج تلفزيوني أو حتى اسم برنامج كمبيوتر. يمكن استخدام التضمين <cite> سواء كان يتم ذكر المصدر بشكل عابر أو إذا كان المصدر يتم اقتباسه أو الإشارة إليه. محتوى <cite> هو العمل، وليس المؤلف.

إذا تم أخذ الاقتباس من Blendan Smooth من مجلتها غير الإلكترونية، يمكنك كتابة الاقتباس الطويل على النحو التالي:

لا يحتوي عنصر النص المقتبس <cite> على دور ضمني ويجب أن يحصل على اسم العنصر الظاهر على واجهة المستخدم من محتوياته، لذا لا تُضمِّن aria-label.

لتوفير حقوق الملكية عندما لا يمكنك عرض المحتوى، هناك السمة cite التي تأخذ كقيمة لها عنوان URL للمستند أو الرسالة المصدر للمعلومات المقتبسة. هذه السمة صالحة لكل من <q> و<blockquote>. على الرغم من أنّه عنوان URL، يمكن للآلة قراءته ولكن لا يمكن للمستخدم رؤيته:

على الرغم من أنّ علامة الإغلاق </p> اختيارية (ويُنصح بها دائمًا)، فإنّ علامة الإغلاق </blockquote> مطلوبة دائمًا.

تضيف معظم المتصفحات مساحة ترك مسافة في كل من اتجاهات <blockquote> المضمّنة وتجعل محتوى <cite> مائلاً، ويمكن التحكّم في ذلك باستخدام CSS. لا يضيف <blockquote> علامات اقتباس، ولكن يمكن إضافتها باستخدام المحتوى الذي تم إنشاؤه باستخدام CSS. يضيف العنصر <q> علامات اقتباس تلقائيًا، باستخدام علامات اقتباس مناسبة للغة.

في قسم #teachers، تم اقتباس كلام HAL على النحو التالي: "I'm sorry , but I'm afraid I can't do that, ." والرمز لذلك، باللغتَين الإنجليزية والفرنسية، هو:

يضيف عنصر الاقتباس المضمّن <q> علامات اقتباس مناسبة للغة. تتضمّن الأنماط التلقائية لوكيل المستخدم المحتوى الذي تم إنشاؤه باستخدام open-quote وclose-quote:

q::before {content: open-quote;}
q::after {content: close-quote;}

تم تضمين السمة lang لإعلام المتصفح بأنّه على الرغم من تحديد اللغة الأساسية للصفحة على أنّها الإنجليزية في علامة الفتح <html lang="en-US">، فإنّ هذه الفقرة النصية بلغة مختلفة. يساعد ذلك عناصر التحكّم الصوتي، مثل Siri وAlexa وVoiceOver، في استخدام النطق الفرنسي. كما يُعلم المتصفح بنوع علامات الاقتباس التي يجب عرضها.

على غرار <blockquote>، يتيح العنصر <q> استخدام السمة cite.

كيانات HTML

ربما تكون قد لاحظت تسلسل الإلغاء أو "الكيان". بما أنّ < تُستخدم في HTML، عليك إلغاؤها باستخدام < أو ترميز أقل سهولة في التذكّر <. هناك أربعة كيانات محجوزة في HTML: < و> و& و". المراجع إلى الأحرف هي < و> و& و" على التوالي.

بعض الكيانات الأخرى التي ستستخدمها غالبًا هي © لحقوق الطبع والنشر (©) و™ للعلامة التجارية (™) و  للمسافة غير القابلة للتقسيم. تكون المسافات غير القابلة للتقسيم مفيدة عندما تريد تضمين مسافة بين حرفَين أو كلمتَين مع منع حدوث فاصل أسطر هناك. هناك أكثر من 2,000 مرجع إلى أحرف باسم. ولكن، إذا لزم الأمر، فإنّ كل حرف، بما في ذلك الرموز التعبيرية، له مكافئ مرمّز يبدأ بـ &#.

إذا ألقيت نظرة على مراجعة ورشة عمل ToastyMcToastface (غير مضمّنة في عينة التعليمات البرمجية أعلاه)، ستلاحظ بعض الأحرف النصية غير العادية:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

يمكن أيضًا كتابة الجملة الأخيرة في هذا الاقتباس الطويل على النحو التالي:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

هناك بعض الأحرف غير الملغاة وبعض المراجع إلى الأحرف باسم في هذا الرمز غير المنظَّم. بما أنّ مجموعة الأحرف هي UTF-8، لا تحتاج الأحرف القليلة الأخيرة في الاقتباس الطويل إلى الإلغاء، كما في هذا المثال. يجب إلغاء الأحرف غير المتوافقة مع مجموعة الأحرف فقط. إذا لزم الأمر، هناك العديد من الأدوات التي تتيح إلغاء أحرف مختلفة، أو يمكنك التأكّد من تضمين <meta charset="UTF-8"> في <head>.

حتى عند تحديد مجموعة الأحرف على أنّها UTF-8، لا يزال عليك إلغاء < عندما تريد طباعة هذا الحرف على الشاشة. بشكل عام، لست بحاجة إلى تضمين المراجع إلى الأحرف باسم لـ > أو " أو &، ولكن إذا أردت كتابة برنامج تعليمي عن كيانات HTML، عليك كتابة < عند تعليم شخص ما كيفية ترميز <. 😀

أما الرمز التعبيري المبتسم فهو 😀، ولكن تم الإعلان عن هذا المستند على أنّه UTF-8، لذا لم يتم إلغاؤه.

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

اختبِر معلوماتك حول النص في HTML.

كيف يمكنك عرض رمز حقوق الطبع والنشر في HTML؟

c

يُرجى إعادة المحاولة.

©

إجابة صحيحة.

&copyright.

يُرجى إعادة المحاولة.

ما هو العنصر المستخدَم للإشارة إلى أنّ شيئًا ما هو اقتباس؟

<blockquote>

صحيح

<quote>

يُرجى إعادة المحاولة.

<cite>

يُرجى إعادة المحاولة. يُستخدم العنصر <cite> للإشارة إلى مصدر الاقتباس، وليس الاقتباس نفسه.