HTML: تخطيط HTML
تخطيط صفحة الويب يحدد "شكل" الصفحة — أين يذهب الرأس، وكيف يتم ترتيب شريط التنقل، وكيف يتم وضع منطقة المحتوى والشريط الجانبي. التخطيط الجيد يجعل الصفحات واضحة وقابلة للقراءة وقابلة للتكيف مع مختلف الشاشات.
1. ما هو تخطيط HTML
يقسم تخطيط HTML صفحة الويب إلى عدة مناطق وظيفية: الرأس (header) و شريط التنقل (nav) و منطقة المحتوى الرئيسي (main) و الشريط الجانبي (aside) و التذييل (footer). في الأيام الأولى، كان <div> مع CSS يُستخدم عادةً لتحقيق التخطيط:
▶ مثال
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
.nav { background: #333; color: #fff; padding: 10px; text-align: center; }
.nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
.main { flex: 3; padding: 20px; background: #f4f4f4; }
.sidebar { flex: 1; padding: 20px; background: #e4e4e4; }
.footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<div class="header"><h1>موقعي</h1></div>
<div class="nav">
<a href="#">الرئيسية</a>
<a href="#">من نحن</a>
<a href="#">الخدمات</a>
<a href="#">اتصل بنا</a>
</div>
<div class="container">
<div class="main"><h2>المحتوى الرئيسي</h2><p>هذه هي منطقة المحتوى الرئيسية للصفحة.</p></div>
<div class="sidebar"><h3>شريط جانبي</h3><p>ضع إعلانات أو روابط ذات صلة هنا.</p></div>
</div>
<div class="footer">© 2025 موقعي</div>
</body>
</html>
المثال أعلاه يستخدم <div> مع class و style لتنفيذ تخطيط كلاسيكي "رأس-محتوى-تذييل"، حيث ينقسم القسم الأوسط أيضًا إلى منطقة محتوى رئيسي وشريط جانبي. الجانب السلبي لهذا الأسلوب هو أن وسوم HTML نفسها لا تستطيع التعبير عن ما يمثله كل قسم — جميع الأقسام تستخدم <div>، مما يجعل الدلالات غير واضحة.
2. التخطيط الدلالي
قدم HTML5 وسومًا دلالية، لتحل محل <div> بوسوم ذات معنى:
<header>— منطقة الرأس<nav>— شريط التنقل<main>— المحتوى الرئيسي<section>— قسم المحتوى<aside>— الشريط الجانبي<footer>— منطقة التذييل
HTML
<!DOCTYPE html>
### ▶ مثال
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
nav { background: #333; color: #fff; padding: 10px; text-align: center; }
nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
main { flex: 3; padding: 20px; background: #f4f4f4; }
aside { flex: 1; padding: 20px; background: #e4e4e4; }
footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header><h1>موقعي</h1></header>
<nav>
<a href="#">الرئيسية</a>
<a href="#">من نحن</a>
<a href="#">الخدمات</a>
<a href="#">اتصل بنا</a>
</nav>
<div class="container">
<main>
<section>
<h2>أحدث المقالات</h2>
<p>هذا هو محتوى المقال.</p>
</section>
</main>
<aside>
<h3>روابط ذات صلة</h3>
<p>محتوى الشريط الجانبي.</p>
</aside>
</div>
<footer>© 2025 موقعي</footer>
</body>
</html>
💡 التخطيط الدلالي مقابل تخطيط Div: الوسوم الدلالية أكثر ملاءمة لمحركات البحث (SEO) والتقنيات المساعدة (قارئات الشاشة). تعطي محركات البحث أولوية لتحليل المحتوى داخل
<main>، ويمكن لقارئات الشاشة القفز مباشرة إلى <nav>. الكود أيضًا أوضح — تعرف ما يفعله كل قسم بمجرد النظر إلى أسماء الوسوم، دون الحاجة إلى التخمين من أسماء الفئات.
3. مقدمة إلى Flexbox
display: flex هو نموذج تخطيط مرن يوفره CSS3 يسمح للعناصر الابن بالترتيب تلقائيًا أفقيًا أو عموديًا. تحتاج فقط إلى تعيين display: flex على الحاوية، وستصطف العناصر الابن تلقائيًا. إليك شريط تنقل أفقي مبني باستخدام Flexbox:
HTML
<!DOCTYPE html>
<html>
### ▶ مثال
<head>
<style>
nav ul {
display: flex;
list-style: none;
padding: 0;
background: #333;
}
nav ul li a {
display: block;
padding: 14px 24px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background: #575757;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">من نحن</a></li>
<li><a href="#">الخدمات</a></li>
<li><a href="#">المدونة</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</body>
</html>
💡 Flexbox و Grid هما أساس تخطيط CSS الحديث. يتفوق Flexbox في الترتيب أحادي البعد (أفقي أو عمودي)، بينما يتفوق Grid في التخطيطات ثنائية البعد (التحكم في الصفوف والأعمدة في وقت واحد). يُوصى بدراسة دروس CSS بشكل منهجي بعد تعلم HTML لإتقان هاتين الأداتين القويتين.
تشمل خصائص Flexbox الشائعة justify-content (المحاذاة الأفقية)، align-items (المحاذاة الرأسية)، و gap (التباعد). شريط التنقل أعلاه يستخدم سطرًا واحدًا فقط — display: flex — لتحويل عناصر القائمة من الترتيب الرأسي إلى الأفقي، وهو أمر موجز جدًا.
❓ أسئلة شائعة
س ما الفرق بين
<div> والوسوم الدلالية (<header> و <nav> إلخ)؟ج
<div> هو حاوية عامة بدون معنى دلالي — فقط يلف المحتوى. الوسوم الدلالية تعبر صراحة عن الغرض من المحتوى — <header> هو رأس الصفحة، <nav> هو التنقل، <main> هو المحتوى الرئيسي، <aside> هو الشريط الجانبي، <footer> هو تذييل الصفحة. الفوائد: 1) الكود أكثر قابلية للقراءة；2) محركات البحث تفهم هيكل الصفحة بشكل أفضل；3) يمكن لمستخدمي قارئات الشاشة الانتقال السريع إلى مناطق محددة.س متى أستخدم Flexbox مقابل Grid؟
ج Flexbox أحادي البعد — مثالي لترتيب العناصر على محور واحد (أفقي أو عمودي)، مثل أشرطة التنقل وقوائم البطاقات وأزرار المجموعة. Grid ثنائي البعد — مثالي للتحكم في الصفوف والأعمدة في وقت واحد، مثل تخطيطات الصفحة ولوحات المعارض ومعارض الصور. القاعدة البسيطة: إذا كنت بحاجة للتحكم في صف أو عمود واحد فقط، استخدم Flexbox؛ إذا كنت بحاجة للتحكم في عدة صفوف وأعمدة، استخدم Grid. يمكن دمجهما.
س كيف أنشئ تخطيطًا ثلاثي الأعمدة (يسار-وسط-يمين)؟
ج الأسهل هو Flexbox: اضبط الحاوية الخارجية على
display: flex، اعطِ الأعمدة اليسرى واليمنى عروضًا ثابتة (مثل width: 200px)، واضبط العمود الأوسط على flex: 1 لملء المساحة المتبقية. الكود: <div style="display: flex"><div style="width: 200px">يسار</div><div style="flex: 1">وسط</div><div style="width: 200px">يمين</div></div>. للتصميم المتجاوب، استخدم flex-wrap: wrap لجعل الأعمدة تتراص تلقائيًا.📖 ملخص
- تخطيط HTML يقسم الصفحات إلى مناطق رأس وتنقل ومحتوى وشريط جانبي وتذييل
- يمكنك استخدام
<div>+ CSS لتحقيق أي تخطيط - الوسوم الدلالية (
<header>و<nav>و<main>و<aside>و<footer>) تحل محل<div>، وتعزز قابلية القراءة و SEO display: flexيرتب العناصر الابن أفقيًا، مثالي لأشرطة التنقل وقوائم البطاقات والسيناريوهات المماثلة
📝 تمارين
- تخطيط الصفحة الشخصية: استخدم الوسوم الدلالية لبناء صفحة شخصية تشمل الرأس (عنوان الموقع)، والتنقل (روابط التنقل)، والمحتوى الرئيسي (تقديم الذات + قسم الأعمال)، والشريط الجانبي (معلومات الاتصال)، والتذييل (إشعار حقوق النشر). استخدم
display: flexلجعل شريط التنقل أفقيًا. - تخطيط ثلاثي الأعمدة: استخدم
<div>لتنفيذ تخطيط ثلاثي الأعمدة (يسار-وسط-يمين) حيث يكون العمود الأوسط متكيفًا والأعمدة اليسرى واليمنى ثابتة عند 200px. (تلميح: استخدم خاصيةflexفي Flexbox للتحكم في النسب).
