2018 COSC 314-Web Programming Class HTML Cheatsheet

A Collaboration Project Page

Class HTML Cheatsheet

    Shallum Alfred

  1. <audio> </audio>

  2. defines audio content. this tag allows an audio file to be embedded into the document. It allows multiple audio sources to be used in case browser doesn’t support particular formats.

  3. <video> </video>

  4. defines video content. this tag allows a video file to be embedded into the document. It allows multiple video sources to be used in case browser doesn’t support particular formats.

  5. <script> </script>

  6. Defines a client-side script which allows the use of third party code like JavaScript for example, to be ran on the HTML page.

  7. <legend> </legend >

  8. defines a legend which is used for providing a form of title or explanatory caption for the content within its parent element

  9. <wbr>

  10. defines a line break opportunity, meaning that the browser will only render the break when necessary at the given point.

  11. <source>

  12. used within a media element to allow multiple video, audio or image files to be used as alternatives choices for the browser to choose from base on compatibility.

    Tyler Bailey

  13. <cite></cite>

  14. The cite tag is used to reference a cited work. It must contain a URL or title of that work. It must also follow conventional citation form.

  15. <abbr></abbr>

  16. This tag is used to abbreviate a term. It is mostly used in the title attribute and if used must contain the full description without anything else.

  17. <label></label>

  18. The label tag is used to add a caption to any sort of item on the webpage. It is mostly used to indicate directions for user interface items.

  19. <meter></meter>

  20. The meter tag creates a visible meter based on a scalar or a fractional value within a reasonable range. This tag is mostly used to help create forms.

    Byron Bamigbade

  21. <header></header>

  22. The <header> tag defines a header for a document or a section. <header> can be defined as a container for introductory content and navigation links. Headers usually contain one or more of the heading elements (<h1> - <h6>).

  23. <h1></h1> - <h6></h6>

  24.  <h1> - <h6> are mainly used to define HTML headings. <h1> - <h6> are organized such that <h1> is the most important (largest) heading, and <h6> is the least important (smallest) heading.

  25. <Title></Title>

  26. <Title> defines the title of a document and is required in ALL HTML documents.

    Rodney Carter

  27. <br></br>

  28. The HTML <br> element produces a line break in text . It is useful for writing a poem or an address, where the division of lines is significant.

  29. <link></link>

  30. The HTML <link> element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation.

  31. <input></input>

  32. The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

    Andres Diaz-Gonzalez

  33. <!DOCTYPE>

  34. This has to be the first tag in any html document. It defines the type of the document so the browser in use knows what to expect and can render the page properly.

  35. <!-- -->

  36. Anything between these tags will not be displayed in the browser when the document is rendered. They are used to comment the code which is helpful to explain it and edit it.

  37. <link>

  38. This is an empty element, which means it doesn’t need a closing tag since it only contains attributes. It is used to link the html document to external ones, like a css stylesheet or a script.

    Marcellus Dogo

  39. <summary></summary>

  40. Defines a visible heading for a *details* element

  41. <s></s>

  42. Specifies text is no longer correct

  43. <q></q>

  44. Defines a short quotation

  45. <em></em>

  46. Marks text that has stress emphasis. The <emb> </em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

    Jayda Garrett

  47. <address></address>

  48. represents the contact information of owner of the document, if inside a <body>< tag, it represents the info for the document, and if inside an <article> tag

  49. <time></time>

  50. a date and time readable to humans.

  51. <canvas></canvas>

  52. This is simply a container for graphics used as a placeholder.

    Chanel Hawks

  53. <ul></ul>

  54. Unordered list. Bulleted list.

  55. <hr>

  56. No end tag. A horizontal line used to separate contents on a page.

  57. <ol></ol>

  58. Ordered list with either numbers or letters.

  59. <big></big>

  60. Makes the content within bigger in size.

  61. <center></center>

  62. Centers the content inside the tags.

    Darius Hill

  63. <tag1></tag1>

  64. tag1.

  65. <tag2></tag2>

  66. tag2.

  67. <tag3></tag3>

  68. tag3.

    Paolo Inocencion

  69. <iframe></iframe>

  70. The inline frame is used for embedding another HTML page inside the current page.

  71. <blockquote></blockquote>

  72. This tag tells the browser that the text it is an extended quotation. This is usually shown visually by indentation.

  73. <meta></meta>

  74. The meta tag represents metadata (data that links to another data) that cannot be represented by other HTML meta-related elements. Mozilla recommends using the attribute charset with a value of UTF-8.

  75. <aside></aside>

  76. The element represents the part of a document that is not related to the document's main content and are usually shown as sidebars.

    Mac Johnson, III

  77. <a> </a>

  78. The anchor tag is used to add hyperlinks to the page. These link brings you to another page, different page locations and send email when clicked.

  79. <body> </body>

  80. The body tag defines the main content of the HTML document or the section of the HTML document that will be directly visible on the web page.

  81. <head></head>

  82. The head tag is the container for all head elements such as the <title><, <style>< and <link>< tags. In HTML4 the head tag is required, but in HTML5 is can be overlooked and not be used.

  83. <p> </p>

  84. The paragraph tag define a paragraph in HTML. It is most prominently used for inserting text onto a HTML page. Such as the words you’re reading right now.

  85. < embed></embed>

  86. The embed tag is used to define a container for an external application. This basically allows you to embed content into your web page such as a gif or video from an external resource.

    Shamsuddin Khan

  87. <rp> </rp>

  88. element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> </ruby> element.

  89. <mark> </mark>

  90. represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

  91. <picture></picture>

  92. element serves as a container for zero or more <source> </source> elements and one <image> </image> element to provide versions of an image for different display device scenarios.

  93. <sub></sub>

  94. specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

    Emmanuel McManus

  95. <table></table>

  96. The table tag creates a table in HTML, but you need other tags to define components of the table like the header.

  97. <td></td>

  98. This tag defines a single cell inside of the table. Using this tag you can put information into that cell about the row.

  99. <tr></tr>

  100. This tag defines a row in the table. Using this tag you can input information about the row into the table.

  101. <th></th>

  102. This tag defines the title of the table. The text will be bold and centered automatically by default.

    Nonso Nwoye

  103. <code>

  104. defines a piece of computer program.

  105. <pre>

  106. defines preformatted text.

  107. <track>

  108. specifies text tracks for media element. (<audio> and <video >).

  109. <output>

  110. represents the result of a calculation.

  111. <kbd>

  112. used to designate that a section of text in keyboard input.

    used to generate a key pair.

  113. <button>

  114. used to define a clickable button.

    Shamar Reeder

  115. < nav>   < /nav>  

  116. Navigation Link Tag. This tag represents a section of the document where links are presented.

  117. <b>   </b>

  118. This tag creates a bold text.

  119. < strong>   < /strong>

  120. Strong tag. This tag defines an important text.

    Ty Samuels

  121. <main></main>

  122. Main This is used to represent the main content of the <body> of a document or a part of a document.

  123. <dd></dd><

  124. This element provides the details about or the definition of the preceding term (<dt>) in a description list (<dl>).

  125. <colgroup></colgroup>

  126. This tag defines a group of columns within a table.

  127. <col></col>

  128. This HTML element defines a column within a table and is used for defining common semantics on all common cells.

  129. <td>

  130. This is the table cell tag. This tag is to create cells and add information in the cells on a table.

  131. <textarea >

  132. This is the text area tag. This tag is used to add an area to input text from the user. It allows the user to enter multiple lines.

    Tre Thomas

  133. <details></details>

  134. is the tag for summaries or articles you wish to put on your webpage.

  135. <style></style>

  136. contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.

  137. <tbody></tbody>

  138. encapsulates a set of table row elements, indicating that they comprise the body of the table (<table>).

  139. <thead></thead>

  140. defines a set of rows defining the head of the columns of the table.

    Jodean Williams

  141. <div></div>

  142. Divides the page content into sections, and applying styles.

    < div class=”cat”>

    <p> .....</p>



    Attributes: align, class, etc.

  143. <img>

  144. Defines an image (doesn’t need an end tag).

    < img src=”cat.jpg” alt=”A picture of a Cat”>

    Attributes: src (Source), alt(Alternate text for the image), width, etc.

  145. <object>

  146. Defines an embedded object (ie. pdf, flash, java applet).

    < object data=”integrals.pdf” width="400"> < /object>

    Attributes: width, height, align, etc.

  147. < param >

  148. Defines parameters for plugins embedded with an < object> element.

    < object data=”cat.mp3”>

    < param name=”autoplay” value="true">

    < /object>

    Attributes: name, value.

    Mercedes Williams

  149. <font></font>

  150. Specifies the face, color and size of text.

  151. <u></u>

  152. Underlines text

  153. <center></center>

  154. Center on the page horizontally

  155. <section></section>

  156. The section tags is used to represent a standalone section in the page.

  157. <footer></footer>

  158. Typically contains information about the author of the section, copyright data or links to related documents

