لا تتطلب كل العناصر وجود وسم النهاية/محتوى ، حيث لا تحتوي بعض عناصر HTML على [محتوى و وسم النهاية]،
عناصر HTML | بالعربية
كل شئ فى لغة HTML عبارة عن عنصر element، حيث يتكون عنصر HTML غالبًا من 3 أجزاء:
- وسم البدء (Start tag)
- وضع المحتوى (سواء كان نص/رابط/صورة/ …إلخ).
- وسم النهاية (End tag).
العناصر – HTML Elements
تتم كتابة معظم عناصر لغة HTML بوسم البداية (<h1>) ووسم النهاية (<h1/>)، مع إدراج المحتوى بينهما. وإذا لاحظت فى الرسمة السابقة ستجد أن وسم HTML يتكون من اسم العنصر (متشابهه فى كلًا من وسم البداية والنهاية) وتحيط به أقواس زاوية، ولكن يحتوي وسم النهاية فقط على شرطة مائلة بعد قوس زاوية الفتح (لتمييزها عن علامة البداية).
مثال للتوضيح (بعض عناصر لغة HTML):
<h1>My main Heading</h1>
<p>This is Paragraph.</p>
<span>This is Span.</span>
مخرجات الكود السابق
My main Heading
This is Paragraph.
This is Span.
العناصر الفارغة – Empty Elements
لا تتطلب كل العناصر وجود وسم النهاية/محتوى ، حيث لا تحتوي بعض عناصر HTML على [محتوى و وسم النهاية]، مثل عنصر <hr> (يٌستخدم لإدراك خط أفقى).
تسمى هذه العناصر بالعناصر الفارغة (أى ليس لها وسم نهاية)، ولا يمكن أن تحتوي على أي محتوى أو عناصر أخرى.
مثال للتوضيح (إدراك خط أفقى بين العنوان <h1> والفقرة <p>):
My main Heading
This is Paragraph.
العناصر الفارغة
- <b> يحدد فاصل أسطر.
- <hr>يحدد خط افقي في المحتوي لفصل الاقسام في HTML.
يمكن أن تكون العناصر الفارغة “مغلقة” في علامة الفتح (</ hr>).
العناصر المتداخلة – Nested HTML Elements
عناصر HTML المتداخلة (وضع عنصر داخل عنصر آخر)؛ يمكن أن تحتوي معظم عناصر HTML على أي عدد من العناصر داخل بعض (باستثناء العناصر الفارغة). تتكون جميع ملفات HTML من عناصر متداخلة.
يمكن أن يكون العنصر المتداخل (أو العنصر الفرعي)، عنصرًا أصليًا أيضًا إذا تم تضمين عناصر أخرى فيه.
مثال للتوضيح (بعض العناصر المتداخلة):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Elements</title>
</head>
<body>
<h1>HTML</h1>
<p>We Use <b>HTML</b> Language For Built Websites.</p>
</body>
</html>
مخرجات الكود السابق
HTML
We Use HTML Language For Built Websites.
شرح المثال السابق:
- يحدد إعلان <DOCTYPE!> معلومات عن نوع مستند HTML.
- العنصر <html> يحدد الملف بالكامل (هو حاوية لجميع عناصر HTML ولكل ما يظهر في مستند HTML، باستثناء إعلان الـ <DOCTYPE!>).
- كما يوجد داخل العنصر <html> عنصرين هم: <head> و <body>.
- يحدد العنصر <head> رأس المستند (هو حاوية للبيانات الوصفية ويتم وضعه بعد فتحة وسم الـ <html> وقبل فتحة وسم الـ <body>).
- داخل عنصر <head> عنصرين آخرين هم: <title>(يحدد عنوان المستند الذى يظهر فى علامة التبويب)، و <meta> (يحدد البيانات الوصفية لمستند HTML).
- يحدد العنصر <body> جسم أو المحتوى الرئيسي لمستند HTML.
- ستجد داخل عنصر الـ <body> عنصرين آخرين هم: < h1> (يحدد عنوان رئيسي) و <p> (يحدد فقرة).
لا تنسى إغلاق الوسم (End Tag): إذا نسيت قفلة الوسم الخاص بالعنصر الكود هيشتغل عادى، لكن هيدرك مشاكل فيما بعد، فكُن حَزر ولا تنسي إغلاق الوسم.
وسوم لغة HTML ليست حساسة لحالة الأحرف Case Sensitive (أى الوسم <H1> == <h1> ). لكن منظمة الـ W3C توصى بالأحرف الصغيرة.
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS