أساسيات النص

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

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

العناوين، تمت إعادة النظر فيها

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

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

تتضمّن بعض أوراق الأنماط لوكيل المستخدم أدوات الاختيار التالية، أو ما شابه ذلك، لتصميم عناصر <h1> المُدمجة كما لو كانت ذات مستوى أقل أهمية:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

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

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

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

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

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

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

كيانات HTML

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

هناك بعض الكيانات الأخرى التي يتم استخدامها غالبًا، مثل © لحقوق الطبع والنشر (©) و™ للعلامة التجارية (TM) و  للمساحات غير الفاصلة. تُعد المسافات غير الفاصلة مفيدة عندما تريد تضمين مسافة بين حرفين أو كلمات مع منع فاصل أسطر من هذا الجزء. هناك أكثر من 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.