Cheat Sheet HTML Elements

25/02/24, 22:04 about:blank
HTML and HTML5 Elements Cheat Sheet

Element Description Example
1. 1
2. 2
3. 3
4. 4
All HTML 5. 5
6. 6
documents 7. 7
must start 8. 8
with this 9. 9
declaration. It 10. 10
tells the 11. 11
<!DOCTYPE browser what 1.
html> document 2.
type to 3. <!DOCTYPE html>
expect. Note 4. <html>
that this 5. <head>
6. <title>Document Title</title>
element has 7. </head>
no ending 8. <body>
tag. 9. Document body here
10. </body>
11. </html>
Copied!
This tag,
called an
"anchor tag"
creates
hyperlinks
using the href
<a href= attribute. In <a href="https://www.ibm.com">IBM</a>
"path"> place of path
enter the
URL or path
name to the
page you
want to link
to.
Identifies a
self-contained
piece of
content that
1. 1
could be 2. 2
distributed to 3. 3
other 4. 4
websites and 5. 5
platforms as a 6. 6
stand- alone 1. <article class="CSS-Style-Reference">
<article>
unit. Similar 2. <h2>HTML</h2>
to <div> tag 3. <p>HTML stands for Hypertext Markup Language.
in that it does 4. It is a standardized system for tagging text files to display specific
5. font, color, graphics, and hyperlinks on World Wide Web pages.</p>
not render as
6. </article>
anything
special in the Copied!
browser
unless it is
styled with
CSS.
Defines some
content aside
from the
content it is 1. 1
2. 2
placed in. 3. 3
Similar to 4. 4
<div> tag in
<aside> that it does 1. <aside>
2. Use the aside tag to represent a section of a page that consists
not render as
3. of content tangentially related to the content.
anything 4. </aside>
special in the
browser Copied!
unless it is
styled with
CSS.
<body> Contains the 1. 1
contents of 2. 2
3. 3
the HTML 4. 4
document. It 5. 5
should 6. 6
contain all 7. 7
other tags 8. 8
about:blank 1/6
25/02/24, 22:04 about:blank
besides the 9. 9
<head> 1. <!DOCTYPE html>
element to 2. <html>
display the 3. <head>
body of the 4. <title>Document Title</title>
document. 5. </head>
6. <body>
7. Document body here
8. </body>
9. </html>
Copied!
1. 1
Often used to 2. 2
separate 3. 3
sections in 4. 4
the body of a 1. <div>
<div>
document in 2. This element has no particular semantic meaning but is often used
order to style 3. in conjunction with CSS for styling purposes.
that content 4. </div>
with CSS.
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
Groups 9. 9
related 10. 10
elements in a 1. <form action= "/script.php">
<fieldset>
form and puts 2. <fieldset>
a box around 3. <legend>User:</legend>
them. 4. <label for="fname">First name:</label>
5. <input type="text" id="fname" name="fname"><br><br>
6. <label for="lname">Last name:</label>
7. <input type="text" id="lname" name="lname"><br><br>
8. <input type="submit" value="Submit">
9. </fieldset>
10. </form>
Copied!
1. 1
2. 2
3. 3
Used in 4. 4
conjunction 5. 5
with the 1. <figure>
<figcaption>
<figure> tag 2. <img src="durham.jpg">
to mark up an 3. <figcaption>Fig.1 - Durham, NC</figcaption>
image. 4. </figure>
5.
Copied!
1. 1
2. 2
3. 3
Used to mark 4. 4
up an image 5. 5
in
<figure> conjunction 1. <figure>
2. <img src="durham.jpg">
with the 3. <figcaption>Fig.1 - Durham, NC</figcaption>
<figcaption> 4. </figure>
tag. 5.
Copied!
Contains a
footer of a 1. 1
document and 2. 2
often contains 3. 3
information 4. 4
such as 1. <footer>
<footer>
authoring, 2. <p>Author: Christopher Moore</p>
copyright 3. </footer>
info, contact 4. <form action="/script.php">
info, sitemap,
Copied!
and related
documents.
<form> Creates an 1. 1
HTML form 2. 2
for user input. 3.
4. 4
3
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
1. <form action="/script.php">
2. <fieldset>
3. <legend>User:</legend>
about:blank 2/6
25/02/24, 22:04 about:blank
4. <label for= "fname">First name:</label>
5. <input type="text" id="fname" name="fname"><br><br>
6. <label for= "lname">Last name:</label>
7. <input type="text" id="lname" name="lname"><br><br>
8. <input type="submit" value="Submit">
9. </fieldset>
10. </form>
Copied!
Adds a level
1 heading to
<h1> <h1>Thomas J. Watson</h1>
the HTML
document.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
Contains 7. 7
metadata and 8. 8
should be 9. 9
placed after 1. <!DOCTYPE html>
<head>
the <html> 2. <html>
tag and 3. <head>
before the 4. <title>Document Title</title>
5. </head>
<body> tag. 6. <body>
8. </body>
9. </html>
Copied!
1. 1
A container 2. 2
3. 3
for 4. 4
introductory 5. 5
content such
<header> as heading 1. <header>
2. <h1>Header tag example</h1>
elements, 3. <p>It works as a container for introductory content such as heading elements, logo, or authoring information.</p>
logo, or 4. <p>Author: Christopher Moore</p>
authoring 5. </header>
information.
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
The root 6. 6
7. 7
element of an 8. 8
HTML 9. 9
document. All
<html> other tags in 1. <!DOCTYPE html>
2. <html>
the document 3. <head>
should be 4. <title>Document Title</title>
contained in 5. </head>
this tag. 6. <body>
8. </body>
9. </html>
Copied!
This tag is
used to place
an img. In
place of path 1. 1
insert a URL 2. 2
or a relative 3. 3
<img file path to 4. 4
src="path" the image 1. <img
width="dim1" location. 2. src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg"
height="dim2"> Other 3. width="300"
optional 4. height="300">
attributes
include width Copied!
and height of
the image in
pixels.
<input Specifies an 1. 1
type="?"> input field on 2. 2
3. 3
a form with 4. 4
the type 5. 5
attribute. 6. 6
Common 7. 7
input types 8. 8
9. 9
include: 10. 10
"color,"
"date," 1. <form action="/script.php">
"datetime- 2. <fieldset>
3. <legend>User:</legend>
about:blank 3/6
25/02/24, 22:04 about:blank
local," 4. <label for="fname">First name:</label>
"email," 5. <input type="text" id="fname" name="fname"><br><br>
6. <label for="lname">Last name:</label>
"number," 7. <input type="text" id="lname" name="lname"><br><br>
"range," 8. <input type="submit" value="Submit">
"search," 9. </fieldset>
"url," "tel," 10. </form>
"datalist,"
Copied!
"select,"
"text,"
"option," and
"placeholder."
Element that 1. 1
creates 2. 2
3. 3
bulleted line
4. 4
items in an 5. 5
ordered or
<li> unordered 1. <ul>
list. Should 2. <li>Bullet point 1</li>
3. <li>Bullet point 2</li>
be used in 4. </ul>
conjunction 5.
with the <ul>
or <ol> tags. Copied!
1. 1
2. 2
3. 3
Used to link a 4. 4
CSS
<link> document to 1. <head>
2. <link rel="stylesheet" href="styles.css">
an HTML 3. </head>
document. 4.
Copied!
1. 1
2. 2
Used to 3. 3
provide 4. 4
metadata 1. <head>
<meta>
about the 2. <meta name="author" content="Christopher Moore">
HTML 3. </head>
document. 4.
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
Used to 6. 6
define a set of 1. <nav>
<nav>
navigational 2. <a href="home.html">Home</a>
elements. 3. <a href="page1.html">Page 1</a>
4. <a href="page2.html">Page 2</a>
5. </nav>
6.
Copied!
Element that 1. 1
creates an 2. 2
ordered list 3. 3
using 4. 4
numbers. 1. <ol>
<ol>
Should be 2. <li>Numbered bullet point 1</li>
used in 3. <li>Numbered bullet point 2</li>
conjunction 4. </ol>
with the <li>
Copied!
tag.
1. 1
This tag is 2. 2
used to 3. 3
identify a 4. 4
paragraph. It 1. <p>Thomas J. Watson, Sr. is the American
<p>
places a line 2. industrialist, who built the International Business
break after 3. Machines Corporation (IBM) into the largest
the text it is 4. manufacturer of electric typewriters and data processing equipment in the world. </p>
enclosed in.
Copied!
1. 1
2. 2
Used to 3. 3
embed
<script> Javascript in 1. <script>
2. alert("Hello World");
an HTML 3. </script>
document.
Copied!
<section> Defines an 1. 1
important 2. 2
3. 3
section of a 4. 4
document. 5. 5
Can be used 6. 6
about:blank 4/6
25/02/24, 22:04 about:blank
within 1. <section>
headers and 2. <h2>Introduction</h2>
3. <p>This document provides some examples of how to
footers as 4. use a variety of HTML elements</p>
well. 5. </section>
6.
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
Used to apply 9. 9
simple CSS 1. <head>
<style>
to an HTML 2. <style>
document. 3. p {color:red}
4. </style>
5. </head>
6. <body>
7. <p>This paragraph will be red because I've styled
8. the paragraph tag with CSS.</p>
9. </body>
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
This tag is 6. 6
used to 7. 7
denote a 8. 8
table. Should 9. 9
be used with 10. 10
11. 11
<tr> (defines 12. 12
a table row) 13. 13
and <td>
<table> (defines a 1. <table>
2. <tr>
table cell 3. <th>Header cell 1</th>
within a row) 4. <th>Header cell 2</th></tr>
tags. The 5. <tr>
<th> tag can 6. <td>First row first cell</td>
also be used 7. <td>First row second cell</td>
8. </tr>
to define the
9. <tr>
table header 10. <td>Second row first cell</td>
row. 11. <td>Second row second cell</td>
12. </tr>
13. </table>
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
Denotes a cell 14. 14
within a row, 1. <table>
<td>
within a 2. <tr>
table. 3. <th>Header cell 1</th>
4. <th>Header cell 2</th>
5. </tr>
6. <tr>
7. <td>First row first cell</td>
8. <td>First row second cell</td>
9. </tr>
10. <tr>
11. <td>Second row first cell</td>
12. <td>Second row second cell</td>
13. </tr>
14. </table>
Copied!
<th> Denotes the 1. 1
header cells 2. 2
3. 3
within a row 4. 4
within a 5. 5
table. 6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
about:blank 5/6
25/02/24, 22:04 about:blank
13. 13
14. 14
1. <table>
2. <tr>
5. </tr>
6. <tr>
9. </tr>
10. <tr>
13. </tr>
14. </table>
Copied!
1. 1
2. 2
Defines the 3. 3
title of the 4. 4
HTML 5. 5
document 6. 6
7. 7
displayed in 8. 8
the browser's 9. 9
title bar and
<title> tabs. It is 1. <!DOCTYPE html>
2. <html>
required in all
3. <head>
HTML 4. <title>Document Title</title>
documents. It 5. </head>
should be 6. <body>
contained in 7. Document body here
8. </body>
the <head>
9. </html>
tag.
Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
Denotes a
<tr> row within a 1. <table>
2. <tr>
table. 3. <th>Header cell 1</th>
5. </tr>
6. <tr>
9. </tr>
10. <tr>
13. </tr>
14. </table>
Copied!
1. 1
Element that 2. 2
3. 3
creates an 4. 4
unordered list 5. 5
using bullets.
<ul> Should be 1. <ul>
used in
conjunction 4. </ul>
with the <li> 5.
tag.
Copied!
Changelog
Date Version Changed by Change Description
21-10-2022 1.0 Samaah Initial version created
24-10-2022 1.1 Michelle Saltoun Minor edits
© IBM Corporation 2022. All rights reserved.
about:blank 6/6

Cheat Sheet HTML Elements

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cheat Sheet HTML Elements

Uploaded by

Copyright:

Available Formats

25/02/24, 22:04 about:blank

HTML and HTML5 Elements Cheat Sheet

© IBM Corporation 2022. All rights reserved.

You might also like