15 سمة احترافية عند استخدامك لغة HTML

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

في هذا المقال ستجد 15 منها، كل واحدة بمثال قصير تجرّبه مباشرة في محررك.

ما هي لغة HTML؟

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

قبل أن نبدأ، فرّق بين مصطلحين ستقرؤهما كثيرًا:

• الوسم (Tag): يحدد نوع العنصر، مثل <p> للفقرة و<img> للصورة.
• السمة (Attribute): معلومة إضافية تُكتب داخل الوسم لتغيّر سلوكه، مثل src في الصورة.

القائمة التالية فيها النوعان، مقسّمة حسب الاستخدام.

وسوم وسمات لتنسيق المحتوى النصي

1. وسم mark لتمييز النص

يُستخدم وسم mark لتسليط الضوء على جزء مهم من النص، كأنك مررت عليه بقلم تحديد. ويفهم المتصفح وقارئات الشاشة أن هذا الجزء مميز، وهذا لا تحققه بتلوين الخلفية بـ CSS وحدها.

<p>أهم نصيحة هي <mark>احفظ عملك باستمرار</mark>.</p>

2. وسم kbd لمفاتيح لوحة المفاتيح

عندما تشرح اختصارًا أو أمرًا يكتبه المستخدم، ضع كل مفتاح داخل وسم kbd. يظهر عادة بخط مختلف، ويمكنك تنسيقه بـ CSS ليشبه أزرار لوحة المفاتيح.

<p>اضغط <kbd>Alt</kbd> + <kbd>Tab</kbd> للتنقل بين النوافذ.</p>

3. وسم abbr للاختصارات

يوضح وسم abbr أن الكلمة اختصار، وتكتب معناه الكامل في سمة title فيظهر عند تمرير المؤشر فوقها. لاحظ أن هذا التلميح لا يظهر على شاشات اللمس، فاكتب المعنى الكامل في النص عند أول ذكر للاختصار إن كان مهمًا.

<abbr title="National Aeronautics and Space Administration">NASA</abbr>

4. سمة dir لاتجاه النص

سمة dir تضبط اتجاه النص: rtl من اليمين إلى اليسار، وltr من اليسار إلى اليمين، وauto ليختار المتصفح الاتجاه حسب لغة أول حروف النص. القيمة auto مفيدة جدًا في التعليقات وأسماء المستخدمين، حيث لا تعرف مسبقًا هل سيكتب الزائر بالعربية أم بالإنجليزية.

<html lang="ar" dir="rtl">
...
<p dir="auto">Awesome!</p>

في أي موقع عربي، ابدأ دائمًا بضبط lang="ar" وdir="rtl" على وسم html نفسه.

5. سمة contenteditable لجعل العنصر قابلًا للتعديل

عند إعطاء هذه السمة القيمة true يصبح محتوى العنصر قابلًا للتعديل مباشرة في المتصفح. هي الأساس الذي تقوم عليه كثير من محررات النصوص على الويب.

<p contenteditable="true">اكتب هنا نبذة عنك.</p>

تذكّر أن التعديل يحدث في المتصفح فقط، ولحفظه تحتاج إلى JavaScript وخادم.

6. سمة spellcheck للتدقيق الإملائي

تتحكم سمة spellcheck في تفعيل المدقق الإملائي للمتصفح داخل حقول الكتابة والعناصر القابلة للتعديل. فعّلها في حقول المقالات والرسائل، وعطّلها في الحقول التي تحتوي على أكواد أو أسماء مستخدمين حتى لا تمتلئ بخطوط حمراء بلا داعٍ.

<textarea spellcheck="true"></textarea>
<input type="text" name="username" spellcheck="false">

التحكم في القوائم المرقمة

7. سمة start لتحديد رقم البداية

تسمح لك سمة start بتحديد الرقم الذي تبدأ منه القائمة المرقمة ol. تفيدك عندما تقسّم خطوات طويلة على أكثر من قائمة وتريد أن يستمر الترقيم.

<ol start="5">
  <li>أناناس</li>
  <li>تفاح أحمر</li>
  <li>تفاح أخضر</li>
</ol>

8. سمة reversed لعكس الترقيم

مع سمة reversed يصبح الترقيم تنازليًا، وهو مناسب لقوائم مثل "أفضل 10" التي تنتهي بالمركز الأول. ويمكنك جمعها مع start.

<ol reversed start="10">
  <li>أناناس</li>
  <li>تفاح أحمر</li>
  <li>تفاح أخضر</li>
</ol>

سمات النماذج

9. سمة required للحقول الإلزامية

ضع سمة required على أي حقل يجب ملؤه، وسيمنع المتصفح إرسال النموذج ويُظهر رسالة تنبيه إذا تُرك فارغًا. ومع type="email" يتحقق المتصفح أيضًا من صيغة البريد.

<input type="email" name="email" required>

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

10. سمة disabled لتعطيل العناصر

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

<select name="course">
  <option>HTML</option>
  <option>CSS</option>
  <option disabled>React (قريبًا)</option>
</select>
<button type="submit" disabled>إرسال</button>

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

11. سمة accept لتحديد أنواع الملفات

مع حقل رفع الملفات، تحدد سمة accept أنواع الملفات التي تظهر للمستخدم عند الاختيار، بامتداداتها أو بأنواعها (MIME types).

<input type="file" name="cv" accept=".pdf, image/png, image/jpeg">

يستطيع المستخدم تجاوز هذا الفلتر، لذلك افحص نوع الملف وحجمه على الخادم دائمًا.

