Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <section>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

المحتوى الذي يوضع بداخل الوسم <section> </section> يتم عرضه على سطر منفرد و لكن هذا ليس الهدف من استخدامه. بشكل عام أي قسم مستقل في الصفحة (مثل قسم عرض التعليقات, آخر المقالات إلخ..) يمكن وضعه بداخل بوسم من هذا النوع.


معلومة تقنية

مصمم الصفحة في العادة يستخدم وسوم <div> لتحديد أقسام الصفحة لهذا فإن الفكرة الأساسية من استخدام الوسم <section> هي تقليل استخدام الوسم <div> لا أكثر لأنه لا يوجد أي فرق بين استخدام هذا أو ذاك.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <section>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
5 12 4 11.1 5 مدعوم مدعوم 4 11.1 4.2 مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإضافة وسم <article> خارجي وضعنا فيه الموضوع الأساسي الذي نتحدث عنه.
الموضوع الأساسي قمنا بتقسيمه لقسمين بواسطة الوسم <section> كالتالي:

  • أول <section> يحتوي على فقرتين و كل فقرة موضوع بداخل <article>.
  • ثاني <section> يحتوي على تعليقين و كل تعليق موضوع بداخل <article>.


المثال الأول

<article>
<h1>Becomming a Frontend Developer</h1>
<section>
<article>
<h2>How to start?</h2>
<p>First thing, you have to study how to think like a programmer,
so you have to study something called Algorithms. Then you should
learn HTML, CSS, Javascript in the same order.</p>
</article>
<article>
<h2>How long it takes to become a frontend developer?</h2>
<p>In general, you need about a year to study all the basics and
to do some projects.</p>
</article>
</section>
<section>
<h2>Comments</h2>
<article>
<header>By: Bill Gates - 2020/11/16</header>
<p>You are totally right!</p>
</article>
<article>
<header>By: Tony Stark - 2020/7/12</header>
<p>I aggree with him!</p>
</article>
</section>
</article>
<article> <h1>Becomming a Frontend Developer</h1> <section> <article> <h2>How to start?</h2> <p>First thing, you have to study how to think like a programmer, so you have to study something called Algorithms. Then you should learn HTML, CSS, Javascript in the same order.</p> </article> <article> <h2>How long it takes to become a frontend developer?</h2> <p>In general, you need about a year to study all the basics and to do some projects.</p> </article> </section> <section> <h2>Comments</h2> <article> <header>By: Bill Gates - 2020/11/16</header> <p>You are totally right!</p> </article> <article> <header>By: Tony Stark - 2020/7/12</header> <p>I aggree with him!</p> </article> </section> </article>

جرب الكود


في المثال التالي قمنا بتحسين تصميم الصفحة بواسطة كود CSS و يفترض أن تركز فقط على أسلوب إظهار محتوى الوسم <aside> بشكل متميز عن باقي المحتوى.

المثال الثاني

h1 {
text-align: center;
}
section {
margin-top: 50px;
}
#content article {
margin-bottom: 30px;
}
#comments article {
background: #f1f1f1;
padding: 10px;
border-radius: 15px;
margin-bottom: 10px;
}
#comments article header {
font-weight: bold;
}
h1 { text-align: center; } section { margin-top: 50px; } #content article { margin-bottom: 30px; } #comments article { background: #f1f1f1; padding: 10px; border-radius: 15px; margin-bottom: 10px; } #comments article header { font-weight: bold; }

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

section {
display: block;
}
section { display: block; }

نصائح و ملاحظات

أنت لست مجبر على استخدام هذا الوسم لأنه لا يعطيك أي ميزة إضافية عن التي يقدمها لك الوسم <div> و هذا الأمر سبق و أشرنا إليه.

فائدة هذا الوسم هي فقط جعل كود الصفحة أسهل في القراءة قليلاً بالنسبة للمصمم حتى لا يكون أغلبها عبارة عن <div> بداخل <div> بداخل <div> إلخ..
هناك فائدة أخرى تلاحظها حين تستغل إسم الوسم <section> في التصميم و هي أنه يجعلك تستخدم أسماء كلاسات CSS أقل.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة