Forum Donate
Learn to code — free 3,000-hour curriculum
FEBRUARY 3, 2022 / #HTML
HTML Cheat Sheet – HTML
Elements List Reference
Ihechikara Vincent Abba
Forum Donate
In this tutorial,
Learnwe will—go
to code over
free commonly
3,000-hour used HTML
curriculum
tags, elements, and attributes. We'll also see examples
of how these tags, elements, and attributes work.
You can use this article as a reference guide whether you're a
beginner or experienced developer.
What Makes Up an HTML
Document?
The following tags define the basic HTML document structure:
<html> tag – This tag acts as a container for every other
element in the document except the <!DOCTYPE html> tag.
<head> tag– Includes all the document's metadata.
<title> tag – Defines the title of the document which is
displayed in the browser's title bar.
<body> tag – Acts as a container for the document's content
that gets displayed on the browser.
Here's what all that looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<title> My HTML Cheat Sheet </title>
</head>
<body></body>
</html>
<!DOCTYPE html> specifies that we are working with an HTML5
Forum Donate
document.
Learn to code — free 3,000-hour curriculum
The following tags give additional information to the HTML
document:
<meta> tag – This tag can be used to define additional
information about the webpage.
<link> tag – Used to link the document to an external
resource.
<style> tag – Used for defining styles for the document.
<script> tag – Used to write code snippets (usually
JavaScript) or to link the document to an external script.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-sc
<link rel="stylesheet" href="style.css" />
<title>My HTML Cheat Sheet</title>
<style>
* {
font-size: 100px;
}
</style>
<script>
alert('This is an alert');
</script>
</head>
HTML Document Structure
When you're fleshing out your HTML document, you'll use certain
tags to create the structure.
Forum Donate
The <h1> to <h6> tags show different levels of headings in a
Learn to code — free 3,000-hour curriculum
document, with <h1> being the largest and <h6> being the smallest.
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
You use the <p> tag to create a paragraph.
<p> This is a paragraph </p>
The <div> tag can be used to divide and style separate sections of
the document. It also acts as a parent container for other elements.
Here's how it works:
<div class="newsSection">
<h1> This is the news section </h1>
<p> Welcome to the news section! </p>
</div>
<div class="contactSection">
<h1> This is the contact us section </h1>
<p> Hello world! </p>
</div>
We also have the <span> tag. This is similar to <div> but you use it
as an inline container.
<p> I love <span class="keyword"> coding! </span></p>
Forum Donate
Learn to code — free 3,000-hour curriculum
There's the <br/> tag, which we use for creating line breaks. This
has no closing tag.
<p> I love <br/> freeCodeCamp </p>
The <hr/> tag is used to create a horizontal line. It also has no
closing tag.
Images in HTML
In HTML, we use the <img/> tag to display images.
Here are some attributes of the <img/> tag:
src is used to specify the path to the location of the image
on your computer or the web.
alt defines an alternate text that displays if the image
cannot be rendered. The alt text is also good for screen
readers.
height specifies the height of the image.
width specifies the width of the image.
border specifies the thickness of the borders, which is set to
0 if no border is added.
<img src="ihechikara.png" alt="a picture of Ihechikara" width="30
Forum Donate
Text Formatting
Learn to code — freein HTML
3,000-hour curriculum
We have many ways to format text in HTML. Let's go over them now
briefly.
<i> displays text in italics.
<b> displays text in bold.
<strong> displays text in bold. Used to make important
emphasis.
<em> another emphasis tag that displays text in italics.
<sub> defines subscript text, like the two atoms of oxygen in
CO₂.
<sup> defines a superscript like the power of a number, 10².
<small> reduces the size of text.
<del> defines deleted text by striking a line through the
text.
<ins> defines inserted text which is usually underlined.
<blockquote> is used to enclose a section of text quoted
from another source.
<q> is used for shorter inline quotes.
<cite> is used for citing the author of a quote.
<address> is used for showing the author's contact
information.
<abbr> denotes an abbreviation.
<code> displays code snippets.
<mark> highlights text.
<p><i> italic text </i></p>
Forum Donate
<p><b>bold text </b></p>
Learn to code — free 3,000-hour curriculum
<p><strong> strong text </strong></p>
<p><em> strong text </em></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><small> small text </small></p>
<p><del> deleted text </del></p>
<p><ins> inserted text </ins></p>
<p><blockquote> quoted text </blockquote></p>
<p><q> short quoted text </q></p>
<p><cite> cited text </cite></p>
<p><address> address </address></p>
<p><abbr> inserted text </abbr></p>
<p><code> code snippet </code></p>
<p><mark> marked text </mark></p>
Links
The <a> tag, also known as the anchor tag, is used to define
hyperlinks that link to other pages (external web pages included) or
to a section of the same page.
Here are some attributes of the <a> tag:
href specifies the URL the link takes the user to when
clicked.
download specifies that the target or resource clicked is
downloadable.
target specifies where the link is to be opened. This could
be in the same or separate window.
<a href="https://www.freecodecamp.org/" target="_blank"> Learn to
Lists Forum Donate
Learn to an
The <ol> tag defines code — free 3,000-hour
ordered curriculum
list while the <ul> tag defines an
unordered list.
The <li> tag is used to create items in the list.
<!-- Unordered list -->
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaScrip t</li>
</ul>
<!-- Ordered list -->
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
</ol>
Forms
The <form> tag is used to create a form in HTML. Forms are used to
get user inputs. Here are some attributes associated with the
<form> element:
action specifies where the form information goes when
submitted.
target specifies where to display the form's response.
autocomplete can have a value of on or off.
novalidate specifies that the form should not be validated.
method specifies the HTTP method used when sending form
data.
name specifies the name of the form. Forum Donate
specifies
required Learn that—an
to code input
free elementcurriculum
3,000-hour cannot be left
empty.
autofocus gives focus to the input elements when the page
loads.
disabled disables an input element so the user can longer
interact with it.
placeholder is used to give users a hint on what information
is required for an input element.
Here are other input elements associated with forms:
<textarea> for getting user text input with multiple lines.
<select> specifies a list of options the user can choose from.
<option> creates an option under the select element.
<input> specifies an input field where the user can enter
data. This has a type attribute that specifies what type of
data the user can input.
<button> creates a button.
<form action="/info_url/" method="post">
<label for="firstName"> First name: </label>
<input type="text"
name="firstName"
placeholder="first name"
required
>
<label for="lastName"> Last name: </label>
<input type="text"
name="lastName"
placeholder="last name"
required
>
Forum Donate
<label for="bio"> Bio: </label>
Learn to code — free 3,000-hour curriculum
<textarea name="bio"></textarea>
<select id="age">
<option value="15-18">15-18</option>
<option value="19-25">19-25</option>
<option value="26-30">26-30</option>
<option value="31-36">31-36</option>
</select>
<input type="submit" value="Submit">
</form>
Tables
The <table> tag defines a HTML table.
<thead> specifies information for each column in a table.
<tbody> specifies the body or content of the table.
<tfoot> specifies the footer information of the table.
<tr> denotes a row in the table.
<td> denotes a single cell in the table.
<th> denotes the value column's heading.
<table>
<thead>
<tr>
<th> Course </th>
<th> Progress </th>
</tr>
</thead>
<tbody>
<tr>
<td> HTML </td>
<td> 90% </td>
</tr>
Forum Donate
<tr>
Learn to code — free 3,000-hour curriculum
<td> CSS </td>
<td> 80% </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> JavaScript </td>
<td> 95% </td>
</tr>
</tfoot>
</table>
Tags introduced in HTML5
Here are some tags introduced in HTML5:
<header> specifies the webpage header
<footer> specifies the webpage footer.
<main> specifies a main content section.
<article> specifies an article's section, usually for content
that can stand alone on the webpage.
<section> is used to create separate sections.
<aside> is usually used to when placing items in a sidebar.
<time> is used for formatting date and time.
<figure> is used for figures like charts.
<figcaption> denotes a description of a figure.
<nav> is used to nest navigation links.
<meter> is used to measure data within a range.
<progress> is used as a progress bar.
<dialog> is used to create a dialog box. Forum Donate
<audio> isLearn
usedto
tocode
embed an audio
— free file incurriculum
3,000-hour the web page.
<video> is used to embed video.
<header>
<h1> Welcome </h1>
<h3> Hello World! </h3>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
<article>
<h1> An article about us </h1>
<p> Article content </p>
<aside>
<p> It's sunny today </p>
</aside>
</article>
Progress: <progress min="0" max="100" value="50"> </progress>
<footer> Copyright 2022-2099. All Rights Reserved. </footer>
Conclusion
In this article, we have seen a lot of HTML tags, elements, and
attributes commonly used by developers. This is not all there is, but
should serve as a good reference resource.
I hope you found this helpful. Thank you for reading. Forum Donate
Learn to code — free 3,000-hour curriculum
Ihechikara Vincent Abba
ihechikara.com
If you read this far, thank the author to show them you care.
Say Thanks
Learn to code for free. freeCodeCamp's open source curriculum has
helped more than 40,000 people get jobs as developers.
Get started
ADVERTISEMENT
Forum Donate
Learn to code — free 3,000-hour curriculum
Unix, Linux, and Windows
Zero Setup Fees. 24/7 Uptime
Monitoring. 4 Hour Provisioning
InterServer
Open
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States
Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public.
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.
You can make a tax-deductible donation here .
Forum Donate
Trending Guides
Learn to code — free 3,000-hour curriculum
Binary Search in C++ Binary Search in Java Lambda Sort in Python
List Flatten in Python Python Print Exception Enhanced Java for-loops
JS Comparison Operators Python Program Examples Create a Dict in Python
Python Remove from List Pip Upgrade Undo Git Add
Operators in C Dataframe to CSV JavaScript Replace
What is R Squared? Git Squash Commits Integer Array in C
Gradient Descent ML JS Ternary Operator Print Newline in Python
Bash Scripting Tutorial Create an Array in Java Trim a String in Python
Static Variables in Java What Does => Mean in JS? Python Iterate Over Dict
Install Node.js on Ubuntu SQL Where Contains String How to Join Lists in Python
Mobile App
Our Charity
About Alumni Network Open Source Shop Support Sponsors Academic Honesty
Code of Conduct Privacy Policy Terms of Service Copyright Policy