الصور والفيديو وأداء الصفحة

12. سمة loading لتأجيل تحميل الصور

إضافة loading="lazy" إلى الصور وإطارات iframe تؤجل تحميلها حتى يقترب المستخدم منها أثناء التمرير، فتفتح الصفحة أسرع وتستهلك بيانات أقل.

<img src="photo.jpg" alt="وصف الصورة" loading="lazy" width="800" height="450">

• اكتب width وheight حتى يحجز المتصفح مكان الصورة ولا تقفز محتويات الصفحة عند تحميلها.
• لا تؤجل الصورة الرئيسة التي تظهر أعلى الصفحة. بل يمكنك إعطاؤها fetchpriority="high" ليحمّلها المتصفح أولًا.

13. وسم picture للصور المتجاوبة

يتيح لك وسم picture عرض صورة مختلفة حسب حجم الشاشة، وهو أداة مهمة في التصميم المتجاوب (Responsive Web Design). يختار المتصفح أول source يطابق الشرط، وإن لم يطابق شيء يعرض img.

<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="طالب يتعلم البرمجة" width="1600" height="700">
</picture>

ويمكنك استخدامه أيضًا لتقديم صيغ أخف مثل AVIF أو WebP عبر سمة type، مع صورة JPG احتياطية للمتصفحات القديمة.

14. سمة poster لغلاف الفيديو

تحدد سمة poster صورة تظهر مكان الفيديو قبل تشغيله، بدلًا من إطار أسود أو لقطة عشوائية من أوله.

<video src="intro.mp4" poster="intro-cover.jpg" controls preload="none"></video>

إضافة preload="none" تمنع تحميل الفيديو حتى يضغط المستخدم على التشغيل، وهنا تصبح صورة الغلاف أهم.

مكونات تفاعلية بدون JavaScript

15. وسما details وsummary لصناعة الأكورديون

بهذين الوسمين تبني قائمة قابلة للطي والفتح (Accordion) دون سطر JavaScript واحد. ما بداخل summary هو العنوان الظاهر، وباقي المحتوى يظهر عند الضغط عليه، وكل ذلك يعمل بلوحة المفاتيح ومع قارئات الشاشة.

<details name="faq">
  <summary>هل أحتاج إلى خبرة سابقة؟</summary>
  <p>لا، يمكنك البدء من الصفر.</p>
</details>
<details name="faq">
  <summary>هل يمكنني التعلم من الهاتف؟</summary>
  <p>نعم، لكن الحاسوب أفضل للتطبيق.</p>
</details>

عندما تعطي أكثر من عنصر details نفس قيمة سمة name، تدعم المتصفحات الحديثة فتح واحد منها فقط في كل مرة، تمامًا كالأكورديون التقليدي.

كيف تبدأ تعلم HTML؟

1. افهم المفاهيم الأساسية: العناصر (Elements) والوسوم (Tags) والسمات (Attributes)، وهيكل الصفحة: head وbody والوسوم الدلالية مثل header وmain وfooter.
2. اكتب الكود بيدك: افتح محررًا مثل VS Code وابدأ بصفحات بسيطة، ثم انتقل تدريجيًا إلى صفحات أكبر. القراءة وحدها لا تكفي.
3. ابنِ مشاريع صغيرة: صفحة تعريفية عنك، ثم صفحة منتج، ثم نموذج تسجيل. كل مشروع يكشف لك ما لم تفهمه بعد.
4. استخدم مساعدات البرمجة بالذكاء الاصطناعي بحكمة: اطلب منها شرح خطأ أو مراجعة كودك، لكن اكتب الحل بنفسك أولًا. هدفك أن تفهم، لا أن تنسخ.
5. انتقل إلى CSS ثم JavaScript: HTML وحدها تبني الهيكل فقط، ومع CSS تصبح الصفحة جميلة ومتجاوبة.

إن أردت طريقًا منظمًا بالعربية، فابدأ بـ دورة أساسيات HTML، ثم أكمل مع مسار تطوير مواقع ويب متجاوبة باستخدام CSS-HTML الذي يأخذك من الصفر حتى بناء مواقع كاملة، وبعده مسار تعلم JavaScript من الصفر حتى الاحتراف.

كم من الوقت تحتاج لتعلم HTML؟

يختلف الوقت من شخص لآخر حسب وقتك المتاح وطريقة تعلمك. لكن أساسيات HTML تحتاج في المتوسط إلى نحو أسبوعين، بمعدل 5 إلى 10 ساعات أسبوعيًا.

إتقانها الحقيقي يأتي مع الوقت ومع المشاريع: كتابة كود دلالي سهل الوصول (Accessible)، وفهم النماذج والصور المتجاوبة جيدًا. وهذا يتطور معك وأنت تتعلم CSS وJavaScript.

الخلاصة

• استخدم mark وkbd وabbr لتعطي النص معنى، وdir لضبط الاتجاه في المحتوى العربي والمختلط.
• تحكّم في القوائم المرقمة بـ start وreversed.
• حسّن النماذج بـ required وdisabled وaccept، مع التحقق على الخادم دائمًا.
• اجعل صفحاتك أسرع بـ loading="lazy" وpicture وposter.
• ابنِ أكورديون كاملًا بـ details وsummary دون JavaScript.

جرّب كل مثال بنفسك الآن، ثم استخدم ما يناسبك منها في مشروعك القادم.

أسئلة شائعة