تعلم تطوير الويب هيكلة النصوص باستخدام لغة HTML

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

لا بدّ قبل الشروع في القراءة من الاطلاع على أساسيات لغة HTML التي يغطيها المقال تعرَّف على لغة HTML

التعامل مع الأساسيات: العناوين الرئيسية والفقرات

تتكون معظم النصوص المهيكلة من عناوين وفقرات سواء أكان النص قصة أو صحيفة أو كتاب جامعي أو مجلة.

تسهل النصوص المهيكلة تجربة القراءة وتزيد المتعة، وتُنظَّم النصوص ضمن فقرات في لغة HTML بتغليف النص داخل عنصر الفقرة النصية <p> كما يلي:

<p>أكتب حاليًا فقرة نصية</p>

بينما لا بد من استخدام عنصر عنوان مثل العنوان الرئيسي <h1> لإبراز النص على أساس عنوان للمحتوى الذي تعرضه الصفحة:

<h1>هذا عنوان المقال</h1>

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

إنجاز الهيكلية المتدرجة لمحتوى صفحة HTML

سنستخدِم في القصة التي نراها تاليًا العنصر <h1> ليمثل عنوان القصة و<h2> ليمثل عنوان كل فصل، بينما سيمثل العنصر <h3> الأقسام الفرعية لكل فصل.

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

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

• يفضَّل استخدام عنوان رئيسي <h1> واحد في كل صفحة، فهو العنوان ذو المستوى الأعلى وتتدرج تحته بقية العناصر.
• تأكد من استخدام عناصر العناوين بالترتيب الصحيح في الهيكلية المتدرجة للصفحة، فلا تستخدِم مثلًا <h3> ليشير إلى عنوان فرعي ثم تستخدم بعده <h2> ليمثل عنوانًا فرعيًا لعنوان فرعي، فهذا أمر غير منطقي وسيقود إلى نتائج غريبة.
• حاول عدم استخدام أكثر من ثلاثة مستويات في كل صفحة إلا إذا كان الأمر ضروريًا، فقد قَلَّ انتشار المستندات التي تعتمد هيكلية ذات مستويات عميقة نظرًا لصعوبة التنقل بين مستوياتها، ويفضل في حالات مثل هذه توزيع المحتوى ضمن صفحات عدة.

ما فائدة إعطاء الصفحة هيكلية معينة؟

للإجابة على هذا السؤال، دعنا نلقي نظرةً على الملف text-start.html الذي سيكون نقطة انطلاق في تطبيقات هذا المقال (وصفة حمُّص جيدة)، لذلك انسخ هذا الملف وضعه على حاسوبك لأنك ستحتاجه لاحقًا، كما يحتوي جسم المستند محتوًى مكوّنًا من أجزاء مختلفة لم تُنظَّم بعد في هيكلية محددة، لكنها مفصولة عن بعضها بمحارف الأسطر الجديدة، فعندما تفتح الملف عبر المتصفح، فستجد أنّ النص قطعة واحدة كبيرة.

السبب في ذلك هو عدم وجود أيّة عناصر لهيكلة هذا النص، فلن يميّز المتصفح بين العناوين أو الفقرات، بالإضافة إلى ذلك:

• يستعرض الزائر النص بسرعة بحثًا عن المحتوى الأساسي ويكتفي عادةً بقراءة العناوين ليختار نقطة البداية، إذ يقضي المستخدِم عادةً فترةً قصيرةً جدًا ضمن صفحة الويب، فإذا لم يستطع الزائر إيجاد أيّ شيء واضح أو مفيد خلال ثوان معدودة، فعلى الغالب سيتوقف عن القراءة ويغادر الصفحة.
• تفهرِس محركات البحث الصفحات آخذةً بالحسبان محتوى العناوين على أنها كلمات مفتاحية مهمة تؤثِّر على ترتيب نتائج البحث، فدون العناوين إذًا لن تُعَدّ صفحتك جيدةً وفق معايير السيو SEO أو تحسين محركات البحث Search Engine Optimization.
• لا يقرأ الزوار ذوو المشاكل البصرية الحادة صفحات ويب بأنفسهم، وإنما يستمعون إلى محتواها عن طريق برمجيات تُدعى قارئات الشاشة، إذ تتيح هذه البرمجيات الوصول السريع إلى محتوى نصي محدد، وتجري هذه العملية بطرق عدة منها تحديد خطوط عريضة للمحتوى بقراءة العناوين، مما يسمح للمستخدِم بإيجاد المعلومات التي يريدها بسرعة، فإذا لم تكن العناوين موجودةً، فسيضطر المستخدِم إلى الاستماع إلى النص بأكمله.
• إذا أردت تنسيق الصفحة باستخدام CSS أو جعلها تفاعليةً أكثر عن طريق جافاسكربت، فلا بد من تغليف المحتوى المطلوب بواسطة عناصر HTML لكي تستهدفه شيفرات CSS أو جافاسكربت بفعالية أكبر.

لهذه الأسباب وغيرها سنحتاج إلى هيكلة محتوى الصفحة.

