This is how it all comes together:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Code Help HTML Cheat Sheet </title>
</head>
<body> .... </body>
</html>
<!DOCTYPE html> specifies that we are working with an HTML5
document.
The following tags contribute extra 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.
3|Page
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<title>Code Help HTML Cheat Sheet</title>
<style>
*{
font-size: 40px;
}
</style>
<script>
alert ('message');
</script>
</head>
STRUCTURE OF A HTML DOCUMENT
While constructing your HTML document, you can use certain
tags to establish its structure. The <h1> to <h5> tags signify
different heading levels, with <h1> being the highest level and
<h5> being the lowest level.
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
4|Page
You use the <p> tag to create a paragraph.
<p> This is a paragraph </p>
The <div> tag can be employed to segment and style different
areas of the document. It also acts as a parent container for other
elements within the document.
This is how it works:
<div class="About Us">
<h1> This is the About Us section </h1>
<p> Welcome to the About Us section! </p>
</div>
<div class="Contact Us">
<h1> This is the Contact Us section </h1>
<p> Contact us on 0123456789 </p>
</div>
We also have the <span> tag. This is similar to <div> but you use
it as an inline container.
<p> Hello <span class="span1"> World! </span></p>
5|Page
There's the <br/> tag, which we use to insert line breaks in the
document. This tag does not require a closing tag.
<p> Welcome to <br/> Code Help </p>
The <hr/> tag is used to create a horizontal line. It also has no
closing tag.
<p> Welcome to <hr/> Code Help </p>
IMAGES IN HTML
In HTML, we use the <img/> tag to insert images into the
document.
Here are some attributes of the <img/> tag.
• src is used to specify the location of the image on your
computer or the internet.
• alt specifies alternative text that displays if the image
cannot be rendered. This text is also helpful for screen
readers.
• height determines the height of the image.
• width determines the width of the image.
6|Page
• border specifies the thickness of the borders around the
image. If no border is added, it is set to 0.
<img src="[Link]" alt="Code Help Logo" width="200" height="200">
TEXT FORMATING IN HTML
HTML provides multiple methods for formatting text. Let's
take a brief look at them now:
• The <i> tag formats text in italics.
• The <b> tag formats text in bold.
• The <strong> tag also formats text in bold and is used to
emphasize important information.
• The <em> tag is another emphasis tag that formats text in
italics.
• The <sub> tag formats text as subscript, like Carbon Dioxide
CO2.
• The <sup> tag formats text as a superscript, like the power
of a number, 23².
• The <small> tag decreases the size of text.
• The <del> tag formats text as deleted by striking a line
through it.
• The <address> tag is used to show the author's contact
information.
• The <abbr> tag denotes an abbreviation.
• The <code> tag formats text as code snippets.
• The <mark> tag highlights text.
• The <ins> tag formats text as inserted, which is usually
underlined.
7|Page
• The <blockquote> tag is used to enclose a section of text
quoted from another source.
• The <q> tag is used for shorter inline quotes.
• The <cite> tag is used to cite the author of a quote.
<p><i> Italic </i></p>
<p><b> Bold </b></p>
<p><strong> Strong </strong></p>
<p><em> Strong </em></p>
<p><sub> Subscript </sub></p>
<p><sup> Superscript </sup></p>
<p><small> Small </small></p>
<p><del> Delete </del></p>
<p><address> Address </address></p>
<p><abbr> Inserted Abbreviation </abbr></p>
<p><code> Code Snippet </code></p>
<p><mark> Marked Text </mark></p>
<p><ins> Insert </ins></p>
<p><blockquote> Quoted </blockquote></p>
<p><q> Short Quoted </q></p>
<p><cite> Cited </cite></p>
LINKS IN HTML
The <a> tag, also referred to as the anchor tag, is used to
establish hyperlinks that link to other pages (external web pages
included) or to a particular section within the same page.
Here are some attributes of the <a> tag:
8|Page
• The href attribute specifies the URL that the link will take the
user to when clicked.
• The download attribute specifies that the target or resource
clicked is a downloadable file.
• The target attribute specifies where the linked document or
resource should be opened. This could be in the same
window or a new window.
<a href="[Link] target="_blank"> Code Help </a>
LISTS IN HTML
• The <ol> tag defines an ordered list.
• The <ul> tag defines an unordered list.
• The <li> tag is used to create items in the list.
<!-- Unordered List -->
<ul>
<li> Course 1</li>
<li> Course 2 </li>
<li> Course 3</li>
</ul>
<!-- Ordered List -->
<ol>
<li> Course 1 </li>
<li> Course 2 </li>
<li> Course 3 </li>
</ol>
9|Page
FORMS IN HTML
The <form> element is used to create a form in HTML. Forms are
used to gather user input.
Some attributes associated with the <form> element include:
• The action attribute specifies where the form data should be
sent when the form is submitted.
• The target attribute specifies where to display the form's
response.
• The autocomplete attribute can have a value of on or off
and determines whether the browser should automatically
fill in the form.
• The novalidate attribute specifies that the form should not
be validated.
• The method attribute specifies the HTTP method to use
when sending form data.
• The name attribute specifies the name of the form.
• The required attribute specifies that an input element
cannot be left blank.
• The autofocus attribute gives focus to the input elements
when the page loads.
• The disabled attribute disables an input element, preventing
the user from interacting with it.
• The placeholder attribute is used to provide a hint to the
user about what information is required for the input
element.
10 | P a g e
Other input elements that can be used in forms include:
• <textarea>: allows users to enter multiple lines of text as
input.
• <select>: provides a list of options for users to choose from.
• <option>: creates a single option within a <select> element.
• <input>: provides an input field for users to enter data. The
type attribute specifies the type of data that can be entered.
• <button>: creates a button that can be clicked to perform an
action.
<form action="/Submit_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 >
<label for="add"> Address: </label>
<textarea name="add"></textarea>
<label for="age"> Age: </label>
<select id="age">
<option value="11-20">11-20</option>
<option value="21-30">21-30</option>
<option value="31-40">31-40</option>
<option value="41-40">41-50</option>
</select>
<input type="submit" value="Submit">
</form>
11 | P a g e
TABLES IN HTML
The <table> tag defines a HTML table.
• <thead>: defines the header information for each column in
the table.
• <tbody>: defines the body or content of the table.
• <tfoot>: defines the footer information of the table. <tr>:
represents a row in the table.
• <td>: represents a single cell in the table.
• <th>: represents the heading for a column of values in the
table.
<table>
<thead>
<tr>
<th> Name </th>
<th> CGPA </th>
</tr>
</thead>
<tbody>
<tr>
<td> Koushik Sadhu </td>
<td> 9.66 </td>
</tr>
<tr>
<td> Pranay Gupta </td>
<td> 9.72 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Nidhi Gupta </td>
<td> 10 </td>
</tr>
</tfoot>
</table>
Tags introduced in HTML5
12 | P a g e
TAGS IN HTML
The following tags were introduced in HTML5:
• <header> tag: defines the header section of a webpage.
• <footer> tag: defines the footer section of a webpage.
• <main> tag: defines the main content section of a webpage.
• <article> tag: defines a standalone section of content, such
as an article.
• <nav> tag: used to contain navigation links.
• <meter> tag: used to measure data within a given range.
• <progress> tag: used as a progress bar to indicate the
completion of a task.
• <dialog> tag: used to create a dialog box.
• <audio> tag: used to embed an audio file on a webpage.
• <video> tag: used to embed a video on a webpage.
• <section> tag: defines a section within a webpage.
• <aside> tag: often used for content placed in a sidebar.
• <time> tag: used for formatting dates and times.
• <figure> tag: used for figures such as charts.
• <figcaption> tag: provides a description for a <figure>.
13 | P a g e
<header>
<h1> Welcome to CodeHelp! </h1>
</header>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h1> About CodeHelp </h1>
<p> This is all about CodeHelp. </p>
<aside>
<p> Book your seat now. </p>
</aside>
</article>
<progress min="0" max="100" value="10"> </progress>
<footer> Copyright © 2023 CodeHelp. All Rights Reserved. </footer>
14 | P a g e
CHARACTER AND SYMBOLS
In HTML documents, some symbols may not be directly available
on the keyboard. However, there are several ways to include
these symbols in a document. These include using the symbol's
entity name, decimal value, or hexadecimal value.
• Copyright Symbol: ©
• Dollar Symbol: $
• Ampersand Symbol: &
• Greater than Symbol: >
• Less than Symbol: <
<!DOCTYPE html>
<html lang="en">
<head>
<title> Code Help HTML Cheat Sheet </title>
</head>
<body>
<p> Copyright Symbol: © </p>
<p> Dollar Symbol: $ </p>
<p> Ampersand Symbol: & </p>
<p> Greater than Symbol: > </p>
<p> Less than Symbol: < </p>
</body>
</html>
15 | P a g e