THE ULTIMATE
www.bongodev.com
The Ultimate HTML Cheat Sheet
HTML
Stands for HyperText Markup Language
To create hyperlinks and to markup
contents in the webpage that renders
on the browser
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
An HTML – document consists of two major parts
1 <!DOCTYPE html> Document type declaration
<html>
2 Root element
</html>
The root element <html> consists of two major parts
<html>
Container/holder to provide
1 <head> </head> information to the browser / SEO
Container/holder for other tags
2 <body> </body> (heading, image, table form,
etc) to render content in the
browser
</html>
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
<html>, <head>, <body> - are known as tags/elements.
Tags/Elements are the building blocks of an HTML page or
document. We can’t create a Web page without the
tags/elements
This language uses HTML tags to structure web pages, so they
will have a header, body, sidebar, and a footer etc.
It is easy to forget tags and a great solution to have a cheat
sheet in front of you in your difficult moment
"I could either watch it
happen or be a part of it."
Elon Musk
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
Opening (start)-closing (end)
Vs
Self Closing Tags
Generally, each tag has start/opening and end/closing parts.
The end tag is followed by a forward slash (/) before the tag
name.
Opening (start)-closing (end)
<h1> This is a heading </h1>
start/opening tag end/closing tag
Content – renders in the browser
Example:
<html>, <body>, <h1> to <h6>, <p>, <div>, <form>,
<sup>, <sub>, <ul>, <ol>, <li>, <a>, <strong>, <em>
There are other tags that do not have start or end tag which
Self Closing Tags
are known as self closing tags
Example:
<img> <br>, <link>, <hr>, <input>,
<label>
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
Block Vs Inline Elements/Tags
Block Elements:
Takes the full width of the device screen and always starts in
a new line
Example:
<div>, <p>, <h1>-<h6>, <form>, <article>, <aside>, <dd>,
<dl>, <dt>, <figcaption, <figure>, <footer>, <header>, <hr>,
<li>, <main>, <nav>, <ol>, <section>, <table>, <tfoot>, <ul>,
<video>, <hr>
Inline Elements:
Takes the required width of the device screen only for its
content
Example:
<a>, <big>,<br>, <button>, <code>, <em>,
<i>, <img>, <input>, <label>, <map>,
<script>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <textarea>, <time>
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
It’s better to have a Cheat Sheet in your hand
<html> ….</html>
This tag is the root element of a webpage. It appears at the very first and last line
of the webpage. It is the parent tag or holder for every other tag used on the page.
<head>…. </head>
It consists of metadata about the webpage to provide the website’s
information to google/SEO.
<title> …. </title>
This tag contains the title/name of the webpage. Search engines use this tag to
extract the topic of the webpage to rank relevant search results.
<link/>
Used to link external resources on the page. For example - style sheet,
CDN links, google fonts, script tag etc
<meta/>
This is the metadata tag for the webpage to provide the author, keywords, and
description to the search engine.
<body> …. </body>
It is the container of all tags to render contents in the browser. Everything we
see on the device screen exists inside this tag.
Example:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href = "style.css">
</head>
<body>
<h1>I’m a heading</h1>
</body>
</html>
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
<div> …. </div>
Is known as a container and can contain other tags. It is a block
element
<h1 to h6>
There are 6 heading tags available – h1, h2, h3, h4, h5, h6
<h1> has the largest font size, and <h6> has the smallest
<p> … .</p>
Paragraph tag which contains text
<span> …. </span>
Inline element and container of text, icon, image etc
<hr>
It draws a horizontal line across the width of the page
<br>
A line break for elements. Used to create a new line
<strong> … .</strong>
To make text bold
<em> …. .</em>
To make text Italic
<sub> …. </sub>
Used for writing a subscript (smaller font just below the mid-point of
normal font). Example: O2
<sup> … </sup>
Used for writing superscripts. Example: x²
Example
<div>
<h1>I’m a heading</h1>
<p> This is a paragraph
<span>an icon</span> of 20 words </p>
<hr>
<h2>I’m smaller than h1 tag</h2> <br>
<strong>Make me bold</strong>
<em>Make me Italic</em>
bongoDev bootcamp
</div>
www.bongodev.com
The Ultimate HTML Cheat Sheet
Links / Anchor Tag
<a href=””> …</a>
Known as an Anchor tag. Used for creating hyperlinks
<a href=”#about”> …</a>
To navigate to a specific section (div) of the webpage.
<a href=”mailto:xyg@gmail.com”> …</a>
For sending emails.
Image
<img >
Used to display images on the webpage
Image Attributes:
Key and value separated by equal (=) sign
src=“url”
Relative / absolute path of an image
alt=“text”
The text is useful for SEO and the alt text will appear if the image is broken for
some reason
width=“400px”
Specifies image with in pixels or percentages and keeps aspect ratio
border=“”
Specifies border thickness of an image. Default value is 0. if border not
mentioned
Video
<video src= "relative/absolute path" controls autoplay loop></video>
controls > provide video controllers
autpplay > video starts automatically when webpage loads on the browser
loop > never video stops, keeps playing
Iframe
<iframe> ….</iframe>
An inline block of element, is used as a container to embed media files. It can
contain a webpage, YouTube video, Google map etc.
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
HTML Lists
<ol> ….</ol>
Renders a list of items/elements in an ordered manner
<ul> ….</ul>
Renders a list of items/elements in an unordered manner. The most commonly used tag to create navbar
or nav list
<li> ….</li>
Represents an item on a list
<dl> ….</dl>
Description list. Used to define description of items. For example grocery item list
<dt> ….</dt>
The definition/name of a single term
<dd> ….</dd>
The description for the item.
Example
<ol>
<li>January</li>
<li>February</li> <dl>
<li>March</li> <dt>Walton</dt>
</ol> <dd> D eshi brand</dd>
<ul>
<dt>Iphone</dt>
<li>Python</li>
<li>Node</li> <dd>Apple product</dd>
<li>JavaScript</li> </dl>
</ul>
Entity
Character entities are used to display reserved characters in HTML. Some characters are
reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags. Character entities are used to display reserved
characters in HTML. A character entity looks like this: &entity_name;
To display a less than sign (<) we must write: < or <
The followings are the the commonly used entities:
© ©
® ®
< <
> >
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
HTML Forms
<form> ….</form>
The parent tag for an HTML form and consists of many input tags or button
action=“url”
The URL is the End Point to pass data to the back endpoint (API)
Method=“POST”
HTTP method ( generally POST ) to submit or post the form data.
<label> …</label>
Used to label a field in the form.
<input >
Is used to take input from the user. The input type is determined by a number of
attributes. It takes different data types, i.e. text, email, password, name, mobile
number, messages and it could be a submit or reset
Form Input Type Attribute
type=””
Determines which type of input (text, email, dates, password) is requested from the user.
Name=””
Specifies the name of the input field.
Value=””
Specifies the value contained in the input field
Required
If the required attribute is added to the input field, it specifies a mandatory field
and value can not be empty. The Form won’t allow you to submit data.
Placeholder=””
Used to give hints to the user about the nature of the input value
disabled
Disables the input element and the user can not input data.
<textarea> …</textarea>
Used for longer strings of input. Used to input message or email body
<select> …</select>
Allows user to choose an option from a list of options
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
Form Option Attribute
value=””
The visible text for the user for any given option
selected
Determines which option is selected by default when the form loads
<button> …</button>
Tag for creating a button for form submission
Example
<form action="form_submit.php" method="POST">
<fieldset>
<input type="text" name="full_name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Email”
<input type=”password" name=”password" placeholder=”Password"
<textarea name="message" placeholder=“Your message…………”></textarea>
<input type="submit" value="Submit">
</fieldset>
</form>
Table
<table> …</table>
To create a table in the webpage
<caption> …</caption>
Table title. H1, h2 or h3 tags can be used for table caption
<thead> …</thead>
Contains table header information
<tbody> …</tbody>
Contains table body data information
<tr> …</tr>
Describes a single row in a table.
<th> …</th>
Contains the value of a heading of a table’s column.
<td> …</td>
A single cell of a table. Contains the actual value/data for a particular header.
bongoDev bootcamp
www.bongodev.com
The Ultimate HTML Cheat Sheet
HTML5 / Semantic Elements
<header> ….</header>
Defines the header of a webpage. It replaced <div> container. Container of the header items
<footer> ….</footer>
Defines the webpage footer. Container of the footer items.
<main>….</main>
Marks the main content of the webpage.Or,webpage body.
<article>….</article>
Used to create blog article
<aside> …</aside>
Defines content displayed as a sidebar of the webpage. Side NavBar or to define side notes
<section>….</section>
Defines a particular section on the webpage. Example: Hero/Showcase section
<figure>….</figure>
A tag reserved for images, and figures (chart, diagram) in HTML5.
<figcaption> ….</figcaption>
A description of the figure is placed below the image or figure.
<nav>….</nav>
To create a Navbar. Navigation links store here for a webpage.
<menuitem>…</menuitem>
A particular item from a list or a menu.
<time>….</time>
Tag for formatting date and time. Usually used to define a blog article published date
bongoDev bootcamp
