عناصر المستوى الكتلي والعناصر المضمنة في HTML
تشرح هذه المقالة عناصر المستوى الكتلي والعناصر المضمنة في HTML.۔
هذا يشرح الفروق بين عناصر المستوى الجدولي والعناصر المضمنة ، وكذلك العناصر الرئيسية لكل من المستويات والعناصر المضمنة.۔
YouTube Video
العناصر على مستوى الكتلة والعناصر المضمنة
يحتوي HTML على فئتين رئيسيتين من العناصر تحدد كيفية عرضها على الشاشة: 'عناصر المستوى الكتلي' و 'العناصر المضمنة'۔ تؤدي هذه العناصر دورًا مهمًا في تخطيط الصفحة وتؤثر بشكل مباشر على كيفية وضعها۔ هنا، سنوضح بالتفصيل خصائص واستخدام كل عنصر۔
ما هو عنصر المستوى الكتلي؟
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>تشغل عناصر المستوى الكتلي عادةً العرض الكامل للصفحة وتظهر في سطر منفصل عن العناصر الأخرى۔ يمكن أن تحتوي هذه العناصر على عناصر مستوى كتلي أو عناصر مضمنة داخلها وتحدد الهيكل الأكبر للمستند۔
الميزات:
- تبدأ العناصر في سطر جديد وتتمدّد لاحتلال أكبر قدر ممكن من العرض (عادة العرض الكامل للعنصر الرئيسي)۔
- يتم فصلها عن العناصر الكتلية الأخرى عموديًا، مع وجود هوامش بينهما۔
- يمكنها أن تحتوي على عناصر أخرى على مستوى البلوك أو عناصر داخل الخط بداخلها.۔
هنا، يتم استخدام العناصر الكتلية التالية:۔
- يتم استخدام علامة
<div>بشكل شائع لبناء التخطيطات۔ - تُستخدم علامة
<p>لتعريف فقرة۔ - تُستخدم العناصر من
<h1>إلى<h6>لتعريف العناوين۔<h1>هو العنوان الأكبر، و<h6>هو الأصغر۔ - يُنشئ وسم
<ul>قائمة غير مرتبة.۔ - يُنشئ وسم
<ol>قائمة مرتبة.۔ - تحدد علامة
<section>قسمًا داخل مستند۔
ما هو العنصر المضمن؟
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>تُوضع العناصر المضمنة في نفس السطر مع العناصر الأخرى وعادةً ما تشغل عرضًا بحجم محتواها فقط۔ يتم التعامل مع هذه العناصر كجزء من النص، وعلى عكس العناصر ذات المستوى الكتلي، لا تشغل السطر بالكامل۔
الميزات:
- تظهر العناصر على نفس الخط وتوضع جنبًا إلى جنب مع العناصر الداخلية الأخرى.۔
- يُحدد العرض بمحتوى العنصر (النص أو الصور)۔
- يمكن تضمينها داخل عناصر المستوى الكتلي، لكن العكس غير ممكن۔
هنا، يتم استخدام العناصر المضمنة التالية:۔
- تُستخدم علامة
<span>لتأكيد جزء من النص بنمط محدد.۔ - تحدد علامة
<a>ارتباطًا تشعبيًا۔ - علامة
<img>هي عنصر يُستخدم لتضمين الصور۔ <strong>يبرز النص المهم (عادة ما يظهر بالخط العريض)۔<em>تشير إلى النص المؤكد (عادة ما يظهر بالخط المائل)۔
الاختلافات بين عناصر المستوى الكتلي والعناصر المضمنة
- طريقة العرض: يتم عرض عناصر المستوى الكتلي في سطر جديد وتشغل عرض الصفحة بالكامل، بينما تُعرض العناصر المضمنة في نفس السطر مع العناصر الأخرى ويتم تحديد عرضها بواسطة محتواها۔
- كيفية التعامل مع العناصر الداخلية: يمكن لعناصر المستوى الكتلي أن تحتوي على عناصر كتلية أخرى بالإضافة إلى العناصر المضمنة، لكن العناصر المضمنة لا يمكنها احتواء عناصر المستوى الكتلي۔
- دور التخطيط: يتم استخدام عناصر المستوى الكتلي بشكل أساسي لإنشاء هيكل تخطيط الصفحة، بينما تحدد العناصر المضمنة العناصر الصغيرة مثل النصوص والروابط۔
النقاط الرئيسية للتفريق
إنشاء التخطيطات: استخدم عناصر المستوى الكتلي مثل <div>، <section>، <article> لتحديد مقاطع كبيرة وكتل محتوى۔
تزيين النصوص والروابط: استخدم العناصر المضمنة مثل <span>، <a>، <strong>، <em> لتزيين أجزاء من النصوص أو إضافة روابط۔
مزج العناصر ذات المستوى الكتلي والمضمنة
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- تُستخدم عناصر المستوى الكتلي مثل
<main>و<header>و<section>وتُعرض عادةً على سطر جديد، وتشغل العرض الكامل لعنصرها الأصلي.۔ - تُستخدم عناصر المضمن مثل
<a>,<strong>,<span>, و<img>، ويتم وضعها داخل السطر دون شغل العرض الكامل داخل عناصر المستوى الكتلي.۔
تضمين العناصر المضمنة داخل العناصر ذات المستوى الكتلي يعد نمطًا شائعًا۔ على سبيل المثال، من الشائع تضمين الروابط (<a>) أو التأكيد (<strong>) داخل فقرة (<p>)۔ ومع ذلك، نظرًا لأنه لا يمكن تضمين عناصر المستويات الكتلية داخل عناصر المستوى السطري، فمن المهم استخدامها بشكل مناسب۔
الملخص
عناصر المستوى الكتلي وعناصر المستوى السطري هما نوعان أساسيان من عناصر HTML، ولكل منهما دوره الخاص۔ تشكل عناصر المستوى الكتلي أساس تخطيط الصفحة، بينما تُستخدم عناصر المستوى السطري لتزيين وتعديل المحتوى الدقيق بداخلها۔ فهم واستخدام هذين النوعين من العناصر بشكل صحيح يمكّن من كتابة أكواد HTML بكفاءة۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