الإنجليزية
الفرنسية
العربية
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
أساسيات HTML
تاريخ الرفع :
منذ 4 أشهر
آخر تحديث :
منذ 4 أشهر
beginner
ابدأ الاختبار
من البنية إلى الإتقان
تستطيع بالفعل بناء صفحة بسيطة. لنتعرّف الآن على العناصر التي ستستخدمها يوميًا — وكيفية استعمالها بشكل صحيح.
العناصر الأكثر استخدامًا
| العنصر | الغرض | مثال |
|---|---|---|
<h1>–<h6> | العناوين، من الأهم إلى الأقل | <h1>عنوان</h1> |
<p> | فقرة نصية | <p>مرحبًا</p> |
<a> | رابط إلى صفحة أخرى | <a href="...">رابط</a> |
<img> | صورة | <img src="..." alt="..."> |
<ul>/<li> | قائمة نقطية | <li>عنصر</li> |
الخصائص: معلومات إضافية
توضع الخصائص داخل الوسم الافتتاحي لضبط العنصر. أكثرها استخدامًا href (وجهة الرابط) وsrc/alt (الصورة ووصفها النصي).
<a href="https://devosoft.com">زيارة Devosoft</a>
<img src="logo.png" alt="شعار Devosoft">اكتب نص alt دائمًا
تصف الخاصية alt الصورة لمستخدمي قارئات الشاشة، وتظهر إذا فشل تحميل الصورة. لا تهملها أبدًا.
HTML الدلالي
بدلًا من تغليف كل شيء داخل <div> مجهولة، استخدم وسومًا تصف دورها. الترميز الدلالي أسهل قراءةً، وأفضل لمحركات البحث، وأكثر إتاحةً للجميع.
<header>...ترويسة الموقع...</header>
<nav>...القائمة...</nav>
<main>
<article>...المحتوى الرئيسي...</article>
</main>
<footer>...تذييل الموقع...</footer>تجنّب «حساء الـ div»
الصفحة المؤلَّفة من <div> فقط لا تُخبر المتصفح بأي معنى. فضّل <header> و<nav> و<main> و<section> و<footer> كلما أمكن.
أول نموذج (form)
تجمع النماذج مدخلات المستخدم. ينبغي ربط كل حقل بوسم <label> من أجل الوضوح وإتاحة الوصول.
<form>
<label for="email">البريد الإلكتروني</label>
<input id="email" type="email" name="email">
<button type="submit">اشترك</button>
</form>ما الفرق بين <section> و<div>؟
يجمع
<section> محتوى مترابطًا له معنى، بينما <div> حاوية محايدة تُستخدم غالبًا للتنسيق.هل يمكن وضع أكثر من <h1> في الصفحة؟
الأفضل
<h1> رئيسي واحد لكل صفحة، ثم <h2>–<h6> لبناء تسلسل واضح.هل لترتيب الخصائص أهمية؟
لا — الترتيب لا يهم، لكن حافظ على وضوحها واتساقها.
