HTML Tags For Beginners: Your Preparation Cheat Sheet

Table of Contents

Introduction

HTML is the backbone of your website, the skeleton of your webpage and the best part? It is super easy to learn! One can understand HTML within a span of a maximum of three days and this is the ultimate blog for all your HTML tag needs!

You will find here the most useful and the most significant HTML tags you will ever need to create your web pages. This is the cheat sheet you needed but didn’t know existed.

Let’s dive right in!

Basic HTML Tags

<!DOCTYPE html>
<html>
	<head>
  		<title>Title Of The Page</title>
	</head>
	<body>
	</body>
</html>

Given above is the basic HTML boilerplate consisting of basic HTML tags. Let’s look at each tag individually and understand what is happening:

<html></html>: This tag is essential for creating an HTML document. All the content and skeleton for your web page will go inside these tags.
<head></head>: The HTML page is divided into two parts – the head and the body. The head is the HTML tag which contains information regarding the title of the page, the styling of the page and the information regarding the connection of web pages to any other web pages. Basically, the head is the HTML tag that contains information that has to be interpreted by the browser first in order to display the web page. However, no information that is mentioned inside the head tag is displayed on the web page to the user.
<body></body>: The second part of the division of the HTML page is body. The body tag is the HTML tag where all the information that will be displayed to the user is present, text formatting takes place here and scripts for the web page are also generally added inside the body tag.
<title></title>: Have you ever noticed how your tabs are named when you open a website? Those are the results of using an HTML tag called the title tag. The title tag specifies the name you give to your web page.

HTML Tags for Formatting Text

<body>
    	<div>
    		<p></p>
        		<blockquote></blockquote>	
        		<br>
        		<p></p>
    	</div>
    	<span>
    	</span>
</body>

Considering the above code snippet,

<p></p>: The p tag or a paragraph tag is the tag used to create a new paragraph.
<be>: The br tag is an HTML tag that is used to insert a line break between words and/or paragraphs.
<blockquote></blockquote>: The blockquote is an HTML tag which is used to write quotes on the website. This tag helps in getting proper indentation and puts the text in quotes.
<div></div>: The div tag is the HTML tag that is primarily used to segregate block content on the page and format it using CSS.
<span></span>: The span tag is the HTML tag that is primarily used to segregate inline content on the page and format it using CSS.

<body>

<pre> Preformatted Text </pre>

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

<b> Bold Text </b>
<i> Italicized Text </i>
<tt> Typewriter Text </tt>
<code> Source Code (Monospace) </code>
<cite> Citations </cite>
<address> Address Section </address>
<em> Emphasized Text </em>
<strong> Strong Text </strong>

<font size=1> Size 1 Font </font>
<font color="red"> Red Color Font </font>
<font face="sans-serif"> Sans Serif Font </font>

</body>

Considering the above code snippet,

<pre> </pre>: The pre tag is the HTML tag that is used to write preformatted text on the web page.
<h1> </h1> … <h6> </h6>: h1 to h6 are also known as heading tags. These HTML tags are used to write headings of different sizes on the webpage. H1 gives the largest heading whereas h6 gives the smallest heading for your page.
<b> </b>: The b tag is the HTML tag that is used to make your text look bold.
<i> </i>: The i tag is the HTML tag which is used to make your text look italicized.
<tt> </tt>: The tt tag is the HTML tag which converts your text into typewriter text.
<code> </code>: The code tag is the HTML tag used to add source code or pieces of code into your HTML page.
<cite> </cite>: The cite tag is the HTML tag that is used to cite some text or an author or any paper on the HTML page.
<address> </address>: The address tag is the HTML tag that is used to create space for adding address content on the page.
<em> </em>: The em tag is the HTML tag which is used to give emphasis on the content.
<strong> </strong>: The strong tag is the HTML tag that is used to give emphasis on the content in the form of a bold tag.
<font size=?> </font>: The font tag with the size attribute is used to set the font size of the content. You should use CSS for this particular thing instead.
<font color=?> </font>: The font tag with color attribute is used to set the color size of the content. You should use CSS for this particular thing instead.
<font face=?> </font>: The font tag with the face attribute is used to set the font face of the content. You should use CSS for this particular thing instead.