HTML Element Glossary

Basic Shell for HTML

 <!DOCTYPE html>
 <html lang="en">
    <title>  <title>

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.

  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.

  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

      <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>
  11. Link

  12. <a href="">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.

  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 -->

Additional Content Elements

  1. Images

  2. 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.

    Image Example:

    Smiley face

    Image HTML:

    <img src="smiley.gif" alt="Smiley face" height="42" width="42">
  3. Tables

  4. 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 example (unstyled):

    Month Savings
    January $0

    Table HTML (unstyled):

  5. Audio

    <audio controls>
      <source src="coolTrack.wav" type="audio/wav">
      <source src="coolTrack.mp3" type="audio/mpeg">
    Your browser does not support the audio element.

    Note: The controls attribute adds audio controls, like play, pause, and volume.The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

Additional Organizational Elements

  1. Span

  2. 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>
  3. Divs

  4. 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</h3>
      <p>This is a paragraph.</p>
  5. Line Break

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

  7. 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.

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

  4. Defines different sections on a site.

      <p>The World Wide Fund for Nature (WWF) is....</p>
  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:
      <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>
  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.

        <p>Posted by: Claire </p>
        <p>Contact information: 
        <a href=""></a>.</p>
  9. More Info About Semantic Elements

Input Elements

  1. Button

  2. The button element defines a clickable button.

    Button Input Example:

    Button Input HTML:

    <button onclick="alert('Alert activated')">Activate Alert Dialogue</button>
  3. Text

  4. <input type="text"> defines a single-line text input field.

    Text Input Example:

    Text Input HTML:

      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
     <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
  5. Dropdowns menu

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

    Dropdown example:

    Dropdown HTML:

     <label for="fruit-picker">pick a fruit:</label>
      <select name="fruits" id="fruit-picker">
        <option value="grapes">grapes</option>
        <option value="orange">orange</option>
        <option value="apple">apple</option>
        <option value="banana">banana</option>

HTML Part 3 Activity
Next: CSS