عناصر لغة HTMLHTML Elements

للتبسيط نقارن هنا بين عناصر تقبل محتوى وعناصر void لا تقبله؛ هذا ليس حصرًا لكل أنواع العناصر في معيار HTML:

• النوع الأول في هذا الشرح: عناصر تقبل محتوى نصيًا أو عناصر مسموحة بداخلها. يسمى وضع عنصر داخل آخر تداخلًا nested elements، ولها علامة فتح [open tag] وعلامة إغلاق [close tag]، مثل: [<h1>Title</h1>].
  
  
• النوع الثاني: العناصر الفارغة empty elements: وهي العناصر التي لا تحتوي على عناصر بداخلها، ولها علامة فتح [open tag] فقط، وليس لها علامة إغلاق [close tag]، مثل: [<br>].

• علامة الفتح open tag: تكون قبل بداية محتوى العنصر.
  
  
• علامة الإغلاق close tag: تكون بعد محتوى العنصر.
  
  
• محتوي content: محتوى العنصر والذي يكون إما نصًا أو عنصرًا آخر، ويكون بين علامة الفتح وعلامة الإغلاق.

تتكون علامة الفتح [open tag]: لأي عنصر مُتداخل في لغة HTML من ثلاثة أجزاء:

• الجزء الأول: يبدأ من اليسار وهو علامة أصغر من [⁦<⁩].
  
  
• الجزء الأوسط: هو اسم العنصر [tag name].
  
  
• الجزء الثالث: وهو الجزء الذي تنتهي به علامة الفتح، وهي علامة أكبر من [⁦>⁩].

مكونات علامة الإغلاق [close tag]: تتكون علامة الإغلاق [close tag] لأي عنصر مُتداخل في لغة HTML من أربعة أجزاء:

• الجزء الأول: يبدأ من اليسار وهو علامة أصغر من [⁦<⁩].
  
  
• الجزء الثاني: بعد الجزء الأول، وهو علامة المائلة للأمام forward slash [/].
  
  
• الجزء الأوسط: هو اسم العنصر [tag name].
  
  
• الجزء الرابع: هو الجزء الذي تنتهي به علامة الإغلاق، وهي علامة أكبر من [⁦>⁩].

محتوى العنصر المُتداخل content: يتكون محتوى العنصر المتداخل في لغة HTML من جزئين.

• نص text: نصوص أو فقرات نصية.
  
  
• عنصر جديد new element: سواء كان عنصرًا متداخلًا أو فارغًا.

تكون بعض عناصر HTML من نوع العناصر الفارغة empty elements، وهي العناصر التي يكون لها علامة فتح فقط [open tag]، وليس لها علامة إغلاق [close tag]، ولا يكون بداخلها أي محتوى أو عناصر داخلية.

مكونات العناصر الفارغة Empty Elements: تتكون العناصر الفارغة في لغة HTML من جزء واحد فقط.

• open tag: علامة الفتح، <tag name>.

مكونات علامة الفتح open tag: تتكون علامة الفتح [open tag] للعناصر الفارغة في لغة HTML من ثلاثة أجزاء.

• الجزء الأول: يبدأ من اليسار، وهي علامة أصغر من [⁦<⁩] .
  
  
• الجزء الأوسط: هو اسم العنصر [tag name] .
  
  
• الجزء الثالث: وهو الجزء الذي تنتهي به العلامة، وهو علامة أكبر من [⁦>⁩] .
  

اسم العلامة [tag name] هو النص الذي يظهر بين العلامتين [<] و [>] في لغة HTML، وهو جزء من العنصر المتداخل أو الفارغ nested or empty element.

في العناصر المتداخلة Nested Elements، توجد أسماء العلامات tag names كما يلي:

• العلامة الافتتاحية [open tag] توجد بين علامة الأصغر من [⁦<⁩] وعلامة الأكبر من [⁦>⁩].
• العلامة الإغلاقية [close tag] توجد بين علامة الأصغر من [⁦<⁩] وعلامة الأكبر من [⁦>⁩] مع إضافة علامة المائلة للأمام forward slash [/] بعد علامة الأصغر من [⁦<⁩].

أما في العناصر الفارغة [Empty Elements]، فتوجد أسماء العلامات [tag names] كما يلي:

