freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774e367417b2b2512aa0	Wrap Content in the article Element	0		التفاف المحتوى في المادة عنصر

Description

article عبارة عن عنصر آخر من عناصر HTML5 الجديدة التي تضيف المعنى الدلالي لترميزك. Article هي عنصر تقسيمي ، وتُستخدم لفك محتوى مستقل ومكتوب ذاتيًا. تعمل العلامة جيدًا مع إدخالات المدونات أو مشاركات المنتدى أو المقالات الإخبارية. عادةً ما يكون تحديد ما إذا كان المحتوى قائمًا بذاته أم لا ، ولكن هناك بعض الاختبارات البسيطة التي يمكنك استخدامها. اسأل نفسك ما إذا كنت قد أزلت كل السياق المحيط ، فهل سيظل هذا المحتوى منطقيًا؟ وبالمثل بالنسبة للنص ، هل سيتم تعليق المحتوى إذا كان في خلاصة RSS؟ تذكر أن الأشخاص الذين يستخدمون تقنيات مساعدة يعتمدون على ترميز منظم ، ذي معنى لغوي لفهم عملك بشكل أفضل. ملاحظة حول section div
عنصر section جديد أيضًا مع HTML5 ، وله معنى دلالي مختلف قليلاً عن article . article للمحتوى المستقل ، section لتجميع المحتوى ذي الصلة الموضوعية. يمكن استخدامها داخل بعضها البعض ، حسب الحاجة. على سبيل المثال ، إذا كان الكتاب هو article ، فكل فصل هو section . عند عدم وجود علاقة بين مجموعات المحتوى ، استخدم div .

<div> - محتوى المجموعات
<section> - مجموعات ذات صلة بالمحتوى
<article> - مجموعات محتوى مستقل بذاته

Instructions

استخدم Camper Cat علامات article لتغليف المشاركات في صفحة مدونته ، ولكنه نسي استخدامها في الجزء العلوي منها. غيّر علامة div لاستخدام علامة article بدلاً من ذلك.

Tests

tests:
  - text: يجب أن تحتوي شفرتك على ثلاث علامات <code>article</code> .
    testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
  - text: يجب ألا تحتوي شفرتك على أي علامات <code>div</code> .
    testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'

Challenge Seed

<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
  <div>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </div>

  <img src="samuraiSwords.jpeg" alt="">

  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>

  <img src="samuraiSwords.jpeg" alt="">

  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
</main>

Solution

// solution required

4.2 KiB Raw Blame History