Cheatsheet: HTML5 Overview
Element Description Example
<!-- This is a comment -->
This tag denotes a
comment in HTML,
which is not displayed
<!-- -->
by a browser but can be
useful to hide and
document code.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
All HTML documents <!-- Document Body Here -->
must start with this </body>
declaration. It tells the </html>
<!DOCTYPE
browser what document
html>
type to expect. Note that
this element has no
ending tag.
<a href="[Link]
This tag, called an
“anchor tag” creates
<a href= hyperlinks using the href
“path”>link attribute. In place of path
name</a> enter the URL or path
name to the page you
want to link to.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
<!-- Document Body Here -->
Contains the contents of </body>
the HTML document. It </html>
should contain all other
<body>
tags besides the <head>
element to display the
body of the document.
<div>
This element has no particular semantic meaning but is often used in conjunction with CSS for styling purposes.
</div>
Often used to separate
sections in the body of a
<div> document in order to
style that content with
CSS.
<h1>Thomas J. Watson</h1>
Adds a level 1 heading
<h1>
to the HTML document.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
<!-- Document Body Here -->
</body>
Contains metadata and </html>
should be placed after
<head>
the <html> tag and
before the <body> tag.
<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
<!-- Document Body Here -->
The root element of an </body>
HTML document. All </html>
<html> other tags in the
document should be
contained in this tag.
<img src=“[Link] width=“300” height=“300”/>
This tag is used to place
an img. In place of path
insert a URL or a relative
<img src=“path”
file path to the image
width=“dim1”
location. Other optional
height=“dim2”>
attributes include width
and height of the image
in pixels.
<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
Element that creates
bulleted line items in an
ordered or unordered
<li>
list. Should be used in
conjunction with the
<ul> or <ol> tags.
<head>
<link rel=“stylesheet” href=“[Link]”>
</head>
Used to link an external
document, such as a CSS
<link>
file, to an HTML
document.
<head>
<meta name=“author” content=“Christopher Moore”>
</head>
Used to provide
<meta> metadata about the
HTML document.
<ol> Element that creates an <ol>
ordered list using <li>Numbered bullet point 1</li>
<li>Numbered bullet point 2</li>
numbers. Should be used </ol>
in conjunction with the
<li> tag.
<p>This is a paragraph of text. It can be as short or as long as needed.</p>
This tag is used to
identify a paragraph. It
<p>
places a line break after
the text it is enclosed in.
<script>
alert(“Hello World”);
</script>
Used to embed
<script> JavaScript in an HTML
document.
<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
This tag is used to <td>First row second cell</td>
denote a table. Should be </tr>
<tr>
used with <tr> (defines a <td>Second row first cell</td>
table row) and <td> <td>Second row second cell</td>
<table> (defines a table cell </tr>
within a row) tags. The </table>
<th> tag can also be used
to define the table header
row.
<td>Cell Content</td>
Denotes a cell within a
<td>
row, within a table.
<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
<td>First row second cell</td>
</tr>
<tr>
<td>Second row first cell</td>
Denotes the header cells <td>Second row second cell</td>
<th> within a row within a </tr>
table. </table>
<title> Defines the title of the <!DOCTYPE html>
HTML document <html>
<head>
displayed in the <title>Document Title</title>
browser’s title bar and </head>
tabs. It is required in all <body>
HTML documents. It <!-- Document Body Here -->
should be contained in </body>
</html>
the <head> tag.
<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
<td>First row second cell</td>
</tr>
<tr>
<td>Second row first cell</td>
Denotes a row within a <td>Second row second cell</td>
<tr> </tr>
table. </table>
<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
Element that creates an
unordered list using
<ul> bullets. Should be used
in conjunction with the
tag.