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>||
|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>
- 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 on Tuesday, 12 December, from 1:30-3:30. It will be written as a one-hour (not 50 minute) exam, but you may have the full two hours for it. In other respects it will be very like the other tests, but comprehensive - it will emphasize Python, but cover all the topics we have seen. There is a Sample Exam, but be aware that things will have changed somewhat with the advent of ChatGPT.
Assignment A is posted.