HTML challenges

Practice problem statements with input format, output format, constraints and solutions.

beginner

HTML Introduction challenge

Build a small solution that uses HTML Introduction in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">HTML Introduction</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core html introduction pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">HTML Introduction solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Document Structure challenge

Build a small solution that uses Document Structure in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Document Structure</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core document structure pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Document Structure solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Elements challenge

Build a small solution that uses Elements in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Elements</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core elements pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Elements solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Attributes challenge

Build a small solution that uses Attributes in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Attributes</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core attributes pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Attributes solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Headings challenge

Build a small solution that uses Headings in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Headings</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core headings pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Headings solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Paragraphs challenge

Build a small solution that uses Paragraphs in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Paragraphs</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core paragraphs pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Paragraphs solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Images challenge

Build a small solution that uses Images in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Images</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core images pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Images solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Lists challenge

Build a small solution that uses Lists in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Lists</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core lists pattern before polishing the final output.

Solution

<section aria-labelledby="lesson-title">
  <h1 id="lesson-title">Lists solution</h1>
  <p>Use clear HTML so browsers, users and search engines understand the page.</p>
  <a href="/learn/tutorials/html">Continue learning HTML</a>
</section>
beginner

Tables challenge

Build a small solution that uses Tables in HTML and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

  • Keep the solution under 60 lines.
  • Use descriptive names.
  • Do not depend on hidden external services.

Starter code

<table>
  <caption>Monthly orders</caption>
  <thead><tr><th>Customer</th><th>Total</th></tr></thead>
  <tbody><tr><td>Asha</td><td>$59</td></tr></tbody>
</table>

Test cases

  • basic sample - valid processed result
  • empty or small sample - safe fallback result

Hint

Focus on the core tables pattern before polishing the final output.

Solution

<table>
  <caption>Monthly orders</caption>
  <thead><tr><th>Customer</th><th>Total</th></tr></thead>
  <tbody><tr><td>Asha</td><td>$59</td></tr></tbody>
</table>