Download as pdf or txt
Download as pdf or txt
You are on page 1of 4

1/15/24, 9:28 AM about:blank

Module 2 Cheatsheet: HTML5 Overview


Element Description Example
This tag
denotes a
comment in
HTML, which 1. 1
is not
<!-- --> displayed by a 1. <!-- This is a comment -->
browser but
Copied!
can be useful
to hide and
document
code.
1. 1
2. 2
3. 3
4. 4
All HTML
5. 5
documents 6. 6
must start with 7. 7
this 8. 8
declaration. It 9. 9
<!DOCTYPE tells the 1. <!DOCTYPE html>
html> browser what 2. <html>
document type 3. <head>
to expect. 4. <!-- Metadata Here -->
Note that this 5. </head>
6. <body>
element has no 7. <!-- Document Body Here -->
ending tag. 8. </body>
9. </html>

Copied!
This tag,
called an
“anchor tag”
creates
hyperlinks 1. 1
<a href= using the href
“path”>link attribute. In 1. <a href="https://www.ibm.com">IBM</a>
name</a> place of path
Copied!
enter the URL
or path name
to the page
you want to
link to.
1. 1
2. 2
3. 3
4. 4
Contains the 5. 5
contents of the 6. 6
HTML 7. 7
document. It 8. 8
should contain 9. 9
all other tags 1. <!DOCTYPE html>
<body>
besides the 2. <html>
<head> 3. <head>
element to 4. <!-- Metadata Here -->
display the 5. </head>
6. <body>
body of the 7. <!-- Document Body Here -->
document. 8. </body>
9. </html>

Copied!
Often used to 1. 1
separate 2. 2
sections in the 3. 3
body of a 1. <div>
<div>
document in 2. This element has no particular semantic meaning but is often used in conjunction with CSS for styling purposes.
order to style 3. </div>
that content
with CSS. Copied!

Adds a level 1 1. 1
heading to the 1. <h1>Thomas J. Watson</h1>
<h1>
HTML
document. Copied!

about:blank 1/4
1/15/24, 9:28 AM about:blank
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
Contains 8. 8
metadata and 9. 9
should be
<head> placed after 1. <!DOCTYPE html>
2. <html>
the <html> tag 3. <head>
and before the 4. <!-- Metadata Here -->
<body> tag. 5. </head>
6. <body>
7. <!-- Document Body Here -->
8. </body>
9. </html>

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. <!-- Metadata Here -->
contained in 5. </head>
this tag. 6. <body>
7. <!-- Document Body Here -->
8. </body>
9. </html>

Copied!
This tag is
used to place
an img. In
place of path
insert a URL
or a relative 1. 1
<img
file path to the
src=“path” 1. <img src=“https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg” width=“300” height=“300”/>
image
width=“dim1”
location. Other
height=“dim2”> Copied!
optional
attributes
include width
and height of
the image in
pixels.
Element that
creates 1. 1
2. 2
bulleted line 3. 3
items in an 4. 4
ordered or
<li> unordered 1. <ul>
list. Should be 2. <l1>Bullet point 1<l1>
3. <l1>Bullet point 2<l1>
used in 4. </ul>
conjunction
with the <ul> Copied!
or <ol> tags.
1. 1
Used to link 2. 2
an external 3. 3
document,
<link> such as a CSS 1. <head>
2. <link rel=“stylesheet” href=“styles.css”>
file, to an
3. </head>
HTML
document. Copied!
1. 1
Used to 2. 2
provide 3. 3
metadata 1. <head>
<meta>
about the 2. <meta name=“author” content=“Christopher Moore”>
HTML 3. </head>
document.
Copied!
<ol> Element that 1. 1
creates an 2. 2
3. 3
ordered list 4. 4

about:blank 2/4
1/15/24, 9:28 AM about:blank
using 1. <ol>
numbers. 2. <li>Numbered bullet point 1<li>
3. <li>Numbered bullet point 2<li>
Should be 4. </ol>
used in
conjunction Copied!
with the <li>
tag.
This tag is
used to
identify a 1. 1
paragraph. It 1. <p>This is a paragraph of text. It can be as short or as long as needed.</p>
<p>
places a line
break after the Copied!
text it is
enclosed in.
1. 1
2. 2
Used to embed 3. 3
JavaScript in 1. <script>
<script>
an HTML 2. alert(“Hello World”);
document. 3. </script>

Copied!
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
This tag is 10. 10
11. 11
used to denote 12. 12
a table. Should 13. 13
be used with 14. 14
<tr> (defines a 15. 15
table row) and 16. 16
<td> (defines 1. <table>
<table>
a table cell 2. <tr>
within a row) 3. <th>Header cell 1</th>
tags. The <th> 4. <th>Header cell 2</th>
5. </tr>
tag can also be
6. <tr>
used to define 7. <td>First row first cell</td>
the table 8. <td>First row second cell</td>
header row. 9. </tr>
10. <tr>
11. <td>Second row first cell</td>
12. <td>Second row second cell</td>
13. </tr>
14. </table>
15.
16. </td>

Copied!
1. 1
Denotes a cell
<td> within a row, 1. <td>Cell Content</td>
within a table.
Copied!
<th> Denotes the 1. 1
header cells 2. 2
3. 3
within a row 4. 4
within a table. 5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
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>

about:blank 3/4
1/15/24, 9:28 AM about:blank
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 row 1. <table>
<tr>
within a 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!

Element that 1. 1
2. 2
creates an 3. 3
unordered list 4. 4
using
<ul> bullets. Should 1. <ul>
2. <li>Bullet point 1<li>
be used in
3. <li>Bullet point 2<li>
conjunction 4. </ul>
with the
tag. Copied!

Changelog
Date Version Changed by Change Description
18-10-2022 1.0 Michelle Saltoun Initial version created
20-03-2023 1.1 Sneha R Baddi Instructions Updated

© IBM Corporation 2022. All rights reserved.

about:blank 4/4

You might also like