تطبيق: هيكلة محتوى

لننتقل مباشرةً إلى التطبيق العملي، إذ سنضيف عناصر إلى النص غير المنسق الموجود في حقل المدخلات Input field والذي يُعرض في حقل المخرجات Output field، فإذا ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر "إعادة ضبط Reset"، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على الزر"أظهر الحل Show solution" لترى الحل الصحيح.

لماذا نحتاج إلى الدلالات؟

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

لا بد في السياق عينه أن نتأكد من استخدام العناصر الصحيحة لكي نعطي المحتوى المعنى والوظيفة والمظهر الصحيح، فوفقًا لهذه المقاربة، فإن العنصر <h1> هو عنصر دلالي يعطي المحتوى الذي يغلفه صفة عنوان رئيسي لصفحتك بأعلى مستوى.

<h1>This is a top level heading</h1>

سيعطي المتصفح محتوى هذا العنوان حجمًا كبيرًا افتراضيًا لكي يظهر على أساس عنوان رئيسي (على الرغم من أنك قادر على تنسيقه بالطريقة التي تريد). والأهم من ذلك أن لدلالته استخدامات عدة في محركات البحث مثلًا أو في قارئات الشاشة، كما يمكنك من ناحية أخرى عرض أيّ عنصر وكأنه عنوان رئيسي. لاحظ الشيفرة التالية:

<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>

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

القوائم

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

القوائم غير المرتبة

تستخدَم القوائم غير المرتبة Unordered list لوصف مجموعة عناصر لا أولوية لترتيبها ضمن القائمة، ومن الأمثلة عليها قائمة التسوق:

milk
eggs
bread
hummus

تبدأ القائمة غير المرتبة بالعنصر <ul> الذي يغلف جميع العناصر:

<ul>
milk
eggs
bread
hummus
</ul>

وينبغي أن نغلف عناصر القائمة بالعنصر <li>:

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

تطبيق: إنشاء قائمة غير مرتبة

حاول استخدام محرر الشيفرة في الأسفل لإنشاء قائمة غير مرتبة خاصة بك:

القوائم المرتبة

تستخدَم القوائم المرتبة ordered list لوصف مجموعة عناصر ينبغي ترتيبها ضمن القائمة، ومن الأمثلة عليها الاتجاهات التي يجب أن تسلكها لتصل إلى مكان معيَّن:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

توصَّف القائمة المرتبة بأسلوب القوائم غير المرتبة نفسه باستثناء العنصر المستخدَم في تغليف العناصر الذي سيكون في هذه الحالة <ol> بدلًا من <ul>:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

تطبيق: إنشاء قائمة مرتبة

حاول استخدام محرر الشيفرة في الأسفل لإنشاء قائمة مرتبة خاصة بك:

تطبيق: هيكلة وصفة الطعام في مثالنا السابق

أصبحت في هذه المرحلة قادرًا على هيكلة الصفحة التي تتحدث عن وصفة الحمُّص في مثالنا السابق، إذ يمكنك تخزين نسخة عن الملف text-start.html على جهازك ثم تجري التعديلات عليه، أو تنفيذ الأمر مستخدمًا محرر الشيفرة في الأسفل، وقد يكون تنفيذ التمرين على حاسوبك أفضل لأنك ستتمكن من حفظ عملك، في حين لن تتمكن من ذلك إذا استخدمت محرر الشيفرة في المقال لأن التغييرات التي أجريتها ستختفي عند إغلاق الصفحة.

إذا وجدت نفسك تائهًا، فانقر على الزر "أظهر الحل Show solution" لترى الحل الصحيح، أو تحقق من الملف text-complete.html الذي يحتوي على العمل بأكمله.

القوائم المتداخلة

من الممكن جدًا أن تتداخل القوائم، فقد تحتاج إلى قائمة فرعية تحت أحد عناصر قائمة أخرى، ولنأخذ القائمة الثانية من مثال وصفة الطعام:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

بما أن آخر عنصرين يتعلقان بالموضوع ذاته، فقد يبدوان مثل إرشادات فرعية تحت العنصر الذي يسبقهما، ومن المنطقي في هذه الحالة وضعهما ضمن قائمة غير مرتبة فرعية تحت العنصر الذي يسبقهما:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

عُد إلى التطبيق السابق وحاول تعديل القائمة الثانية كما فعلنا هنا.

إبراز النص والإشارة إلى أهميته

نحاول أحيانًا إبراز بعض الكلمات عندما نتحدث للإيحاء بأهميتها أو لنعني أمرًا آخر، وقد نحاول إعطاء أهمية لكلمات أخرى أوتمييزها بطريقة أو بأخرى، وكذلك الأمر في HTML، إذ تضم اللغة عناصر دلالية لتمييز المحتوى النصي بأسلوب مماثل، وسنناقش تاليًا أكثر هذه العناصر شيوعًا.

إبراز محتوى

