HTMLElement
عناصر HTML: دليل شامل للمبتدئين
عناصر HTML (HTML Elements) هي اللبنات الأساسية لأي صفحة ويب. فهم هذه العناصر أمر بالغ الأهمية لأي شخص يرغب في تعلم تطوير الويب أو تصميم الويب. هذا المقال يقدم شرحًا مفصلاً لعناصر HTML للمبتدئين، مع التركيز على هيكلها ووظائفها وأهميتها.
ما هو عنصر HTML؟
ببساطة، عنصر HTML هو جزء من محتوى صفحة الويب الذي يحدد كيفية عرض هذا المحتوى في المتصفح. يتكون عنصر HTML من ثلاثة أجزاء رئيسية:
- علامة البداية (Start Tag): تحدد بداية العنصر. على سبيل المثال، `
` هي علامة بداية لفقرة.
- المحتوى (Content): هو النص أو الصور أو العناصر الأخرى التي تظهر داخل العنصر.
- علامة النهاية (End Tag): تحدد نهاية العنصر. غالبًا ما تكون مشابهة لعلامة البداية ولكن مع شرطة مائلة للأمام، على سبيل المثال ``.
بعض العناصر، مثل `
` (فاصل سطر) و `<img>` (صورة)، تعتبر عناصر فارغة (Empty Elements) ولا تحتوي على محتوى أو علامة نهاية.
هيكل عنصر HTML
يمكن تمثيل هيكل عنصر HTML بشكل عام كما يلي:
<tagname>المحتوى</tagname>
حيث 'tagname' هو اسم العنصر.
أنواع عناصر HTML
هناك العديد من أنواع عناصر HTML المختلفة، ولكل منها وظيفة محددة. إليك بعض الأمثلة الشائعة:
| **العنصر** | **الوظيفة** | **مثال** | `<html>` | يحدد جذر مستند HTML | `<html>...</html>` | `<head>` | يحتوي على معلومات حول المستند، مثل العنوان والبيانات الوصفية | `<head>...</head>` | `<title>` | يحدد عنوان المستند الذي يظهر في علامة تبويب المتصفح | `<title>صفحتي الأولى</title>` | `<body>` | يحتوي على المحتوى المرئي لصفحة الويب | `<body>...</body>` | `` - ` |
يحدد عناوين مختلفة المستويات | `عنوان رئيسي` |
` ` |
يحدد فقرة نصية | ` هذه فقرة. ` |
`<a>` | يحدد رابطًا تشعبيًا | `<a href="https://www.example.com">رابط</a>` | `<img>` | يحدد صورة | `<img src="image.jpg" alt="وصف الصورة">` | `
|
يحدد قائمة غير مرتبة | `
|
`
|
يحدد قائمة مرتبة | `
|
` |
يحدد عنصر قائمة | ` |
` ` |
يحدد قسمًا أو حاوية عامة | ` ... `
|
`` | يحدد جزءًا مضمنًا من النص | `...` | ``
السمات (Attributes)السمات (Attributes) هي معلومات إضافية حول عناصر HTML. يتم تحديدها داخل علامة البداية للعنصر. على سبيل المثال: <a href="https://www.example.com" target="_blank">رابط</a> في هذا المثال، `href` و `target` هما سمتان. `href` تحدد عنوان URL الذي يشير إليه الرابط، و `target` تحدد كيفية فتح الرابط (في هذه الحالة، في علامة تبويب جديدة). عناصر HTML الهيكليةهناك عناصر HTML مصممة لتحديد هيكل صفحة الويب. هذه العناصر تساعد المتصفحات ومحركات البحث على فهم المحتوى. تشمل هذه العناصر:
أهمية عناصر HTML في تحسين محركات البحث (SEO)استخدام عناصر HTML بشكل صحيح أمر بالغ الأهمية لـ SEO. تساعد محركات البحث على فهم هيكل ومحتوى صفحة الويب، مما يؤدي إلى تصنيفات أعلى في نتائج البحث. استخدام العلامات الهيكلية بشكل مناسب (مثل ` |
