Scribd
Upload
32 views5 pages

C2M1 Cheatsheet v1.1 DRAFT

This document provides a cheat sheet of common HTML elements and their descriptions and examples. It includes elements for text formatting (<h1>, <p>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <td>, <th>), and more. The cheat sheet is intended to serve as a quick reference for basic HTML tags and their purposes.

Uploaded by

censors
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views5 pages

C2M1 Cheatsheet v1.1 DRAFT

This document provides a cheat sheet of common HTML elements and their descriptions and examples. It includes elements for text formatting (<h1>, <p>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <td>, <th>), and more. The cheat sheet is intended to serve as a quick reference for basic HTML tags and their purposes.

Uploaded by

censors
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Introduction to Web Development with HTML, CSS, and JavaScript

HTML Elements Cheat Sheet


HTML Tags

Element Description Example


<!-- --> This tag denotes a comment in HTML, which is <!-- This is a comment -->
not displayed by a browser but can be useful to
hide and document code.
<!DOCTYPE All HTML documents must start with this <!DOCTYPE html>
html> declaration. It tells the browser what document <html>
type to expect. Note that this element has no <head>
ending tag. <title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<a href= This tag, called an “anchor tag” creates <a href="https://www.ibm.com">IBM</a>
“path”> hyperlinks using the href attribute. In place of
path enter the URL or path name to the page
you want to link to.
<body> Contains the contents of the HTML document. It <!DOCTYPE html>
should contain all other tags besides the <html>
<head> element to display the body of the <head>
document. <title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<div> Often used to separate sections in the body of a <div>
document in order to style that content with This element has no particular semantic
CSS. meaning but is often used in conjunction
with CSS for styling purposes.
</div>
<h1> Adds a level 1 heading to the HTML document. <h1>Thomas J. Watson</h1>
<head> Contains metadata and should be placed after <!DOCTYPE html>
the <html> tag and before the <body> tag. <html>
<head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<html> The root element of an HTML document. All <!DOCTYPE html>
other tags in the document should be contained <html>
in this tag. <head>
<title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<img This tag is used to place an img. In place of <img
src=“path” path insert a URL or a relative file path to the src=“https://upload.wikimedia.org/wikipedia/com
width=“dim1” image location. Other optional attributes mons/
height=“dim2” include width and height of the image in pixels. 7/7e/Thomas_J_Watson_Sr.jpg” width=“300”
> height=“300”>
<li> Element that creates bulleted line items in an <ul>
ordered or unordered list. Should be used in <li>Bullet point 1</li>
conjunction with the <ul> or <ol> tags. <li>Bullet point 2</li>
</ul>
<link> Used to link a CSS document to an HTML <head>
document. <link rel=“stylesheet” href=“styles.css”>
</head>
<meta> Used to provide metadata about the HTML <head>
document. <meta name=“author” content=“Christopher
Moore”>
</head>
<ol> Element that creates an ordered list using <ol>
numbers. Should be used in conjunction with <li>Numbered bullet point 1</li>
the <li> tag. <li>Numbered bullet point 2</li>
</ol>
<p> This tag is used to identify a paragraph. It <p>Thomas J. Watson, Sr. is the American
places a line break after the text it is enclosed industrialist, who built the International
in. Business Machines Corporation (IBM) into the
largest manufacturer of electric typewriters
and data-processing equipment in the world.</p>
<script> Used to embed JavaScript in an HTML document. <script>
alert(“Hello World”);
</script>
<style> Used to apply simple CSS to an HTML document. <head>
<style>
p {color:red}
</style>
</head>
<body>
<p>This paragraph will be red because I’ve
styled the paragraph tag with CSS.</p>
</body>
<table> This tag is used to denote a table. Should be <table>
used with <tr> (defines a table row) and <td> <tr>
(defines a table cell within a row) tags. The <th>Header cell 1</th>
<th> tag can also be used to define the table <th>Header cell 2</th></tr>
header row. <tr>
<td>First row first cell</td>
<td>First row second cell</td>
</tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>
<td> Denotes a cell within a 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>
<td>Second row second cell</td>
</tr>
</table>
<th> Denotes the header cells within a 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>
<td>Second row second cell</td>
</tr>
</table>
<title> Defines the title of the HTML document <!DOCTYPE html>
displayed in the browser’s title bar and tabs. It is <html>
required in all HTML documents. It should be <head>
contained in the <head> tag. <title>Document Title</title>
</head>
<body>
Document body here
</body>
</html>
<tr> Denotes a 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>
<td>Second row second cell</td>
</tr>
</table>
<ul> Element that creates an unordered list using <ul>
bullets. Should be used in conjunction with the <li>Bullet point 1</li>
<li> tag. <li>Bullet point 2</li>
</ul>

You might also like