علامات حاوية HTML

اكتشف كيفية استخدام علامات الحاوية في HTML واكتشف أيها تختار

علامات الحاوية

يوفر HTML مجموعة من علامات الحاوية. يمكن أن تحتوي هذه العلامات على مجموعة غير محددة من العلامات الأخرى.

نملك:

  • article
  • section
  • div

وقد يكون من المربك فهم الفرق بينهما.

دعونا نرى متى نستخدم كل واحد منهم.

article

تحدد علامة المقالة ملفشيءيمكن أن تكون مستقلة عن الآخرينأشياءفي الصفحة.

على سبيل المثال ، قائمة منشورات المدونة في الصفحة الرئيسية.

أو قائمة الروابط.

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>

نحن لا نقتصر على القوائم: يمكن أن تكون المقالة العنصر الرئيسي في الصفحة.

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>

داخلarticleعلامة يجب أن يكون لدينا عنوان (h1-h6) و

section

يمثل قسمًا من المستند. يحتوي كل قسم على علامة عنوان (h1-h6) ، ثم القسمجسم.

مثال:

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>

من المفيد تقسيم مقال طويل إلى مختلفأقسام.

لا ينبغي استخدامه كعنصر حاوية عام.divمصنوع من أجل هذا.

div

divهو عنصر الحاوية العامة:

<div>
	...
</div>

غالبًا ما تضيف ملفclassأوidإلى هذا العنصر ، للسماح بتصميمه باستخدام CSS.

نحن نستخدمdivفي أي مكان نحتاج فيه إلى حاوية ولكن العلامات الموجودة ليست مناسبة.

تُستخدم هذه العلامة لإنشاء الترميز الذي يحدد التنقل في الصفحة. إلى هذا نضيف عادةً ملفulأوolقائمة:

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>

aside

الasideيتم استخدام العلامة لإضافة جزء من المحتوى المرتبط بالمحتوى الرئيسي.

مربع حيث يمكنك إضافة اقتباس ، على سبيل المثال. أو شريط جانبي.

مثال:

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>

استخدامasideهي إشارة إلى أن الأشياء التي يحتوي عليها ليست جزءًا من التدفق المنتظم للقسم الذي يعيش فيه.

الheaderتمثل العلامة جزءًا من الصفحة يمثل المقدمة. يمكن أن تحتوي على سبيل المثال على علامة عنوان واحدة أو أكثر (h1-h6) ، سطر الوصف للمقالة ، صورة.

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</article>

main

الmainتمثل العلامة الجزء الرئيسي من الصفحة:

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

الfooterيتم استخدام العلامة لتحديد تذييل المقالة أو تذييل الصفحة:

<article>
 ....
	<footer>
    <p>Footer notes..</p>
  </footer>
</article>

تحميل مجانيكتيب HTML


المزيد من دروس html: