Scribd
Upload
9 views

CheatSheet 2

The document provides descriptions and examples of common HTML elements including <!DOCTYPE html>, <a>, <article>, <aside>, <body>, <div>, <fieldset>, <figcaption>, <figure>, <footer>, and <form>. Each element is defined in 1-2 sentences and an example HTML code snippet is provided for most elements.

Uploaded by

gogem86902
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CheatSheet 2

The document provides descriptions and examples of common HTML elements including <!DOCTYPE html>, <a>, <article>, <aside>, <body>, <div>, <fieldset>, <figcaption>, <figure>, <footer>, and <form>. Each element is defined in 1-2 sentences and an example HTML code snippet is provided for most elements.

Uploaded by

gogem86902
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

1/15/24, 10:10 AM 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>
5. <head>
that this 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
not render as 5. font, color, graphics, and hyperlinks on World Wide Web pages.</p>
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>
not render as 2. Use the aside tag to represent a section of a page that consists
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

about:blank 1/7
1/15/24, 10:10 AM about:blank
document. It 5. 5
should 6. 6
7. 7
contain all 8. 8
other tags 9. 9
besides the
<head> 1. <!DOCTYPE html>
2. <html>
element to 3. <head>
display the 4. <title>Document Title</title>
body of the 5. </head>
document. 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.

about:blank 2/7
1/15/24, 10:10 AM about:blank
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
Creates an
<form> HTML form 1. <form action="/script.php">
2. <fieldset>
for user input.
3. <legend>User:</legend>
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>
7. Document body here
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>
7. Document body here
8. </body>
9. </html>

Copied!
<img This tag is 1. 1
src="path" used to place 2. 2
3. 3
width="dim1" an img. In 4. 4
height="dim2"> place of path
insert a URL 1. <img
or a relative 2. src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg"
3. width="300"
file path to
4. height="300">
the image

about:blank 3/7
1/15/24, 10:10 AM about:blank
location. Copied!
Other
optional
attributes
include width
and height of
the image in
pixels.
Specifies an
input field on 1. 1
a form with 2. 2
the type 3. 3
attribute. 4. 4
5. 5
Common 6. 6
input types 7. 7
include: 8. 8
"color," 9. 9
"date," 10. 10
<input "datetime- 1. <form action="/script.php">
type="?"> local," 2. <fieldset>
"email," 3. <legend>User:</legend>
"number," 4. <label for="fname">First name:</label>
"range," 5. <input type="text" id="fname" name="fname"><br><br>
6. <label for="lname">Last name:</label>
"search," 7. <input type="text" id="lname" name="lname"><br><br>
"url," "tel," 8. <input type="submit" value="Submit">
"datalist," 9. </fieldset>
"select," 10. </form>
"text,"
Copied!
"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!
<ol> Element that 1. 1
creates an 2. 2
3. 3
ordered list 4. 4
using
numbers. 1. <ol>

about:blank 4/7
1/15/24, 10:10 AM about:blank
Should be 2. <li>Numbered bullet point 1</li>
used in 3. <li>Numbered bullet point 2</li>
4. </ol>
conjunction
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!
1. 1
2. 2
Defines an 3. 3
4. 4
important 5. 5
section of a 6. 6
document.
<section> Can be used 1. <section>
2. <h2>Introduction</h2>
within 3. <p>This document provides some examples of how to
headers and 4. use a variety of HTML elements</p>
footers as 5. </section>
well. 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!

about:blank 5/7
1/15/24, 10:10 AM about:blank
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!
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 the 14. 14
header cells
<th> within a row 1. <table>
2. <tr>
within a 3. <th>Header cell 1</th>
table. 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!
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!
<tr> Denotes a 1. 1
row within a 2. 2
3. 3
table. 4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

about:blank 6/7
1/15/24, 10:10 AM about:blank
11. 11
12. 12
13. 13
14. 14

1. <table>
2. <tr>
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!
1. 1
Element that 2. 2
3. 3
creates an 4. 4
unordered list 5. 5
using bullets.
<ul> Should be 1. <ul>
2. <li>Bullet point 1</li>
used in 3. <li>Bullet point 2</li>
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 7/7

You might also like