# [ACTIVE] FreeCodeCamp

idk man just taking the stuff and puttin it here

# Building a cat photo app: Responsive web design

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
  </head>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

# Learn Basic CSS by Building a Cafe Menu

<!DOCTYPE html>
<style>
        :root {
            --color-primary: #4d2278;
            --color-primary-light: rgba(77,34,120,0.15);
            --color-link: #4d2278;
            --color-bookshelf: #a94747;
            --color-book: #077b70;
            --color-chapter: #af4d0d;
            --color-page: #206ea7;
            --color-page-draft: #7e50b1;
        }

        /* Dark Mode Styles */
        body {
            background-color: #1e1e1e; /* Dark background color */
            color: #ffffff; /* Light text color */
        }
        .navbar, .sidebar, .header, .footer, .card {
            background-color: #2e2e2e; /* Darker background for navbar, sidebar, header, footer, and cards */
            color: #ffffff; /* Light text color */
        }
        a {
            color: #b891df; /* Light purple for links */
        }
        .notification.pos, .notification.warning, .notification.neg {
            background-color: #333333; /* Darker background for notifications */
            color: #ffffff; /* Light text color */
        }
        .image-container, .image-container img {
            background-color: #2e2e2e; /* Darker background for image containers */
            color: #ffffff; /* Light text color */
        }
</style>



<script>
  document.addEventListener("DOMContentLoaded", function() {
    var css = `
      body {
        background-color: #1e1e1e;
        color: #ffffff;
      }
      .navbar, .sidebar {
        background-color: #2e2e2e;
      }
      /* Add more CSS rules as necessary to style other elements */
    `;
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  });
</script>

<style>
    html.dark-mode body {
    color: #aaa !important;
  }

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
  color: black; /* Ensure all text in the body is black */
  root:(.dark-mode) {
  color-scheme: only light;}
}
  html.dark-mode body {
  color:#aaa !important
}
}
  #main-content.tri-layout-middle-contents {
  color: black !important; /* Set text color to black */
}
.header {
  color: black !important; /* Set text color to black */
}
}
}
.links {
  color: black !important; /* Set text color to black */
}
  
  #main-content.tri-layout{
  color: black !important; /* Set text color to black */
}
#main-content.back-to-top{
  color: black !important; /* Set text color to black */
}
/* Ensure all child elements inherit the black color */
#main-content.tri-layout-middle-contents * {
  color: black !important; /* Force black text color for all nested elements */
}
h1, h2, p, .established, .flavor, .dessert, .price, footer, .address {
  color: black !important; /* Force all these elements to have black text */
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
  color: black; /* Set text color to black */
}

img {
  display: block;
  margin-top: -25px;
  margin-left: auto;
  margin-right: auto;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
  color: black; /* Set text color to black */
}

.item {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space items evenly */
  align-items: center; /* Align items vertically */
  margin-top: 5px;
  margin-bottom: 5px;
}

.item p {
  margin: 0; /* Remove margins for better alignment */
  font-size: 18px;
  color: black; /* Set text color to black */
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
  color: black; /* Set text color to black */
}

.price {
  text-align: right;
  width: 25%;
  color: black; /* Set text color to black */
}

/* FOOTER */

footer {
  font-size: 14px;
  color: black; /* Set text color to black */
}

.address {
  margin-bottom: 5px;
  color: black; /* Set text color to black */
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}
</style>

<div class="menu" id="bkmrk-camper-cafe-est.-202"><main>
<h1 id="bkmrk-camper-cafe">CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<section>
<h2 id="bkmrk-coffee">Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon">
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p>
<p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p>
<p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p>
<p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p>
<p class="price">4.50</p>
</article>
</section>
<section>
<h2 id="bkmrk-desserts">Desserts</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon">
<article class="item">
<p class="dessert">Donut</p>
<p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p>
<p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p>
<p class="price">2.50</p>
</article>
</section>
</main><hr class="bottom-line"><footer>
<p><a href="https://www.freecodecamp.org" target="_blank" rel="noopener">Visit our website</a></p>
<p class="address">123 Free Code Camp Drive</p>
<p>did you know you can use the style tag in the doc to not need a css file for bookstack? </p>
  <button class="icon-list-item text-link"><span><svg class="svg-icon" data-icon="dark-mode" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2"></path></svg></span><span>Dark Mode</span></button><script

  // Add an event listener to a button or switch to toggle dark mode
  document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
