exercises/html-basics.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Text Elements</title>
  </head>
  <body>
    <h1>Text elements</h1>
    <h2>The web is mostly text, so start with these!</h2>
    <hr />
    <h2>Heading Elements</h2>
    <p>HTML supports six levels of headings:</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <br />
    <h2>Body Text</h2>
    <p>
      This is the humble paragraph tag, possibly the element you will encounter
      the most.
    </p>
    <p>
      Paragraph text, like headings, is a <strong>block-level</strong> element.
      Typically these elements will expand to fill all available space.
    </p>
    <p>
      There is another category of elements, called <strong>inline</strong>
      elements. The bold text you see here is one example, it's generated by
      a &lt;strong&gt; tag.
    </p>
    <p>
      How to you write the name of a tag instead of creating the tag in place?
      HTML allows you to use a special code starting with the &amp; character to
      display these characters literally. Take a look at the source code of this
      page to see how it's done.
    </p>
    <p>
      Common inline values include:
      <ul>
        <li>&lt;strong&gt;: <strong>for bold text</strong></li>
        <li>&lt;em&gt;: <em>for emphasis</em></li>
        <li>&lt;span&gt;: <span>Span tags for arbitrary snippets</span></li>
        <li>
          &lt;sup&gt; and &lt;sub&gt; for <sup>superscript</sup> and
          <sub>subscript</sub>, respectively.
        </li>
        <li>There are
          <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">
            Many more!
          </a>
        </li>
      </ul>
    </p>
    <p>
      As you may have noticed by now, elements (both span and block) can appear
      nested inside one another. The paragraph above has a list element inside
      of it &mdash; this is totally fine!
    </p>
    <br />
    <h2>List elements</h2>
    <p>Speaking of lists, here are a few examples:</p>
    <h3>Ordered Lists</h3>
    <ol>
      <li>Use these when you need numbers, or when order is meaningful</li>
      <li>You can create this using the &lt;ol&gt; tag.</li>
      <li>Inside should go one or more list items (&lt;li&gt; tags).</li>
    </ol>
    <h3>Unordered lists</h3>
    <ul>
      <li>
        Use an unordered list when you don't want numbers, or when order is not
        as meaningful.
      </li>
      <li>You use the &lt;ul&gt; tag to create these elements.</li>
      <li>
        Unordered lists are often used in many other contexts as well, like
        in a site's navigational menus.
      </li>
    </ul>
    <h3>Definition Lists</h3>
    <dl>
      <dt>&lt;dt&gt; Tag</dt>
      <dd>
        Represents a definition; this &lt;dd&gt; tag represents its description.
      </dd>
    </dl>
  </body>
</html>