CSE 154: Web Programming
HTML “Cheat Sheet”
Terminology
Term Definition Example
Tag Make up the start and end of an element. <p></p>
Tags that contain content (other tags or text)
have open/closing pairs. Tags that do not
have content are almost always self-closing.
Element The term to refer to the page element (tag(s) <p>
and any content). Content of a paragraph
element.
</p>
Attribute Defines a property for an element, consists of <img src="pup.gif"
an attribute/value pair, and is defined within alt="An adorable puppy.">
the element's start tag (or self-closing tag).
An element's start tag may contain any (src and alt are attributes)
number of space-separated attribute/value
pairs.
Some attributes are “boolean” meaning they <button disabled>
don’t require a value (e.g. the disabled Click Me!
attribute for button elements) </button>
Semantic Tag HTML elements that introduce meaning to Options include, but not limited to:
the web page rather than just presentation. <strong> <main> <section>
<header> <blockquote> <code>
<em>
Deprecated/ Tags that are discouraged to use and Options include, but not limited to:
Presentational browsers may remove support for them in the <center> <font> <b> <i> <u>
Tags future if they haven’t already. Many are <strike> <s> <applet>
presentational tags originally used to control
display without semantic value.
CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19
Tags Used in the <head> Section
Tag Description
<title> text <
/title> title shown on page tab
attribute="value" .
<meta .. /> page metadata
url" rel="stylesheet" />
<link href=" links to a CSS style sheet
url"></script>
<script src=" link to JavaScript program
<!-- c
omments --> comment (can appear in head o
r body
)
Tags Used in the <body> Section
Tag Display Description
text <
<p> /p> Block paragraph
text <
<h1> /h1> Block headings (h1 for top-level heading
text <
<h2> /h2> through h6 for six-level heading)
...
text <
<h6> /h6>
<hr /> Block horizontal rule (line)
<br /> Inline line break
<a href=" path">
text </a> Block anchor (link)
<img src=" path" alt=" description" Inline-block image
/>
text</em>
<em> Inline emphasis (italic)
text <
<strong> /strong> Inline strong emphasis (bold)
<ol> Block ordered (ol
) and unordered (ul
) list;
text <
<li> /li> list item (li
)
text <
<li> /li>
text
<li>
<ul>
nested item text</li>
<li>
nested item text</li>
<li>
</ul>
</li>
</ol>
CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19
Tags Used in the <body> Section (Continued)
Tag Display Description
<blockquote> Block block-level quotation (often contains a footer
text <
<p> /p> for citing an author)
</blockquote>
text <
<q> /q> Inline inline-level quotation
text <
<code> /code> Inline computer code (monospace)
text </pre>
<pre> Inline pre-formatted text (preserves whitespace)
<table> Block table of data (table
)
text </caption>
<caption> description of table (caption
)
<tr> table row (tr
)
heading 1 <
<th> /th> table heading cell (hr
) normal table cell (td
)
heading 2 <
<th> /th>
</tr>
<tr>
<td> cell 1 </td>
<td> cell 2 </td>
</tr>
...
</table>
<div> ... </div> Block block-level container of a page (should only be
used for styling/layout purposes)
<span> ... </span> Inline inline-level section of a page (should only be
used for styling/layout purposes)
CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19
HTML5 Semantic Grouping Tags (all block elements)
Tag Description
<header> Header of a page or another structural element
Main content of a page. The content inside should be unique to the document and not
<main> contain content that is shared across pages (e.g., website nav links, search bars, etc.)
<footer> Footer of a page or another structural element
<article> A standalone piece of content (e.g., entire blog post including title, author, etc.)
<section> A piece of content that is part of another (e.g., a chapter section of a reading)
<aside> Defines some content aside from the content it is placed in (e.g., a sidebar in an article)
<nav> Navigational element, often containing links to navigate within/between pages
Some common layout examples:
CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19
Common HTML UI Tags
Tag Display Description
<form> block form element to group input elements, often
content for submitting data/information or specifying
</form> options for page application
<button> Inline clickable button
content type can be submit, reset, button
</button>
type" name="
<input type=" name" /> Inline form element input tag
type can be text, number, checkbox,
radio, file, etc.
num" cols="
<textarea rows=" num"> Inline multi-line text input box
initial text
</textarea>
text <
<label> /label> Inline clickable text l abel around a form control
<select> Inline drop-down selection box (select
);
text <
<option> /option> each option within the box (option
);
<optgroup label="text"> a labeled group of option (optgroup
);
text <
<option> /option>
text <
<option> /option>
</optgroup>
...
</select>
<fieldset> Block a grouped set of form fields with a legend
text <
<legend> /legend>
...
</fieldset>
HTML Entities Reference
Result Description Entity Name
non-breaking space
< less than <
@ at symbol @
> greater than >
& ampersand &
© copyright ©
CSE 154 HTML Cheat Sheet Summer 2019 - Version 06/23/19