</script>

</footer></div>

# notes, (needs to be manually updated from time to time)

<span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">-Key:</span>

- <span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Red: </span><span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Important Concepts to understand </span>
- <span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Pink: </span><span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Important technical keywords </span>
- <span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Blue: </span><span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Sections of notes</span>
- <span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Green: </span><span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Examples and explanations</span>

<span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">HTML 5</span>

<span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Elements and Syntax</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Heading</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;h#&gt;Content&lt;/h#&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The lower header has the highest value (h1 &gt; h2)</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">There can be multiple headers of the same value</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Important:</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> The implication of </span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Paragraph</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;p&gt;Content&lt;/p&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Commenting</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;!-- Content →</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Main</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;main&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> Content </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/main&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Propose: Represents the main body of an HTML document, helps make it easier to read and helps with SEO (Search Engine Optimization)</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Important</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">All content within main (Headings, Paragraphs, Comments, etc) should be </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">nested</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> (indented two spaces further to the right of the element they are nested in)</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Ex</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: &lt;main&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">\_\_</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Content</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;/main&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Images</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;img src=”(URL)” alt=”(Error Message)&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Images utilize a </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">self closing tag</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> (A tag without a closing tag)</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">src</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> (source)</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> attribute specifies the images URL, aka where it is located</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">alt</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> attribute displays text that improves user understanding and accessibility if the image fails to load</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Anchor</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;a href=”(URL)” target=”(Target)”&gt;(Text)&lt;/a&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">An anchor element adds a link to another page</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">text is a message that will embody the link on the page of a website and will be placed between the opening and closing tags</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">on an anchor element</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">href (hypertext reference)</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> is a hyperlink to another web address</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">target</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> specifies where to open the contents of the hyperlink (</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">\_blank</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> specifies the link should open in a new tab or window)</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Important:</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">You can utilize anchor within other elements </span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Ex</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: &lt;p&gt;See more &lt;a href=”(URL)”&gt;photos&lt;/a&gt; in our gallery.&lt;p&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Explanation:</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> In the above example, the hyperlink is embedded into the word </span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">“photos” within the paragraph.</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">Ex:</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;a href=”example-link”&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;img src=”image-link.jpg” alt=”A photo.”&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;/a&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Explanation:</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">In the above example, the image is wrapped in the anchor element, </span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">making it so the image embodies the hyperlink</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Section</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;section&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> Content</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/section&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">section</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element is used to define the sections in a document, such as chapters, headers, footers, or any other sections of the document (helps with SEO and accessibility)</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Ordered List/Unordered List</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">ul&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;li&gt;list contents&lt;/li&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/ul&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;ol&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;li&gt;list contents&lt;/li&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/ol&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">ul</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> specifies an unordered list while </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">ol</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> specifies an ordered list, </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">li </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">specifies elements within the list</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Figure/Fig Caption</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">figure&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;img src=”(URL)” alt=”(Text)”&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;figcaption&gt;Text&lt;/figcaption&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/figure&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">figure </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">element is used to specify self contained content</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Emphasis/Strong</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;em&gt;Text&lt;/em&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;strong&gt;Text&lt;/strong&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">em </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">puts emphasis on specific words or phrases with </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">italics</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">, strong specifies text that is </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">bold </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">font</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Form and the types of input</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;form action=”/submit-url”&gt;&lt;/form&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">form</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element is a container for different types of </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">input</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> elements</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">form </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">goes hand in hand with </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">input</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;input type=”(type)” name=”(name)” placeholder=”(PlaceHolderText) required&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Attributes of input:</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">type </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">is what specifies the kind of input</span>
            
            
            - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Different input types:</span>
                
                
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">button</span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">checkbox</span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">color </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">date </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">datime-local </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">email</span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">file </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">hidden </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">image </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">month </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">number </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">password </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">radio </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">range </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">reset </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">search </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">submit </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">tel </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">text </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">time </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">url </span>
                - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">week </span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">checked </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">makes it so an input option is selected by default</span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">name</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> gives the input a name</span>
            
            
            - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Adding the same name to two different input types makes it so only one can be selected at a time</span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">placeholder</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> puts placeholder text until text is put in the textbox</span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">id</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> assigns a specific identification value to specific HTML elements</span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">value </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">assigns a value to an input</span>
            
            
            - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The default value is (name)=on, thus it is good practice to make the value the same as the id</span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">required</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> prevents the user from submitting anything without entering the required field </span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">label</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element is used to associate the text of an input with the input itself</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Ex</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;label&gt;&lt;input type=”radio”&gt; Indoor&lt;/label&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Explanation</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: The above example makes it so clicking on the word “Indoor” also selects the radio button as if the user clicked on the button as well</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Wrapping just the text in a label using the </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">for </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">attribute is an alternative method</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Ex</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: </span>
            
            
            - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;input id=”(id)” type=”(type)”&gt; &lt;label for=”(id)”&gt; text&lt;/label&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">There is also the </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">button</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;button&gt;Text&lt;/button&gt;</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">button </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">element gives the user a button to submit their input</span>
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">button</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> can use attributes like type as well</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">fieldset </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">element is used to group related inputs and labels together in a web form</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;fieldset&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
            </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;label&gt;&lt;input type=”(type)”&gt;(text)&lt;/label&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
            </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/fieldset&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">legend </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">element acts as a caption for the content in the </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">fieldset</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;fieldset&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
            </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;legend&gt;text&lt;/legend&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
            </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;label&gt;&lt;input type=”(type)”&gt;(text)&lt;/label&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
            </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/fieldset&gt;</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Footer</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;footer&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> Contents</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/footer&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">footer</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element is used to define the footer of a document or section, typically contains info about the author, copyright data, links to terms of use, contact info, etc</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Head</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;head&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> Contents</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/head&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">head </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">element contains metadata about the page (title, scripts, stylesheets)</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">You can set browser behavior by adding self-closing </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">meta</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> elements in the head</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Ex</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">:</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;head&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;meta attribute=”value”&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;title&gt;title&lt;/title&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;/head&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Explanation</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">: The above example is an instance of describing </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">metadata</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> within an HTML document</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Meta attributes in HTML:</span>
        
        
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">charset</span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">name </span>
        - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">content </span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">HTML</span>

- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Syntax</span>
    
    
    - <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;html&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;head&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;/head&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;body&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;/body&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;footer&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> &lt;/footer&gt;</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
        </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">&lt;/html&gt;</span>
- <span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">The </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">html</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> element is the root element of an HTML page which the entire pages contents will be wrapped in</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">IMPORTANT: All DOCUMENTS SHOULD BEGIN WITH &lt;!DOCTYPE html&gt; </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">  
</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">BECAUSE IT ACTS AS A DECLARATION AND ENSURES THE BROWSER </span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">  
</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">TRIES TO MEET INDUSTRY-WIDE SPECIFICATIONS. &lt;!DOCTYPE html&gt; </span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">ALSO TELLS THE BROWSER THAT THE DOCUMENT IS HTML 5 </span>

<span style="font-size:17pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">CSS</span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"><span class="Apple-tab-span" style="white-space:pre;"> </span></span>

<span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
</span><span style="font-size:11pt;font-family:Arial, sans-serif;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">  
  
</span>