❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <main>

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

تعريفه

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


معلومة تقنية

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

كما أنه بدون تغيير طريقة ظهور هذا الوسم بواسطة كود CSS فإن المحتوى الذي تضعه بداخله سيظهر على سطر جديد لا أكثر.

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
26 12 21 16 7 مدعوم مدعوم 21 مدعوم 7 مدعوم

خصائصه

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

إستخدامه

في المثال التالي قمنا بوضع محتوى الصفحة الأساسي بداخل وسم <main>.

المثال الأول

<main>
<h1>Becomming a Frontend Developer</h1>
<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>
<article>
<h2>Is it hard to learn from the internet?</h2>
<p>Absolutely no, watching ready made tutorials and reading articles
is easier than learning from a college.</p>
<p>Don't believe people who say: "without college you can't
learn!".</p>
</article>
</main>
<main> <h1>Becomming a Frontend Developer</h1> <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> <article> <h2>Is it hard to learn from the internet?</h2> <p>Absolutely no, watching ready made tutorials and reading articles is easier than learning from a college.</p> <p>Don't believe people who say: "without college you can't learn!".</p> </article> </main>

جرب الكود


في المثال التالي قمنا بتحسين تصميم الصفحة بواسطة كود CSS.

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #f1f1f1;
}
main {
padding: 15px;
max-width: 700px;
margin: auto;
}
article {
margin-bottom: 20px;
}
h1 {
text-align: center;
padding: 20px 10px;
line-height: 36px;
}
h2 {
color: cadetblue;
padding: 12px 0;
line-height: 30px;
}
p {
line-height: 24px;
margin-bottom: 5px;
}
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; background: #f1f1f1; } main { padding: 15px; max-width: 700px; margin: auto; } article { margin-bottom: 20px; } h1 { text-align: center; padding: 20px 10px; line-height: 36px; } h2 { color: cadetblue; padding: 12px 0; line-height: 30px; } p { line-height: 24px; margin-bottom: 5px; }

جرب الكود

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

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

main {
display: block;
}
main { display: block; }

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

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

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

لا تقوم بوضع الوسم <main> بداخل <article> أو <aside> أو <footer> أو <header> أو <nav>.

عودة للدرس❯ ❮عودة للدرس