عناصر HTML: الدليل الشامل

هنا هتتعلم كل التاجز اللي ممكن تحتاجها عشان تبني هيكل موقع احترافي.

1. الميتا داتا (وراء الكواليس)

دي العناصر اللي بتعرف المتصفح "إيه الصفحة دي؟" من غير ما تظهر للمستخدم بشكل مباشر.

العنصر	شرحه بالبلدي
`<html>`	ده "الأب الكبير" اللي بيشيل الموقع كله جواه.
`<head>`	صندوق المعلومات (العنوان، ملفات الـ CSS، والميتا).
`<title>`	الاسم اللي بيظهر فوق في المتصفح.
`<description>`	وصف قصير للصفحة (مهم للبحث او تعريف).
`<meta>`	وصف الصفحة للبحث، واللغة، وتظبيط الموبايل.
`<link>`	عشان نربط ملف CSS خارجي أو صورة الـ Favicon.
`<style>`	لو عايز تكتب كود CSS جوه صفحة الـ HTML نفسها.

2. تقسيم هيكل الصفحة (Layout) 🏠

بدل ما تستخدم div في كل حاجة، الـ HTML5 بيقدملك عناصر "دلالية" بتفهم محركات البحث تقسيم موقعك.

العنصر	استخدامه
`<header>`	البار اللي فوق (لوجو وقايمة).
`<nav>`	منطقة لينكات التنقل.
`<main>`	ده المكان اللي فيه محتوى الصفحة الأساسي (بيتحط مرة واحدة بس).
`<section>`	جزء مستقل من الصفحة بيتكلم عن موضوع معين.
`<article>`	محتوى ينفع يتنشر لوحده (زي بوست فيسبوك أو مقال).
`<aside>`	سايد بار (معلومات جانبية مالهاش علاقة قوية بالمحتوى).
`<footer>`	منطقة الحقوق والروابط اللي في آخر الصفحة.

3. كتابة المحتوى (Text & Lists) 📝

العنصر	شرحه
`<p>`	فقرة عادية.
`<h1>` إلى `<h6>`	عناوين بأحجام مختلفة (h1 هو الأهم).
`<ul>` & `<ol>`	قوائم (منقطة أو مترقمة).
`<blockquote>`	لو بتقتبس كلام طويل من حد تاني.
`<hr>`	خط أفقي بيفصل بين المواضيع.
`<pre>`	بيعرض الكلام زي ما هو مكتوب بالظبط (مهم للأكواد).

4. التنسيق جوه السطر (Inline Elements) ✨

العنصر	تأثيره
`<a>`	اللينك السحري (بيوديك في أي مكان).
`<strong>`	بيخلي الكلام مهم وعريض (Bold).
`<em>`	كلام مائل للتركيز (Emphasis).
`<mark>`	بيعمل Highlight (زي القلم الفسفوري).
`<code>`	عشان تعرض حتة كود صغيرة جوه سطر.
`<br>`	بينزل سطر جديد (إجباري).

جرب بنفسك (Live Playground) 🛠️

اكتب كودك هنا وشوف النتيجة فوراً. الرموز هتتكتب بالترتيب الصح (LTR).