HTML

ما هي HTML؟

HTML هو اختصار لـ HyperText Markup Language، أي لغة النص الفائق، وتُعَدّ اللغة الترميزية القياسية لوصف بنية المستندات على الويب.^{11HTML - موسوعة حسوبgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد22نظرة عامة حول HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد} وعلى الرغم من أن اسمها يتضمن كلمة «لغة»، فإنها ليست لغة برمجة بالمعنى التقليدي، بل تُستَخدم لتوصيف محتوى الصفحات وتحديد عناصرها.^{33أساسيات HTML و CSS للمبتدئين بطريقة مبسطة - منصة تدريبكمgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تتألف HTML من مجموعة من العناصر (tags) والسمات (attributes) التي تُستخدم لتعليم النصوص وتحديد علاقاتها داخل المستند.^{22نظرة عامة حول HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد} هذه العناصر تشكّل الهيكل العظمي للموقع، حيث تُحدِّد العناوين، الفقرات، الروابط، الصور وغيرها من المكونات الأساسية.^{44ما هو HTML في تصميم الويب الحديث؟ - المصمم المحترفgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد55What is HTML?google.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُستَخدم HTML عادةً بالتزامن مع لغة CSS لتنسيق المظهر البصري للصفحات، ما يتيح فصل البنية عن الشكل.^{11HTML - موسوعة حسوبgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} بفضل بساطتها واعتمادها الواسع، تُعدّ الأساس الذي تُبنى عليه جميع مواقع الويب الحديثة.^{44ما هو HTML في تصميم الويب الحديث؟ - المصمم المحترفgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال بسيط يوضح بنية مستند HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>مثال</title>
</head>
<body>
    <h1>عنوان رئيسي</h1>
    <p>فقرة نصية.</p>
    <a href="https://example.com">رابط</a>
</body>
</html>

بنية الصفحة

يتكوّن كل مستند HTML من مجموعة من العلامات التي تُحدِّد بنية الصفحة دون أن تُعنى بالمظهر أو السلوك.^{66Beginner Guide To HTML And CSSgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُفتتح المستند بإعلان نوع المستند (doctype) الذي يُخبر المتصفح بطبيعة المحتوى.^{77بنية المستند - HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد88بنية HTML: اللبنات الأساسية — HTML for Kidsgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} يلي ذلك العنصر الجذر <html> الذي يضمّ كل ما يخص الصفحة.^{77بنية المستند - HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد88بنية HTML: اللبنات الأساسية — HTML for Kidsgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} داخل هذا العنصر يُوجد قسمان رئيسيان: رأس المستند <head>، الذي يحتوي على معلومات وصفية مثل العنوان، ولا يُظهر محتواه مباشرةً على الشاشة; وجسم المستند <body>، الذي يحمل النصوص والعناصر المرئية للمستخدم.^{88بنية HTML: اللبنات الأساسية — HTML for Kidsgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد77بنية المستند - HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد}

• إعلان نوع المستند (doctype) لتحديد أن الملف هو مستند HTML.^{77بنية المستند - HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد88بنية HTML: اللبنات الأساسية — HTML for Kidsgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• العنصر الجذر <html> الذي يحيط بكل محتوى الصفحة.^{77بنية المستند - HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد88بنية HTML: اللبنات الأساسية — HTML for Kidsgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• قسم الرأس <head> لتجميع البيانات الوصفية كالعنوان والروابط إلى ملفات أخرى.^{88بنية HTML: اللبنات الأساسية — HTML for Kidsgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• قسم النص <body> لاحتواء المحتوى الفعلي الذي يُعرض للزائر.^{77بنية المستند - HTMLweb.devاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال بسيط يوضح البنية الأساسية لأي صفحة HTML:

<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>مرحبًا بالعالم</h1>
    <p>هذا نص تجريبي.</p>
</body>
</html>

أهم الوسوم

تُعَدُّ الوسوم (tags) في HTML هي البنية الأساسية التي تُحدِّد مكوّنات الصفحة وتُرشد المتصفح إلى كيفية عرض المحتوى.^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد1010وسوم HTML الأساسيةgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} من بين هذه الوسوم، تُعَدُّ عناوين المستند (h1 – h6) أهمها لتقسيم المحتوى إلى أقسام واضحة.^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُستَخدم وسم الفقرة <p> لإنشاء نصوص مقروءة، بينما يتيح وسم كسر السطر <br> إدراج فواصل سطرية داخل الفقرة.^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد1010وسوم HTML الأساسيةgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُستخدم وسم الرابط <a> لربط الصفحات أو الموارد، ووسم الصورة <img> لإدراج رسومات توضيحية.^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تُنظَّم القوائم باستخدام وسوم مخصصة لذلك، وتُدعم الجداول عبر وسوم تُدرج في ورقة مرجعية للوسوم.^{1111ورقة مرجعية لـ HTML - الوسوم والسمات والنماذجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} بالإضافة إلى ذلك، تُستَخدم وسوم دلالية مثل <strong> لتأكيد النص، <style> لتضمين أنماط CSS، <sub> للنصوص السفلية، و<summary> لتلخيص محتوى القوائم القابلة للطي.^{1212HTML Elements Referencegoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

• عناوين (h1 – h6) لتحديد مستويات العناوين في المستند^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• الفقرات <p> وكسر السطر <br> لتنسيق النص داخل الفقرات^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد1010وسوم HTML الأساسيةgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• الروابط <a> لتوجيه المستخدمين إلى موارد أخرى^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• الصور <img> لإضافة وسائط بصرية^{99الوسوم الأساسية في HTML التي ستستخدمها يوميًا - منصة أبرمجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• القوائم (قائمة مرتبة وغير مرتبة) لتنظيم العناصر^{1111ورقة مرجعية لـ HTML - الوسوم والسمات والنماذجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• الجداول لتقديم بيانات منظمة^{1111ورقة مرجعية لـ HTML - الوسوم والسمات والنماذجgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• وسوم دلالية مثل <strong>، <style>، <sub>، <summary> لإضافة معاني وتنسيقات خاصة^{1212HTML Elements Referencegoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال توضيحي بسيط يدمج بعض هذه الوسوم:

<!DOCTYPE html>
<html>
<head>
    <title>مثال HTML</title>
    <style>
        strong { color: red; }
    </style>
</head>
<body>
    <h1>عنوان رئيسي</h1>
    <p>هذا نص <strong>مهم</strong> مع كسر سطر<br>متابعة النص.</p>
    <a href="https://example.com">زيارة الموقع</a>
    <img src="image.jpg" alt="صورة توضيحية">
</body>
</html>

العلاقة مع CSS وJavaScript

HTML العمود الفقري لبنية أي صفحة ويب، حيث يحدد العناصر الأساسية التي تُرتّب المحتوى داخل المستند.^{1313الفرق بين HTML و CSS و JavaScript بتشبيه المبنىgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد1414Learn HTML Codegoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

تُكمّل CSS مظهر هذه البنية عبر ضبط الألوان والخطوط وتنسيق التخطيط، ما يمنح الصفحة طابعًا جماليًا يُسهل قراءتها.^{1313الفرق بين HTML و CSS و JavaScript بتشبيه المبنىgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد1515ما الفرق بين HTML و CSS و JavaScript — دور كل منهم في ...createivo.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

من جانبها، تُضيف JavaScript سلوكًا تفاعليًا للصفحة، مثل الاستجابة للنقرات وتحديث المحتوى دون الحاجة لإعادة تحميل الصفحة.^{1313الفرق بين HTML و CSS و JavaScript بتشبيه المبنىgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد1515ما الفرق بين HTML و CSS و JavaScript — دور كل منهم في ...createivo.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

لتوضيح أدوار هذه التقنيات الثلاثة، يمكن تلخيصها في القائمة التالية:

• HTML يُنشئ الهيكل العظمي للموقع، أي العناصر والعلامات التي تُحدّد موقع النصوص والصور.^{1515ما الفرق بين HTML و CSS و JavaScript — دور كل منهم في ...createivo.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• CSS يعتني بالتصميم والجماليات، أي الشكل البصري للصفحة من ألوان وتنسيق.^{1515ما الفرق بين HTML و CSS و JavaScript — دور كل منهم في ...createivo.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}
• JavaScript يضيف السلوك والتفاعلية، مثل تشغيل وظائف عند الضغط على زر.^{1515ما الفرق بين HTML و CSS و JavaScript — دور كل منهم في ...createivo.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

مثال بسيط يدمج الثلاثة معًا:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; background:#f0f0f0; }
        #msg { color:#0066cc; }
    </style>
</head>
<body>
    <h1>مرحبا</h1>
    <p id="msg">انقر الزر لتغيير النص</p>
    <button onclick="document.getElementById('msg').textContent='تم التحديث!'">
        اضغط هنا
    </button>
</body>
</html>

مثال صفحة بسيطة

تعتبر HTML اللغة القياسية المعتمدة لتصميم وهيكلة صفحات ومواقع الويب.^{1616HTML Tutorialw3schools.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} تتميز هذه اللغة بكونها بسيطة وسهلة التعلم، وتُستعمل لوصف محتويات صفحات الويب (Web Pages) وتحديد العناصر التي تتألف منها مثل الأزرار، والفقرات، والعناوين.^{1717تعلم لغة HTMLgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} وتُعد الوسوم الخاصة بالعناوين والفقرات وفواصل الأسطر من أهم الوسوم الأساسية في HTML، حيث يُعتبر التدريب العملي عبر الأمثلة الأسلوب الأمثل لإتقانها.^{1010وسوم HTML الأساسيةgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

إليك مثالًا يوضح بنية صفحة بسيطة باستخدام HTML:

<!DOCTYPE html>
<html>
<head>
    <title>صفحة بسيطة</title>
</head>
<body>
    <h1>عنوان رئيسي</h1>
    <p>هذه فقرة نصية توضح محتوى الصفحة.</p>
</body>
</html>

HTML5

تُعد HTML5 الإصدار الخامس من لغة HTML، وهي لغة القياس الأساسية المستخدمة في بناء صفحات الويب وهيكلتها.^{1818HTML5 Introductiongoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} ويمتد نطاق المواصفات الخاصة بهذا الإصدار ليشمل ما كان موزعًا في السابق على ثلاثة وثائق منفصلة، وهي HTML4 وXHTML1 وDOM2 HTML.^{1919HTML Standardgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد} ويُستعمل مصطلح HTML5 بوصفه تعبيرًا شائعًا يدل على مجموعة من تقنيات الويب الحديثة التي تتضمن معيار الحياة للغة (HTML Living Standard) إلى جانب تقنيات أخرى.^{2020HTML5 - Glossary - MDN Web Docsdeveloper.mozilla.orgاذهب إلى المرجع ↓يُفتح في تبويب جديد} كما تُستخدم هذه التقنيات لإنشاء قوالب مواقع متجاوبة وقابلة للتخصيص.^{2121HTML5 UP! Responsive HTML5 and CSS3 Site Templatesgoogle.comاذهب إلى المرجع ↓يُفتح في تبويب جديد}

أنظر أيضاً

• SQL
• البرمجة كائنية التوجه
• الخوارزمية
• الفرق بين المترجم والمفسر
• المخطط الانسيابي