HTML Cheat Sheet
Here we summarize some of the most common HTML tags and their uses. This is not a tutorial. It is simply a quick reference for those who already have some experience in typing HTML from scratch, or who need to repair damaged HTML that was generated by an editor.
| HTML Tag | Closing tag? | Purpose | Example | Result | ||||
|---|---|---|---|---|---|---|---|---|
| a | Yes | Make an anchor - a link to another web location | <a href="mypage.html">Here is what the user sees</a> | Here is what the user sees | ||||
| b | Yes | Set enclosed text in bold face | <b>This text is bold</b> | This text is bold | ||||
| body | Yes | Delimits the part of the HTML that will be visible in a browser | ||||||
| br | No | Make a line break | Text on one line<br> and text on another line | Text on one line and text on another line |
||||
| div | Yes | A division of the text - e.g. a section. This is usually used to apply formatting attributes. | ||||||
| dl,dt,dd | Yes | Definition list - definition term and definition data | <dl><dt>Wazzu!</dt><dd>An affectionate moniker for WSU, once banned, but now acceptable again.</dd></dl> |
| ||||
| em | Yes | Emphasis | <em>This is emphasized</em> | This is emphasized | ||||
| head | Yes | Delimits the header information | ||||||
| hr | No | Make a horizontal rule | <hr style="width: 80%; height: 5px"> | |||||
| h1,h2,...,h6 | Yes | Different levels of heading typesetting | <h1>Major Header</h1><h3>Minor Header</h3> | Major HeaderMinor Header |
||||
| i | Yes | Italicize | <i>This is italicized</i> | This is italicized | ||||
| img | No | Insert an image into the document | <img src= "http://www.math.wsu.edu/images/MathSplash10/math-raft1.jpg" width="40" height="40" alt="Math people"> |  |
||||
| link | No | Can read external resources into an HTML file. This tag must appear in the header information. | ||||||
| ol,li | Yes | Make an ordered (numbered) list | <ol><li>First item</li><li>Second item</li></ol> |
|
||||
| p | Yes | Make a paragraph | <p>Here is a paragraph</p><p>Here is another</p> | Here is a paragraph Here is another |
||||
| span | Yes | Delimits text to be formatted differently from that around it (usually a small amount) | Here is a way to get <span style="font-weight:bold">bold faced text</span> | Here is a way to get bold faced text | ||||
| style | Yes | Grouping tag for style attributes of HTML tags. We set procedural markup here... This must appear in the header information. | See CSS information for examples and details. | |||||
| sub,sup | Yes | Make an expression with a sub- or superscripts | X<sub>i</sub><sup>2</sup> | Xi2 | ||||
| table,th,tr,td | Yes | Make a table, with headers, rows, and data | <table><tr><th>Header1 </th><th>Header2 </th></tr><tr><td>Data1 </td><td>Data2 </td></tr></table> |
|
||||
| ul,li | Yes | Make an unordered list | <ul><li> Item1</li> <li> Item2</li> </ul> |
|
Hints
- Every opening tag <tag> should have a corresponding closing tag </tag>.
- If the opening and closing tags would enclose no text, then tags can close themselves: viz <br/>.
- HTML tags must be nested properly.
- It is preferable to use only lower case for HTML tags.
- Attributes of HTML tags are largely being replaced by style settings.
- W3Schools has a useful style guide for HTML and CSS.
The last test will take place at the final exam time,
Monday 12 December, 1:30-3:30. It will be written as a one-hour
in-class on-line test. As usual, you can use any resources
you want.
A
Sample Exam
is available.
Note that the URL for the exam will not be emailed to all.
If you need to take the exam from outside class, contact the
instructor to get on the email list.
Assignment B is posted.
Most recent scores are on-line at
My.math.
Check the Info page. Let the instructor know
if you find a discrepancy.