Skip to content
Laviyx Learn

Try

HTML Basics Practice

Practise HTML document structure, headings, paragraphs, text formatting, links, images and lists. Each solution is rendered live so you can compare it with yours.

Beginner7 problemsUpdated

Review first: Your First Web Page, Headings, Text Formatting, Links, Images, Ordered and Unordered Lists

  1. 1.A complete page skeleton

    Beginner

    Write a complete HTML document in English with the title My Recipes, a correct character encoding and viewport, and a body containing a main heading My Recipes and one paragraph.

    Show hint

    Start with <!DOCTYPE html>, then <html lang="en"> with a <head> (charset, viewport, title) and a <body>.

    Show solution
    HTML
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Recipes</title>
  </head>
  <body>
    <h1>My Recipes</h1>
    <p>Simple vegetarian recipes I cook every week.</p>
  </body>
</html>
    Result

    The title appears in the browser tab, not on the page. lang, charset and the viewport tag belong on every page.

  2. 2.A correct heading outline

    Beginner

    Mark up a page about a trip with the main title Trip to Goa, two sections Day 1 and Day 2, and under Day 2 two subsections Morning and Evening. Add one short paragraph under each subsection.

    Show hint

    One <h1>, then <h2> for the days and <h3> for parts of a day. Do not skip levels.

    Show solution
    HTML
    <h1>Trip to Goa</h1>
<h2>Day 1</h2>
<p>We arrived by train and walked on the beach.</p>
<h2>Day 2</h2>
<h3>Morning</h3>
<p>We visited an old fort.</p>
<h3>Evening</h3>
<p>We watched the sunset.</p>
    Result

  3. 3.Meaningful text formatting

    Beginner

    Write a paragraph that says "Warning: the shop closes at 6 pm today." where "Warning:" is marked as important, and a second paragraph telling the user to press Ctrl and S to save, marking the keys correctly. Finally, show the formula H₂O using the correct element for the 2.

    Show hint

    Use <strong> for importance, <kbd> for keys, and <sub> for subscript.

    Show solution
    HTML
    <p><strong>Warning:</strong> the shop closes at 6 pm today.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Water is H<sub>2</sub>O.</p>
    Result

  4. 5.An image with a caption

    Beginner

    Show the image /lesson-assets/landscape-300.svg (300 by 200 pixels) with suitable alt text, inside a figure with the caption "Figure 1: The hills in the morning." Make the image load lazily.

    Show hint

    Use <figure>, <img> with alt, width, height and loading, and <figcaption>.

    Show solution
    HTML
    <figure>
  <img src="/lesson-assets/landscape-300.svg" alt="Green hills under a blue sky with a yellow sun" width="300" height="200" loading="lazy">
  <figcaption>Figure 1: The hills in the morning.</figcaption>
</figure>
    Result

  5. 6.A nested list of steps

    Beginner

    Write the steps to make lemonade as a numbered list: "Squeeze the lemons", "Mix with water and" followed by a bulleted sub-list of "sugar" and "a pinch of salt", then "Serve cold".

    Show hint

    The inner <ul> goes inside the second <li>, after its text.

    Show solution
    HTML
    <ol>
  <li>Squeeze the lemons</li>
  <li>Mix with water and
    <ul>
      <li>sugar</li>
      <li>a pinch of salt</li>
    </ul>
  </li>
  <li>Serve cold</li>
</ol>
    Result

  6. 7.Displaying HTML code as text

    Beginner

    Display this exact text on a page, in a monospace font: Use <br> for line breaks & <hr> for a change of topic.

    Show hint

    Escape < as &lt;, > as &gt; and & as &amp;, and wrap the text in <code>.

    Show solution
    HTML
    <p><code>Use &lt;br&gt; for line breaks &amp; &lt;hr&gt; for a change of topic.</code></p>
    Result
← All practice setsLearn HTML course →