<header><h1>Basic HTML Cheatsheet</h1></header>
    <main>
      <section id="basic-tags">
        <h2 class="section-header" >Basic tags</h2>
        <table>
          <thead>
            <tr>
              <th>Tag</th>
              <th>Name</th>
              <th>Description</th>
              <th>Example</th>
            </tr>
          </thead>
          <tbody>
             <!-- html tag -->
            <tr>
              <td><code>&lt;html&gt;<code></td>
              <td>Html</td>
              <td>Creates an HTML document</td>
              <td class="code-segment" rowspan="4">
                <pre>
                    <code>
                        &lt;html&gt;
                            &lt;head&gt;
                                //page information 
                                &lt;title&gt;Youtube&lt;/title&gt;      
                            &lt;/head&gt;
                            &lt;body&gt;
                                //HTML code
                            &lt;/body&gt;
                        &lt;/html&gt;
                    </code>
                </pre>
              </td>
            </tr>
            <!-- head tag -->
            <tr>
              <td><code>&lt;head&gt;<code></td>
              <td>Head</td>
              <td>Sets off the title & other info that isn't displayed.</td>
            </tr>
            <!-- body tag -->
            <tr>
              <td><code>&lt;body&gt;<code></td>
              <td>Body</td>
              <td>Sets off the visible portion of the document.</td>
            </tr>
            <!-- title tag -->
            <tr>
              <td><code>&lt;title&gt;<code></td>
              <td>Title</td>
              <td>
                    Puts name of the document in the title bar; when bookmarking
                    pages, this is what is bookmarked.
                  
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      <section id="text-tags">
        <h2 class="section-header">Text Tags</h2>
        <table>
          <thead>
            <tr>
              <th>Tag</th>
              <th>Name</th>
              <th>Description</th>
              <th>Example</th>
              <th>Result</th>
            </tr>
          </thead>
          <!-- h tags -->
          <tr>
              <td>
                  <code>&lt;h1&gt; &lt;/h1&gt; --&gt; &lt;h6&gt; &lt;/h6&gt;</code>
              </td>
              <td>Heading Tag</td>
              <td>Creates headlines -- h1 being the largest to h6 being the smallest.</td>
              <td><pre><code>
&lt;h1&gt;Travel blog&lt;/h1&gt;

&lt;h2&gt;Travel blog&lt;/h2&gt;

&lt;h3&gt;Travel blog&lt;/h3&gt;

&lt;h4&gt;Travel blog&lt;/h4&gt;

&lt;h5&gt;Travel blog&lt;/h5&gt;

&lt;h6&gt;Travel blog&lt;/h6&gt;
                </code></pre>
              </td>
              <td>
                <h1>Travel blog</h1>
                <h2>Travel blog</h2>
                <h3>Travel blog</h3>
                <h4>Travel blog</h4>
                <h5>Travel blog</h5>
                <h6>Travel blog</h6>
              </td>
          </tr>
          
          <!-- p tags -->
          <tr>
              <td><code>&lt;p&gt;</code></td>
              <td>Paragraph tag</td>
              <td>This tag is used to define a Paragraph</td>
              <td><code>&lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci quisquam repudiandae labore, voluptatibus eum corporis? Ut enim praesentium voluptatum porro!&lt;/p&gt;</code></td>
              <td><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci quisquam repudiandae labore, voluptatibus eum corporis? Ut enim praesentium voluptatum porro!</td>
          </tr>

          <!-- strong tag -->
          <tr>
              <td>
                  <code>&lt;strong&gt;</code>
              </td>
              <td>Strong Importance/Bold</td>
              <td>This HTML element indicates that its contents have strong importance typically rendering the contents in bold type.</td>
              <td><code>The event will be this &lt;strong&gt;Friday!&lt;/strong&gt;</code></td>
              <td><p>The event will be the <strong>Friday!</strong></td>
          </tr>

          <!-- emphasis tag -->
          <tr>
              <td><code>&lt;em&gt;</code></td>
              <td>Emphasis</td>
              <td>This element marks text that has stress emphasis</td>
              <td><code>His most famous work was, &lt;em&gt;"Star Wars VI Return of the Jedi".&lt;/em&gt;</code></td>
              <td><p>His most famost work was, <em>"Star Wars VI Return of the Jedi".</em></td>

          </tr>
        
        </table>
      </section>

      <section id="list-tags">
          <h2 class="section-header">List Tags</h2>

          <table>
            <thead>
                <tr>
                  <th>Tag</th>
                  <th>Name</th>
                  <th>Description</th>
                  <th>Example</th>
                  <th>Result</th>
                </tr>
            </thead>
            <tbody>
                <!-- ordered list -->
                <tr>
                    <td><code>&lt;ol&gt;</code></td>
                    <td>Ordered list</td>
                    <td><p>This defines an ordered list. An ordered list can be numerical or alphabetical</td>
                    <td class="code-segment" rowspan="3"> <pre><code>
                 &lt;h3&gt;Chores&lt;/h3&gt;
                 &lt;ol&gt;
                     &lt;li&gt;Clean room&lt;/li&gt;
                     &lt;li&gt;Take out Garbage&lt;/li&gt;
                     &lt;li&gt;Feed cats&lt;/li&gt;
                 &lt;/ol&gt;
        
                 &lt;h3&gt;Favorite food&lt;/h3&gt;
                 &lt;ul&gt;
                     &lt;li&gt;Pizza&lt;/li&gt;
                     &lt;li&gt;Sushi&lt;/li&gt;
                     &lt;li&gt;Ramen&lt;/li&gt;</code></pre>       
                     </td>
                    <td rowspan="3"><h3>Chores</h3>
                        <ol>
                            <li>Clean room</li>
                            <li>Take out Garbage</li>
                            <li>Feed cats</li>
                        </ol>
        
                        <h3>Favorite food</h3>
                        <ul>
                            <li>Pizza</li>
                            <li>Sushi</li>
                            <li>Ramen</li>
                        </ul></td>
                </tr>

                <!-- unordered list -->
                <tr>
                    <td><code>&lt;ul&gt;</code></td>
                    <td>Ordered list</td>
                    <td><p>This defines an unordered list. groups a collection of items having no numerical order</td>
                </tr>

                <!-- list item-->
                <tr>
                    <td><code>&lt;li&gt;</code></td>
                    <td>list item</td>
                    <td><p>This element is used to represent an item in a list</td>
                </tr>

                </ul>
            </tbody>
          </table>
      </section>
    </main>
  </body>

body {
  background-color: cornsilk;
  font-family: Georgia, "Times New Roman", Times, serif;
}

header {
  text-align: center;
}

table {
  border: 7px solid crimson;
}

td,
th {
  text-align: center;
}

th {
  font-weight: bold;
}

.section-header {
  color: darkred;
  text-align: center;
}
.code-segment {
  text-align: initial;
}

code,
.code-segment {
  background-color: lavender;
}