• العلامة الافتتاحية [open tag] توجد بين علامة الأصغر من [⁦<⁩] وعلامة الأكبر من [⁦>⁩].

تخبر هذه العلامات متصفحات الويب [browsers] بكيفية عرض المحتوى بصريًا [render] بناءً على اسم العلامة. إذا قمنا بكتابة العلامة باسم [p] داخل عنصر، فمن المفترض أن يقوم المتصفح بعرض نص بشكل أولي، مع إمكانية استخدام [CSS] لاحقًا لتخصيص المظهر مثل حجم النص أو لونه.

فيما يلي مجموعات تعليمية بحسب الاستخدام، وليست تصنيف content categories الرسمي في معيار HTML:

• عناصر أساسية Main Elements: وهي العناصر التي تُكوِّن صفحة الويب أو مستند HTML.
  
  
• عناصر نصية Text Elements: وهي العناصر التي تبني العناوين [heading]، والفقرات النصية [paragraph]، والكلمات الدلالية [tags].
  
  
• عناصر تنسيق Formatting Elements: مثل strong للدلالة على الأهمية وem للتوكيد. أما حجم الخط والألوان والخلفيات فيضبطها CSS؛ الشكل الافتراضي وحده لا يحدد معنى العنصر.
  
  
• عناصر الوسائط المتعددة Multimedia Elements: مثل الصور [images]، والفيديوهات [videos]، والمقاطع الصوتية [audios]، والمؤثرات الحركية [animated effects]، والصور المتحركة [animated images].
  
  
• عناصر بيانات Data Elements: مثل الجداول [tables]، والقوائم المرقمة [ordered lists]، وغير المرقمة [unordered lists]، وقوائم الوصف [description lists].
  
  
• عناصر تنقُّل Navigation Elements: مثل الروابط التي تربط بين صفحات الويب والتي تكون عبارة عن نص متصل برابط خارجي أو داخلي مثل: <a href="https://www.example.com" target="_blank">Example</a>
  
  
• عناصر غير مرئية Hidden Elements: وهي العناصر التي تضيف بعض المعلومات للمتصفحات ومحركات البحث، أو تضيف معلومات برمجية لا يراها الزائر أو المستخدم مثل: <meta>
  
  
• عناصر النماذج Forms Elements: وهي العناصر التي يقوم المستخدم بإدخال البيانات فيها لكي يتم معالجتها على السيرفر، وتعطي نتائج فورية أو مقترنة بوقت.

• يمكننا استخدام العلامات بأحرف كبيرة أو أحرف صغيرة في لغة HTML، وذلك لأن العلامات ليست حساسة لحالة الأحرف.
  
  
• فمثلًا، إذا كان لدينا عنصر body، فيمكن كتابته BODY أو body دون حدوث أي مشكلة تقنية في كلا الحالتين.
  
  
• ولكن يُفضّل استخدام العلامات tags بحروف صغيرة، لأن هذا الأمر يعد شائعًا في لغة HTML بين مطوري مواقع الويب، وهو أسلوب شائع لتوحيد الكتابة، وليس شرطًا لصحة HTML.

يمكن كتابة العنصر HTML element في سطر أو عدة سطور بناءً على المحتوى الداخلي؛ مع الانتباه إلى أن المسافات والأسطر قد تؤثر في النص المعروض، خصوصًا بين العناصر السطرية أو عند استخدام pre وخصائص CSS التي تحفظ المسافات.

اقتراحات لتنسيق الشفرة وقراءتها، وليست شروطًا لصحتها:

• يُكتب عنصر HTML في سطر واحد إذا كان المحتوى نصيًا فقط، وإذا كان لا يزيد عن سطر واحد.
  
  
• يُكتب عنصر HTML في أكثر من سطر إذا كان المحتوى النصي يزيد عن سطر.
  
  
• يمكن كتابة عنصر HTML في عدة سطور إذا كان بداخله عناصر أخرى وليس نصوص فقط.

يُستحسن استخدام إزاحة قبل العنصر الداخلي في لغة HTML، لكي تكون العناصر الداخلية مقروءة، ونفصل بين العنصر الأب [parent] وبين العناصر الفرعية [children]. ويمكن عمل الإزاحة بمسافات أو بواسطة زر [tab] وهو أعلى زر [shift] على يسار لوحة المفاتيح.