عندما نريد إبراز أو تفخيم عبارة في الكلام المحكي نشدِّد على كلمات محدَّدة لكي نغيّر عمدًا دلالة ما نقول، وهذا ما نفعله أيضًا أثناء الكتابة، إذ نميل إلى التشديد على الكلمات بكتابتها على نحو مائل، وتحمل الجملتين التاليتين على سبيل المثال دلالتين مختلفتين:

• سعيد لأنك لم تتأخر
• سعيد لأنك لم تتاخر

تشير الجملة الأولى إلى راحة الشخص بأن الآخر لم يتأخر بالفعل، بينما تحمل الثانية نوعًا من الاستهزاء أو هجوم مبطن على الآخر للتعبير عن الانزعاج من تأخره.

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

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

إظهار أهمية محتوى

لإبراز أهمية بعض الكلمات، فإننا نشدِّد عليها عند لفظها أو نكتبها بخط ثخين Bold مثل هذا السائل عالي السميّة.

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

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

يمكنك أيضًا المزج بين العنصرين <strong> و <em>.

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

تطبيق: لنغير أهمية محتوى

يوجد نص قابل للتعديل في محرِّر الشيفرة التالي، وحاول أن تبرز بعض الكلمات وتعطي أهمية لبعضها الآخر، كما ترى لكي تتمرن قليلًا:

خط مائل أو ثخين أو تحته سطر

تتميز العناصر التي تحدثنا عنها سابقًا بدلالات معنوية محددة، لكن حالة العناصر <b> و <i> و <u> أعقد قليلًا، فقد وضعت هذه العناصر كي يكتب الأشخاص كلمات محددة بخط ثخين أو مائل أو ليظهر تحتها سطر، وذلك في حقبة لم تكن تنسيقات CSS مدعومة أو كانت محدودة الدعم، إذ تؤثر هذه العناصر على طريقة العرض وليس على الدلالة، وتُعرف حاليًا بعناصر العرض presentational elements، كما لا ينبغي استخدام هذه العناصر حاليًا لأنها غير دلالية، وقد رأينا أهمية الدلالات على أصعدة مختلفة مثل سهولة الوصول accessibility وتحسين محركات البحث أو سيو SEO.

أعادت HTML5 تعريف هذه العناصر مانحةً إياها دلالات قد تبدو مربكةً نوعًا ما، وإليك قاعدة مهمة جدًا: قد يكون استخدام العناصر <b> أو <i> أو <u> ملائمًا لإيصال معنى محدد يمكن إيصاله تقليديًا بإمالة الخط أو تثخينه أو وضع سطر تحته إذا لم توجد عناصر أخرى مناسبة، لكن عليك أن تبقي في حساباتك مفهوم سهولة الوصول أو الشمولية accessibility، فليس استخدام الخط المائل في غير سياقه مفيدًا لمستخدمِي قارئات الشاشة أو للأشخاص الذين يستخدِمون أبجديات مختلفة عن اللاتينية.

• <i>: يُستخدَم لإيصال معنى يمكن إيصاله تقليديًا بخط مائل مثل كلمات أجنبية، مرادفات، تصميم، مصطلحات تقنية، أفكار…
• <b>: يُستخدَم لإيصال معنى يمكن إيصاله تقليديًا بخط ثخين مثل كلمات مفتاحية، أسماء منتجات، جملة افتتاحية..
• <u>: يُستخدَم لإيصال معنى يمكن إيصاله تقليديًا بخط تحته سطر مثل الأخطاء الإملائية والنحوية.

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

<!-- مصطلحات علمية -->
<p>
  الطنان ياقوتي الحنجري (<i>Archilochus colubris</i>)
  هو الطنان الأكثر انتشارًا في أمريكا الشمالية.
</p>

<!-- كلمات أجنبية -->
<p>
  كانت القائمة بحرًا من الكلمات الغريبة <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> و <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- أخطاء إملائية غير معروفة -->
<p>
  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
</p>

<!-- تظليل كلمات عند عرض إرشادات -->
<ol>
  <li>
    <b>شرِّح</b> قطعتين من الخبز
  </li>
  <li>
    <b>أدخل</b> شريحة طماطم وورقة خس بين شريحتي الخبز
  </li>
</ol>

خلاصة

هذا كل شيء حتى الآن، ومن المفترض أن يكسبك هذا المقال فكرةً جيدةً عن توصيف النصوص وهيكلتها في HTML وأن يعرّفك على أهم العناصر المستخدمة لهذه الأغراض، كما هنالك الكثير من العناصر التي تحمل دلالات مختلفة وسنطَّلع على الكثير منها عند التطرق إلى التنسيق المتقدم للنصوص لاحقًا، وسنستعرض في المقال التالي تفاصيل إنشاء الروابط التشعبية في HTML والذي يُعَدّ العنصر الأهم تقريبًا في ويب.

ترجمة -وبتصرف- للمقال HTML text fundamentals.

اقرأ أيضًا

• هيكلة وتوزيع محتوى صفحات الويب
• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك
• ترويسة الصفحة والبيانات الوصفية في HTML