<section aria-labelledby="marking-up-form">
  <h2 id="marking-up-form">Marking up an HTML form</h2>
  <ol>
    <li>
      To start with, make a local copy of our blank template file and the CSS
      for our payment form in a new directory on your computer.
    </li>
    <li>
      Apply the CSS to the HTML by adding the following line inside the HTML
      <code>&lthead></code>:
    </li>
  </ol>

  <pre data-type="html">
<code>
&lt;link href="payment-form.css" rel="stylesheet" />
</code>
</pre>

  <ol start="3">
    <li>
      Next, create your form by adding the outer <code>&lt;form></code> element:
    </li>
  </ol>

  <pre data-type="html">
<code>
&lt;form>

&lt;/form>
</code>
</pre>

  <ol start="4">
    <li>
      Inside the <code>&lt;form></code> tags, add a heading and paragraph to
      inform users how required fields are marked:
    </li>
  </ol>
  <footer>
    <p>
      <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form on MDN Web Docs</a>
    </p>
  </footer>
</section>
pre {
  background-color: #edecec;
  margin-left: 24px;
  padding: 12px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.