<!-- a single-line comment in HTML -->

<!--
  a multi-line comment in HTML (they are the same)
  These WILL be visible in the page source, 
  but not as content on the page.
-->


<h1>This is the <e>h1</e> element. It represents the <strong>most important</strong> piece of content on the page.</h1>

<p>A <e>p</e> element describes a paragraph of text. Paragraphs break up text into collected blocks of associated sentences. You may have noticed the <e>e</e> element here. We just made that up. It's so that we can style the element tag name and make it stand out. try your best to ignore them. Use the radio button above to highlight the different the elements of different display type!</p>


<h2>This is the <e>h2</e> element. It represents a level of importance one below the heading level 1</h2>

<p>You may use additional levels of heading to break the article into meaninful sections. You may have many equally important levels of heading depending on the subject matter and the manner in which the content was designed.</p>

<p>The <e>h1</e>, <e>p</e>, <e>h2</e>, <e>ul</e>, and <e>li</e> elements are all "Block" level elements. This means that they come into the world with a specific set of defaults. Generally, they are <code>display: block;</code>, and <code>width: 100%;</code>. They take up the full width of their parent element and generally stack like a layered cake.</p>

<p>There are also interactive form elements such as checkboxes and 'radio' buttons. These get a little more complex and so, for now - just know that most of them are inline elements to start out. The <e>form</e> elements helps describe user interactions and collects the various <e>input</e> elements together.</p>


<h2>This is and equally important <e>h2</e> element.</h2>

<p>Many times, there is an introduction-like paragraph below a heading to set the stage for the following content. You may have a list</p>

<ul>
  <li>Lists are great for listing things.</li>
  <li>Their name really says it all.</li>
  <li>The <e>ol</e> and <e>ul</e> elements describe an "ordered" or "unordered" list.</li>
  <li>The <e>li</e> element describes the list item itself.</li>
  <li>Each "child" element (in this case the <e>li</e>) will be formatted with 1 indent.</li>
  <li>These elements are "nested" and should appear so by way of formatting to help the humans keep track of things.</li>
</ul>


<h3>When you require a subheading for content within the level 2 context, you can use this level 3 heading. The <e>h3</e> element does the trick.</h3>

<p>Inside a block-level content element such as a <e>p</e>, you can employ the various "inline" elements. These are elements which come into being with a different set of default properties. <a href="#">Links</a> are inline. You can use <em>emphasis</em> or <strong>strong</strong> emphasis. You can use that <code>code</code> element you saw up above - and a whole bunch of other useful ways to describle parts of a heading or paragraph like the <mark>mark</mark> element.</p>

<p>You <em>could</em> even break up a sentence into arbitrary <e>span</e>s or text <span>like this</span> and <span>this</span> - even down to the very <span>c</span><span>h</span><span>a</span><span>r</span><span>a</span><span>c</span><span>t</span><span>e</span><span>r</span><span>s</span>.</p>

<p>"Inline" elements fall in a row and wrap around as needed.</p>


<h3>You could use an <e>h3</e> as a heading for a list of "Articles."</h3>

<ol>
  <li>
    <article>
      <h1>Lists aren't just about bullets.</h1>
      <p>They can be filled with whatever content you like.</p>
      <p>However, you must note that only list items belong as direct children of the list itself</p>
    </article>
  </li>
  
  <li>
    <article>
      <h1>You <em>could</em> have a list of forms.</h1>
      <p>You could have a list of lists!</p>
    </article>
  </li>
</ol>


<h2>Also! Remember that just because the browser creators decided that <e>h1</e> and <e>h2</e> elements were visually "large" and "emboldened" - doesn't mean they are. These elements are for describing. That does not mean <em>visually</em>.</h2>

<p>Pretend that you are writing your HTML for the computer. The content is for the human... but the markup is to describe it to the computer. What if Siri or Alexa needs to read it? They don't care how it looks. Write the HTML properly, and then worry about the human eyes in the CSS.</p>

<p>But hey, it'll never be perfect. You'll always end up taking on a few generic content divisions.</p>

<div>You may need a <e>div</e> element to describe a group of elements that need to be divided.</div>