تقنية

أهم وسوم HTML التي يجب أن تعرفها

ouwayess1@gmail.com 16 مارس، 2025

0 10 3 دقائق

1. وسوم الهيكل الأساسي

1.1 `<!DOCTYPE html>`

الوظيفة: يُعلن أن المستند من نوع HTML5 (يجب أن يكون أول سطر في أي صفحة ويب).
مثال:
html
Copy
```
<!DOCTYPE html>  
```
Run HTML

1.2 `<html>`

الوظيفة: العلامة الجذر التي تُحيط بكل محتوى الصفحة.
السمات المهمة:
- lang: تُحدد لغة الصفحة (مثال: lang="ar" للعربية).
- dir: تُحدد اتجاه النص (rtl للعربية).

مثال:

<html lang="ar" dir="rtl">  
<!-- باقي المحتوى -->  
</html>

Run HTML

1.3 `<head>`

الوظيفة: يحتوي على معلومات غير مرئية للمستخدم، مثل:
- عنوان الصفحة.
- روابط ملفات التنسيق (CSS).
- وصف الصفحة لمحركات البحث (SEO).

مثال:

<head>  
  <meta charset="UTF-8">  
  <title>عنوان الصفحة</title>  
</head>

Run HTML

1.4 `<body>`

الوظيفة: يحتوي على كل المحتوى المرئي في الصفحة (نصوص، صور، روابط، إلخ).

مثال:

<body>  
  <h1>مرحبًا بالعالم!</h1>  
  <p>هذه فقرة نصية.</p>  
</body>

Run HTML

2. وسوم النصوص والعناوين

2.1 `<h1> إلى <h6>`

الوظيفة: عناوين رئيسية وفرعية (من الأكبر <h1> إلى الأصغر <h6>).

مثال:

<h1>عنوان رئيسي</h1>  
<h2>عنوان فرعي</h2>

Run HTML

2.2 `<p>`

الوظيفة: فقرة نصية.

مثال:

<p>هذه فقرة نصية تحتوي على معلومات مهمة.</p>

Run HTML

2.3 `<strong>` و `<em>`

الوظيفة:
- <strong>: يُظهر النص بعرض غامق (ويشير إلى أهمية المحتوى).
- <em>: يُظهر النص بميل (ويشير إلى تركيز على جزء معين).

مثال:

<p>هذا نص <strong>مهم</strong> ونص <em>مائل</em>.</p>

Run HTML

2.4 `<span>`

الوظيفة: حاوية صغيرة لتنسيق جزء من النص (دون التأثير على الهيكل العام).

مثال:

<p>هذا نص <span style="color: red;">ملون</span>.</p>

Run HTML

2.5 `<br>`

الوظيفة: إدخال سطر جديد (بدون إضافة فقرة جديدة).

مثال:

<p>هذا نص<br>مقسوم إلى سطرين.</p>

Run HTML

3. وسوم القوائم

3.1 `<ul>` و `<ol>`

الوظيفة:
- <ul>: قائمة غير مُرقَّمة (نقاط).
- <ol>: قائمة مُرقَّمة (أرقام أو حروف).

مثال:

<ul>  
  <li>قهوة</li>  
  <li>شاي</li>  
</ul>  

<ol>  
  <li>افتح المتصفح</li>  
  <li>ادخل الرابط</li>  
</ol>

Run HTML

3.2 `<li>`

الوظيفة: عنصر في القائمة.

مثال:

<ul>  
  <li>عنصر 1</li>  
  <li>عنصر 2</li>  
</ul>

Run HTML

4. وسوم الروابط والصور

4.1 `<a>`

الوظيفة: رابط نقر (Hyperlink).
السمات المهمة:
- href: يُحدد عنوان الرابط.
- target: يُحدد كيفية فتح الرابط (مثال: target="_blank" لفتحه في نافذة جديدة).

مثال:

<a href="https://example.com" target="_blank">زيارة الموقع</a>

Run HTML

4.2 `<img>`

الوظيفة: إدراج صورة.
السمات المهمة:
- src: مسار الصورة.
- alt: وصف نصي للصورة (مهم لـ SEO وإمكانية الوصول).
- width و height: تحديد أبعاد الصورة.

مثال:

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

Run HTML

5. وسوم الجداول

5.1 `<table>`

الوظيفة: يُحدد بداية جدول.
السمات المهمة:
- border: يُضيف حدودًا للجدول.

مثال:

<table border="1">  
  <!-- الصفوف والخلايا -->  
</table>

Run HTML

5.2 `<tr>`

الوظيفة: صف في الجدول.

مثال:

<tr>  
  <td>اسم الطالب</td>  
  <td>العمر</td>  
</tr>

Run HTML

5.3 `<td>`

الوظيفة: خلية بيانات في الجدول.
مثال:
html
Copy
```
<td>أحمد</td>  
```
Run HTML

5.4 `<th>`

