أهلاً بك في عالم النصوص داخل صفحات الويب
افتح صفحة إنترنت لأول مرة، وتجد أمامك كلمات متراصّة بلا عنوان ولا ترتيب. هل ستكمل القراءة؟ غالباً لا. هنا بالذات يتجلّى دور العناوين والفقرات في HTML، فهي التي تمنح الصفحة نَفَسها، وتجعل الزائر يشعر أنه أمام نصّ منظّم لا كتل عشوائية.
في هذا الدرس ستتعلّم كيف تُرتّب نصوصك بذكاء، وتُبرز العناوين، وتُنسّق الفقرات بطريقة تُوقف القارئ عند كل سطر. هيا نبدأ خطوة خطوة.
أولاً: العناوين وسلالمها الستة
في HTML ست وسوم مخصصة للعناوين، تبدأ من الأهم مروراً بالأقل شأناً، وكأنها سلّم تنازلي:
- h1: العنوان الأكبر، ويُخصَّص عادةً لعنوان الصفحة الرئيسي، ولا يُستحسن تكراره.
- h2: عنوان قسم رئيسي داخل الصفحة.
- h3: عنوان فرعي داخل القسم.
- h4: عنوان فرعي ثانٍ، ويُستخدم حين تتشابك المواضيع.
- h5: عنوان فرعي نادر الورود.
- h6: أصغر درجات السلم، ويُلجأ إليه في حالات خاصة.
لا تختر العنوان تبعاً لحجم الخط، بل تبعاً لمكانته في المحتوى. حين تكتب خبراً عن إطلاق منتج جديد، يكون المنتج هو h1، وتفاصيله h2، ونقاطه الفرعية h3.
ثانياً: الفقرات ووسم p
الفترة هي الوحدة الأساسية لأي نص، ويُرمز إليها بالوسم p. تُغلَّف بسطر يفتح وسطر يُغلق، كما تُغلَّف هدية في صندوق. المتصفح يترك تلقائياً مسافة قبلها وبعدها، فلا داعي لإضافة أسطر فارغة يدوياً.
اكتب ثلاث فقرات متتالية عن رحلتك المفضلة. ستلاحظ أن كل فقرة تنفصل عن جارتها بهامش مريح للعين. هذا الفراغ ليس صدفة، بل قرار من المتصفح يمنح القارئ فرصة ليتنفس بين السطور.
ثالثاً: لمسات صغيرة تصنع فرقاً كبيراً
تحتاج أحياناً إلى إبراز كلمة داخل فقرة، أو الإشارة إلى مصطلح تقني، أو عرض اقتباس. هنا يتدخل صنف من الوسوم الفرعية:
- strong: يجعل النص عريضاً ويُوحي بأنه جوهري.
- em: يميل النص ويُبرزه بنبرة تركيز، كأنك تنطق الجملة بصوت مختلف.
- u: يُسطّر النص، ويُستخدم بحذر لأن الإفراط فيه يُشوّش العين.
- small: يصغّر النص، ويلائم الإشعارات الجانبية وحقوق النشر.
- mark: يميّز النص بخلفية ملونة، كأنك تظلل بقلم فوسفوري.
تخيّل مقالاً عن فوائد المشي اليومي، وتريد أن تقول: “المشي يقلل من التوتر، ويُحسّن المزاج“. لاحظ كيف يتغيّر وقع الجملة بحسب الوسوم.
رابعاً: السطور الجديدة والفواصل
هل حاولت أن تُنزّل النص سطراً جديداً بالضغط على Enter في المحرر؟ في HTML وحده لا يكفي. تحتاج وسم br لإدراج سطر جديد داخل الفقرة، كأنك تكتب عنواناً شعرياً بيتاً بعد بيت.
أمّا إذا أردت فاصلاً أفقياً بين موضوعين مختلفين، فوسم hr يرسم خطاً رفيعاً يفصل جزأي الصفحة، ويتكرر في المقالات الطويلة.
خامساً: الاقتباسات ونسب الأفكار
حين تنقل كلاماً من شخص آخر، ضعه داخل وسم blockquote لاقتباس طويل، أو q لاقتباس قصير يختلط بالسطر. هذا التمييز ليس شكلياً، بل يُساعد محركات البحث على إدراك أن الكلام لغيرك، ويُحسن ترتيب صفحتك في النتائج.
سادساً: قواعد ذهبية قبل أن تنشر
لا تُكثر من العناوين، فالعنوان موجود ليمنح القارئ خريطة للصفحة، لا ليُحوّلها إلى فهرس مكتظّ. ولا تُغلّف كل كلمة بـ strong، لأن التشديد المتكرر يُفقد الكلمة قيمتها. تذكّر: التنسيق يخدم المعنى ولا يطغى عليه.
نشاط تطبيقي
تعرّفت اليوم على العناوين الستة، والفقرات، ووسوم التنسيق، وكيفية التعامل مع السطور الجديدة والاقتباسات. خذ ورقة وقلم، واكتب مقطعاً من مئة كلمة عن موضوع تحبه، ثم طبّق ما تعلمته: اختر عنواناً رئيسياً بـ h1، وقسّمه إلى قسمين بـ h2، واكتب الفقرات بـ p، وأبرز كلمات مهمة بـ strong أو em. حين تنتهي، ستلمس كيف يتحوّل النص من كلمات متناثرة إلى صفحة حيّة تنبض بالتنظيم.