العناصر Elements

بناء جملة عنصر HTML

العنصر (Elements) هو احدى مكونات صفحة HTML. وهو يمثل دلالات ، أو معنى. على سبيل المثال ، يمثل عنصر title عنوان صفحة الويب.
تتم كتابة معظم عناصر HTML بإستخدام وسمّي الفتح / البدء < > والإغلاق / النهاية </ > ، مع وجود محتوى بينهما.
يمكن أن تحتوي العناصر أيضًا على سمات attributes تحدد خصائصها الإضافية. على سبيل المثال ، سيتم كتابة فقرة ، يتم تمثيلها بواسطة العنصر p ، على النحو التالي:

html-element.png

العناصر الفارغة (Empty Elements)

العناصر الفارغة (وتسمى أيضًا العناصر ذاتية الإغلاق) وهي عناصر لا تحتوي محتوى ، مثل <br> الذي يمثل فاصل أسطر ، وهذا يعني أنه لا يمكنك كتابة :
<hr> some content < /hr>
أو
<br> some content < /br>
بعض العناصر الفارغة الشائعة الأخرى هي <img> ، <input> ، <link> ، <meta> ، <hr> ، إلخ.

مثال
تشغيل
  1. <p>This paragraph contains <br> a line break.</p>
  2. <img src="images/sky.jpg" alt="Cloudy Sky">
  3. <input type="text" name="username">

تداخل عناصر HTML

يمكن أن تحتوي معظم عناصر HTML بداخلها على عنصر او أكثر باستثناء العناصر الفارغة التي لا يمكن ان تحتوي بداخلها على عناصر.
تتكون العناصر عادة من وسوم وسمات ومحتوى أو عناصر أخرى.

يوضح المثال التالي بعض العناصر المتداخلة داخل العنصر <p>.

مثال
تشغيل
  1. <p>Here is some <b>bold</b> text.</p>
  2. <p>Here is some <em>emphasized</em> text.</p>
  3. <p>Here is some <mark>highlighted</mark> text.</p>
نصيحة:

وضع عنصر واحد داخل آخر يسمى التداخل Nesting.
يمكن أن يكون العنصر المتداخل ، والمسمى أيضًا عنصراً فرعياً(إبناً) Child element ، عنصرًا أساسيًا(اباً) parent element أيضًا في حالة تداخل عناصر أخرى داخله.

يجب أن تكون وسوم HTML متداخلة بالترتيب الصحيح. بحيث يتم إغلاقها بالترتيب العكسي لفتحها ، اي أنه يجب إغلاق اخر وسم تم فتحه أولاً.

مثال
تشغيل
  1. <p><strong>These tags are nested properly.</strong></p>
  2. <p><strong>These tags are not nested properly.</p></strong>

كتابة التعليقات في HTML

عادة ما تضاف التعليقات بهدف جعل الكود أسهل للفهم. مما قد يساعد المطور الآخر (أو أنت في المستقبل عندما تقوم بتحرير الكود المصدري) على فهم ما كنت تحاول القيام به عند كتابة كود صفحة الويب.وهنا يجب ان نأكد على انه لا يتم عرض التعليقات في متصفح الويب وانما توجد فقط في الكود المصدري.
يبدأ تعليق HTML بـ <!-- ، وينتهي بـ --> (من اليسار إلى اليمين) ، كما هو موضح في المثال أدناه:

مثال
تشغيل
  1. <!-- This is an HTML comment -->
  2. <!-- This is a multi-line HTML comment
  3. that spans across more than one line -->
  4. <p>This is a normal piece of text.</p>

يمكننا أيضًا جعل التعليق حول عنصر او اكثر من عناصر لغة HTML لغرض تصحيح الأخطاء ، كما هو موضح بالمثال التالي :

مثال
تشغيل
  1. <!-- Hiding this image for testing
  2. < img src="images/smiley.png" alt="Smiley">
  3. -->
« التالي السابق »