الوظيفة: خلية عنوان في الجدول (مثل: “الاسم”، “العمر”).
مثال:
html
Copy
```
<th>الاسم</th>  
```
Run HTML

6. وسوم النماذج (Forms)

6.1 `<form>`

الوظيفة: يُحدد نموذجًا لجمع بيانات المستخدم.
السمات المهمة:
- action: يُحدد عنوان إرسال البيانات.
- method: يُحدد طريقة الإرسال (GET أو POST).

مثال:

<form action="/submit" method="POST">  
  <!-- حقول الإدخال -->  
</form>

Run HTML

6.2 `<input>`

الوظيفة: حقل إدخال (نص، بريد إلكتروني، كلمة مرور، إلخ).
السمات المهمة:
- type: نوع الحقل (مثال: text، password، email).
- placeholder: نص تلميحي داخل الحقل.

مثال:

<input type="text" placeholder="ادخل اسمك">

Run HTML

6.3 `<button>`

الوظيفة: زر لإرسال النموذج أو تنفيذ إجراء.

مثال:

<button type="submit">إرسال</button>

Run HTML

6.4 `<label>`

الوظيفة: تسمية لحقل الإدخال (تُحسّن إمكانية الوصول).

مثال:

<label for="username">اسم المستخدم:</label>  
<input type="text" id="username">

Run HTML

7. وسوم HTML5 الدلالية

7.1 `<header>`

الوظيفة: رأس الصفحة (يحتوي عادةً على الشعار وقائمة التنقل).

مثال:

<header>  
  <h1>موقعي</h1>  
  <nav>  
    <a href="#home">الرئيسية</a>  
  </nav>  
</header>

Run HTML

7.2 `<nav>`

الوظيفة: قائمة التنقل الرئيسية.

مثال:

<nav>  
  <a href="#home">الرئيسية</a>  
  <a href="#about">من نحن</a>  
</nav>

Run HTML

7.3 `<section>`

الوظيفة: قسم مستقل من المحتوى.

مثال:

<section>  
  <h2>عنوان القسم</h2>  
  <p>محتوى القسم...</p>  
</section>

Run HTML

7.4 `<article>`

الوظيفة: محتوى مستقل (مثل مقالة أو تدوينة).

مثال:

<article>  
  <h2>عنوان المقالة</h2>  
  <p>محتوى المقالة...</p>  
</article>

Run HTML

7.5 `<footer>`

الوظيفة: تذييل الصفحة (معلومات الاتصال، حقوق النشر).

مثال:

<footer>  
  <p>جميع الحقوق محفوظة © 2024</p>  
</footer>

Run HTML

8. وسوم أخرى مهمة

8.1 `<div>`

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

مثال:

<div class="container">  
  <h2>مرحبًا!</h2>  
  <p>محتوى الحاوية...</p>  
</div>

Run HTML

8.2 `<meta>`

الوظيفة: تعريف معلومات الصفحة (مثل الترميز، وصف SEO).

مثال:

<meta charset="UTF-8">  
<meta name="description" content="وصف الصفحة لمحركات البحث">

Run HTML

8.3 `<link>`

الوظيفة: ربط ملفات خارجية (مثل CSS).

مثال:

<link rel="stylesheet" href="style.css">

Run HTML

8.4 `<script>`

الوظيفة: إضافة أكواد JavaScript.

مثال:

<script>  
  alert('مرحبًا!');  
</script>

Run HTML

9. أفضل الممارسات لاستخدام الوسوم

استخدم الوسوم الدلالية مثل <header> و <article> لتحسين SEO.
أضف سمة alt للصور: لتحسين إمكانية الوصول وفهم محركات البحث.
تجنب الوسوم المُهمَلة مثل <font> أو <center> (استخدم CSS بدلًا منها).
اختبر الصفحة على متصفحات مختلفة (Chrome, Firefox, Safari).

10. مثال عملي كامل

<!DOCTYPE html>  
<html lang="ar" dir="rtl">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>موقع تجريبي</title>  
    <link rel="stylesheet" href="style.css">  
</head>  
<body>  
    <header>  
        <h1>مرحبًا بكم في موقعي</h1>  
        <nav>  
            <a href="#home">الرئيسية</a>  
            <a href="#about">من نحن</a>  
        </nav>  
    </header>  

    <section>  
        <article>  
            <h2>مقالة اليوم</h2>  
            <p>هذه مقالة عن أساسيات HTML.</p>  
            <img src="article.jpg" alt="صورة المقالة">  
        </article>  
    </section>  

    <footer>  
        <p>جميع الحقوق محفوظة © 2024</p>  
    </footer>  

    <script src="script.js"></script>  
</body>  
</html>

Run HTML

الخاتمة

الوسوم هي أساس أي موقع ويب. بمجرد إتقانها، يمكنك الانتقال إلى تنسيق الصفحات باستخدام CSS وإضافة التفاعلية مع JavaScript. ابدأ بالتجربة الآن، وستجد أن بناء المواقع أسهل مما تظن!