العناصر في لغة (html)

ماهي العناصر (Elements) ؟ هي المكونات الاساسية لبناء صفحة ويب، لكل عنصر وظيفة محددة في الصفحة، بعض العناصر وصفية والبعض الاخر عناصر مرئية تظهر للمستخدم، تتكون معظم عناصر (html) من وسمين وسم البداية ووسم النهاية للعنصر نفسه ،وبعض العناصر لاتحتوي علي وسمين في لغة(html) تكتفي بوسم واحد فقط ويطلق عليها أحيانا اسم العناصر الفارغة لاتحتوي علي محتوي ولكنها تقوم بوظيفة محددة في الصفحة، بعض عناصر في لغة (html) تكون علي شكل كتلة وتسمي بعناصر الكتلة اي أن العنصر منفصل عن العنصر الاخر في سطر جديد ينشئه العنصر تلقائيا ،وبعض العناصر تكون مضمنة وتسمي بالعناصر المضمنة وهذه يمكن إضافتها في نفس السطر الموجود فيه العنصر الاخر ولا تنشئ سطر جديد تلقائيا ، بعض العناصر لها دلالت لمحركات البحث لمساعدتها في فهم محتوي الصفحة، بعض العناصر لاتعمل الا اذا أضفنا لها سمة تحدد وظيفة العنصر في وسم البداية للعنصر ،تتميز عناصر (html) بالتداخل حيث يمكن للعنصر الواحد أن يحتوي بداخله عدة عناصر أخري.

أنواع العناصر

العناصر الوصفية

هي عناصر تحتوي علي معلومات وصفية تصف شيئا في الصفحة للمتصفحات او لمحركات البحث العالمية، وهذه العناصر لها قسم مخصص وهو عنصر الرأس <head>حيث تكون معظم هذه العناصر داخل هذا العنصر وهي عناصر كثيرة صحيح ان بعض العناصر الوصفية القليلة جدا يمكن أن تكون احيانا خارج عنصر الرأس مثل العنصر <style> وغيره ،لكن يظل عنصر الرأس هو المكان المخصص للعناصر الوصفية

العناصر المرئية

وهي عناصر تحتوي علي معلومات مرئية ظاهرة للمستخدم ، وهي كل مايراه المستخدم ويتفاعل معه في الصفحة، وهي عناصر كثيرة ويتم إختيارها علي حسب البيانات المطلوبة في صفحة ويب ، وهذه لها قسم مخصص أيضا في لغة (html)وهو عنصر الجسم <body>معظم هذه العناصر تكون داخل هذا العنصر.

عناصر الكتلة

وهي عناصر تكون علي شكل كتلة منفصلة عن العناصر المتواجدة بالقرب منها، وهي عناصر تبدأ بسطر جديد تلقائي عند إضافتها واذا كانت داخل عنصر نصي عند كتابتها تفصل النص وتنشئ سطر جديد وقد تقسم العنصر النصي لقسمين بسبب الفاصل الذي تنشئه، وهي عناصر عديدة منها عنصر الفقرة <p>وهذا العنصر يستخدم لإضافة فقرة نصية وهذه الفقرة تبدأ في سطر جديد دائما وكذلك عناصر العناوين <h2> وغيرها الكثير من عناصر الكتلة.

العناصر المضمنة

فهي عناصر يمكن كتابتها في سطر واحد داخل عنصر أخر او مع عنصر أخر ولاتنشئ سطرا جديدا مثال العنصر <span>او العنصر <strong>وغيرها العناصر.

العناصر الدلالية

من اسمها هي عناصر تحمل دلالات محددة لمحركات البحث العالمية ، تقوم هذه العناصر بمساعدة محركات علي فهم المحتوي الموجود في الصفحة وهي عناصر عديدة منها :
<article> و <aside> و <code> و <nav>وغيرها من العناصر.

العناصر الفارغة

وهي عناصر تحتوي علي وسم وأحد للعنصر ولايوجد فيها محتوي ، فهذه العناصر لديها وظائف محددة في الصفحة مثل:
العنصر <hr>فهو عنصر يرسم خط ولا يضيف شئ أخر
وكذلك العنصر <br>وهذا عنصر ينشئ سطر جديدا فقط لاغير وهناك عناصر أخري قليلة أيضا تحت مسمي العناصر فارغة

عناصر لا تعمل إلا بوجود سمة تحدد وظيفة العنصر

بالفعل هنالك عناصر في لغة (html)لا تعمل إلا بإضافة سمات تحدد وظيفة العنصر في الصفحة وهي عناصر كثيرة أمثلة:

عنصر الرابط <a>
<a>رابط</a>
اذا نظرنا الي المثال اعلاه سنجد ان العنصر لايعمل لماذا لانه يحتاج للسمةhrefليعمل وهذه السمة تحدد وظيفة الرابط، مرتبطة ارتباط وثيق بعنصر الرأبط انظر للمثال ادناه :
<a href="www.facebook.com"> رابط موقع فيس بوك </a>
بهذه الطريقة عند الضغط عليه الرابط سيعمل مباشرة ويقودك الي صفحة فيس بوك.
عنصر ميتا <meta> وهذا العنصر يحتاج لسمة تحدد وظيفة العنصر وهذا العنصر له سمات عديدة تفرق بين وظائفه في الصفحة فهو عنصر وصفي وكل سمة بداخله تحدد نوع البيانات الوصفية التي يحتويها وهذه أمثلة لسمات يمكن استخدامها في العنصر <meta>

السمة charset هي سمة تحدد وصفا للمتصفح يحدد ترميز الأحرف وتستخدم أكثر قيمة لهذه (UTF-8) ، نعم هناك قيم أخري مثل (UTF-16) وغيرها ولكن لا تستخدم كثيرا في صفحات الانترنت مثال :

<meta charset="UTF-8"/>

السمة viewport-fit وهذه السمة تعطي إشارة للمتصفح أن الصفحة متجاوبة مع الشاشات المختلف، وهناك الكثير من السمات الاخري مثل :content وname جميعا تعمل في العنصر<meta>

وهناك بعض العناصر الاخري التي تحتاج لسمة تحدد وظيفة العنصر غير ماذكرته اعلاه.