ما هي الوسوم (Tags) في HTML؟

الوسوم هي الكلمات المحاطة بـ < > التي تحدد عناصر الصفحة. كل وسم له وظيفة محددة، مثل إنشاء فقرة، رابط، صورة، أو تقسيم الصفحة إلى أقسام.

مثال بسيط:

<p>هذه فقرة نصية.</p>
  • <p> → وسم الفقرة.
  • </p> → وسم الإغلاق.

أهم وسوم HTML الأساسية

1. وسم الفقرة <p>

  • يستخدم لكتابة النصوص.
  • يمكن دمجه مع وسوم أخرى مثل <strong> للتأكيد أو <em> للإبراز.

مثال:

<p>مرحبًا بك في عالم <strong>HTML</strong>!</p>

2. وسم الرابط <a>

  • يستخدم لإنشاء الروابط بين الصفحات أو المواقع.
  • خاصية href تحدد رابط الوجهة.

مثال:

<a href="https://www.example.com">زوروا موقعنا</a>

3. وسم الصورة <img>

  • لإضافة الصور للصفحة.
  • خاصية src تحدد مسار الصورة، وalt لوصف الصورة لأغراض السيو وسهولة الوصول.

مثال:

<img src="logo.png" alt="شعار الموقع">

4. وسوم القوائم <ul>, <ol>, <li>

  • <ul> → قائمة غير مرتبة (نقاط).
  • <ol> → قائمة مرتبة (أرقام).
  • <li> → عنصر القائمة.

مثال:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

5. وسوم العناوين <h1> إلى <h6>

  • تستخدم لتقسيم الصفحة إلى عناوين رئيسية وفرعية.
  • <h1> → العنوان الرئيسي، و<h2> إلى <h6> للعناوين الفرعية.

مثال:

<h1>دليلك لتعلم HTML</h1>
<h2>أهمية الوسوم الأساسية</h2>

💡 نصيحة للسيو: استخدام العناوين بشكل منطقي يساعد جوجل على فهم هيكل الصفحة.

6. وسم التقسيم <div>

  • يستخدم لتجميع عناصر الصفحة معًا.
  • لا يظهر أي تأثير بصري، لكنه مهم جدًا لتنسيق الصفحة باستخدام CSS.

مثال:

<div class="container">
  <p>هذا نص داخل تقسيم.</p>
</div>

7. وسم النص المائل <em> والنص العريض <strong>

  • <em> → للنصوص المائلة، تستخدم لإبراز أهمية نص.
  • <strong> → للنصوص العريضة، تستخدم لتأكيد النصوص المهمة.

مثال:

<p>تعلم <strong>HTML</strong> خطوة بخطوة.</p>

أمثلة عملية

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>أهم وسوم HTML</title>
</head>
<body>
  <h1>دليلك لتعلم HTML</h1>
  <p>HTML هي لغة <strong>بناء صفحات الويب</strong> الأساسية.</p>
  
  <h2>أهم الوسوم</h2>
  <ul>
    <li>وسم الفقرة <code>&lt;p&gt;</code></li>
    <li>وسم الرابط <code>&lt;a&gt;</code></li>
    <li>وسم الصورة <code>&lt;img&gt;</code></li>
    <li>وسوم القوائم <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;li&gt;</code></li>
    <li>وسوم العناوين <code>&lt;h1&gt;</code> إلى <code>&lt;h6&gt;</code></li>
  </ul>
  
  <p>ابدأ بتطبيق هذه الوسوم على موقعك وستتمكن من بناء صفحات منظمة وسهلة القراءة.</p>
</body>
</html>

أهمية معرفة الوسوم الأساسية

  • تسهل عليك كتابة صفحات منظمة.
  • تساعدك على تحسين السيو عبر استخدام العناوين الصحيحة ووصف الصور.
  • تمكّنك من التنسيق باستخدام CSS بشكل أفضل.
  • تعتبر قاعدة قبل تعلم أي تقنيات ويب أخرى مثل CSS وJavaScript.

خلاصة

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