Contributions and Extra Work

Aside from each student turning in atleast 3 unique tags (other students did more, see list here), students formed teams and completed the following extra work:

Task 1 - Files and Folders - Create, setup and upload files and folders to the server.

  • Jodean Williams
  • Shallum Alfred
  • Emmanuel McManus

Task 2 - Page Headings - Title and description of cheat sheet homepage.

  • Jayda Garrett
  • Chanel Hawks

Task 3 - Page Navigation - Setup page navigation and links.

  • Shamar Reeder
  • Rodney Carter

Task 4 - Cheat Sheet - Create a section in the page to display the all collected HTML tags.

  • Byron Bamigbade
  • Marcellus Dogo

Task 5 - Credits - Create a section in the page to display all student’s name, tags, and extra work.

  • Andres Diaz-Gonzales
  • Mercedes Williams

Task 6 - Homepage Links - Create a link on the student homepage that points to the class cheat sheet page.

  • Nonso Nwoye
  • Ty Samuels
  • Darius Hill

Task 7 - Data Collection - Setup google sheets, collect tags and ensure uniqueness, facilitators, speakers and enforcers.

  • Mac Johnson, III
  • Tyler Bailey
  • Tre Thomas

Task 8 - Coordination and Planning - Plan, coordinate, assign, delegate, assist, and document tasks and roles.

  • Paolo Inocencion
  • Shamsuddin Khan

Special thanks to Dr.Hatley for the knowledge, support and inspiration.