58 lines
3.5 KiB
Markdown
58 lines
3.5 KiB
Markdown
|
---
|
||
|
|
id: 587d774e367417b2b2512a9f
|
||
|
|
title: Jump Straight to the Content Using the main Element
|
||
|
|
challengeType: 0
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: الانتقال مباشرةً إلى المحتوى باستخدام العنصر الرئيسي
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> قدم HTML5 عددًا من العناصر الجديدة التي توفر للمطورين مزيدًا من الخيارات مع تضمين ميزات إمكانية الوصول أيضًا. تتضمن هذه العلامات <code>main</code> ، <code>header</code> <code>footer</code> ، <code>footer</code> ، <code>nav</code> ، <code>article</code> ، <code>section</code> ، وغيرها. بشكل افتراضي ، يعرض المتصفح هذه العناصر بشكل مشابه <code>div</code> المتواضع. ومع ذلك ، فإن استخدامها عند الاقتضاء يعطي معنًى إضافيًا في ترميزك. يمكن أن يشير اسم العلامة وحده إلى نوع المعلومات التي يحتوي عليها ، مما يضيف معنىً دلاليًا إلى ذلك المحتوى. يمكن للتكنولوجيات المساعدة الوصول إلى هذه المعلومات لتوفير ملخص صفحة أفضل أو خيارات التنقل لمستخدميها. يتم استخدام العنصر <code>main</code> لتغليف المحتوى (الأساسي) ، ويجب أن يكون هناك واحد فقط لكل صفحة. من المفترض أن تحيط المعلومات المتعلقة بالموضوع المركزي لصفحتك. لا يُقصد به تضمين عناصر تكرر عبر الصفحات ، مثل روابط التنقل أو إعلانات البانر. تحتوي العلامة <code>main</code> أيضًا على ميزة <code>main</code> مضمّنة يمكن للتكنولوجيا المساعدة استخدامها للانتقال سريعًا إلى المحتوى الرئيسي. إذا رأيت في أي وقت مضى رابط "الانتقال إلى المحتوى الرئيسي" في أعلى الصفحة ، فإن استخدام علامة رئيسية تلقائيًا يعطي الأجهزة المساعدة تلك الوظائف. </section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions"> كامبر كات لديه بعض الأفكار الكبيرة لصفحة أسلحة النينجا. ساعده في إعداد ترميزه عن طريق إضافة علامات فتح وإغلاق <code>main</code> بين <code>header</code> <code>footer</code> (مغطاة في تحديات أخرى). احتفظ بالعلامات <code>main</code> فارغة في الوقت الحالي. </section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: يجب أن يكون <code>main</code> علامة <code>main</code> واحدة.
|
||
|
|
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
|
||
|
|
- text: و <code>main</code> يجب أن تكون العلامات بين إغلاق <code>header</code> العلامة وافتتاح <code>footer</code> العلامة.
|
||
|
|
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
<div id='html-seed'>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<header>
|
||
|
|
<h1>Weapons of the Ninja</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<footer></footer>
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|