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