Home

Complete Course Glossary

Basic Shell for HTML

 <html>
  <head>
    <title>  <title>
  </head>
  <body>
  </body>
 </html>

Elements That We Have Covered:

  1. Paragraph

  2. <p>Paragraph text goes here</p>
  3. Headings (h1-h6)

  4. HTML has six different kinds of headings to structure text on a page. h1 tags are for top level items, like the title of a page. You only want to use this once per page.h2-h6 headings describe a different level of content. You can use these as much and as often as you like, but they should follow in order, that is, h3 will come under h2, and h2 will come under h1. your screen reader identifies each level as living under the one above it, so it's important to keep these structured.

    <h1>This is a top level heading</h1>
    <h2>This is a heading level 2</h2>
    <h3>This is a heading level 3</h3>
    <h4>This is a heading level 4</h4>
    <h5>This is a heading level 5</h5>
    <h6>This is a heading level 6</h6>
  5. List Item

  6. This identifies a list item, or one element of a list.

    <li>Corn</li>
  7. Unordered List

  8. this element identifies that an unordered list is going to follow. A list is made up of any number of items.

    <ul>
    <li>Corn</li>
    <li>Tomatoes</li>
    <li>Beans</li>
    <li>Onions</li>
    <li>Garlic</li>
    </ul>
  9. Ordered List

  10. this element identifies that an ordered list is going to follow. this type of list will automatically add an ascending number to each element in the list

    <ol>
    <li>Add corn</li>
    <li>Dice and add tomatoes</li>
    <li>Add beans</li>
    <li>Chop and sautee onions</li>
    <li>Mince and add garlic</li>
    </ol>
  11. Link

  12. <a href="https://www.google.com">Google</a>
  13. Text Formatting (emphasis and strong)

  14. Strong and emphasis identify a selection of text that has a strong importance you can change your JAWS settings to read these differently.

    <em>Very Important</em>
    <strong>Important</strong>
  15. Commenting Code

  16. You can leave notes for yourself in HTML that the browser will ignore, and won't be rendered on the page

    <!-- This comment is hidden from the browser -->
  17. Audio

  18. Defines sound content
    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    </audio>
    
  19. Line Break

  20. the br tag defines a single line break and has no closing tag

    <br>
  21. Button

  22. The button element defines a clickable button.

    <button onclick="alert('button activated')">native HTML</button>
  23. Images

  24. Images can be rendered using links to URL images, or image files. They do not need a closing tag and should always include an alt attribute.

    <img src="smiley.gif" alt="Smiley face" height="42" width="42">
  25. Forms

  26. Forms define HTML forms for user input. Labels are used in forms to define a label for an input element. The input tag specifies an input field where the user can enter data. The input varies depending on the type attribute that it is given.

  27. dropdowns menu

  28. a dropdown list allows users to select from options in a drop-down focusable list

    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    
  29. Tables

  30. The <table> tag defines an HTML table. An HTML table consists of the <table> tag and one or more <tr>, <th>, and <td> tags. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
    
  31. Span

  32. The span tags are used to group inline-elements in a document and provides a way to add a hook to a part of a text or a part of a document.

    <p>My mother has <span style="color:blue">blue</span> eyes.</p>
    
  33. Divs

  34. The div tag defines a division or a section in an HTML document. The div tag is used to group block-elements to format them with CSS.

    <div style="color:#0000FF">
      <h3>This is a heading
      <p>This is a paragraph.

    </div>
  35. Script Tags

  36. Script tags define a client-side script. You can use these to add javascript right in your html file.

    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    </pre>
    
  37. Style

  38. Style tags define the style information for a document and allow you to add CSS changes right in your html file.

    <html>
    <head>
    <title>my cool page</title>
    <style>
    h1 {color:red;}
    p {color:blue;}
    </style>
    </head>
    
More Elements

Semantic Elements

Semantic Elements give meaning to the document. Below are some common examples:

  1. Navigation

  2. The navigation region defines navigation links. This is a common semantic element that is used to organize and present all of the different pages on a site. It usually goes at the top of a web page and is consistent and present on all pages of the site.

    <nav role="navigation">
      <a href="about.html">About</a> 
      <a href="contact.html">Contact</a> 
      <a href="faq.html">Frequently Asked Questions</a> 
    </nav>
    
  3. Section

  4. Defines different sections on a site.

    <section>
      <h1>WWF<</h1>
      <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>
    
  5. Article

  6. The article tag defines an article. The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. Examples of where an <article> element can be used:

    <article>
      <h1>What Does the World Wildlife Fund (WWF) Do?</h1>
      <p>WWF's mission is to stop the degradation of our planet's natural environment,
      and build a future in which humans live in harmony with nature.</p>
    </article>
    
  7. Footer

  8. Defines a footer for a document or section. The footer goes at the bottom of an html page and often contains authoring information and links that are secondary to the navigation.

    <footer>
      <p>Posted by: Claire Volpe</p>
      <p>Contact information: 
      <a href="mailto:claire@example.com">claire@example.com</a>.</p>
    </footer>
    
More Info About Semantic Elements

Additional Resources