HTML Tags For Beginners: Your Preparation Cheat Sheet

HTML Tags For Beginners: Your Preparation Cheat Sheet
HTML Tags For Beginners: Your Preparation Cheat Sheet

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.  

Attributes for Body HTML Tag

  • <body bgcolor=”#”>: This HTML tag sets the background colour of the body. One can add either the name of the colour or the hex of the colour.   
  • <body text=”#”>: This HTML tag sets the text colour of the text in the body. One can either add the name of the colour or the hex of the colour.  
  • <body link=”#”>: This HTML tag sets the text colour of the links in the body. One can either add the name of the colour or the hex of the colour. 
  • <body vlink=”#”>: This HTML tag sets the colour of the visited links in the body. One can either add the name of the colour or the hex of the colour. 
  • <body alink=”#”>: The HTML tag sets the colour of the active links. The active links get activated when the mouse is clicking the link. 

HTML Tags for Creating Lists 

<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>

<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>

Consider the above code snippet, 

  • <ul> </ul>: The ul tag is the HTML tag which is used to create an unordered list. 
  • <ol start=”#”> </ol>: The ol tag is the HTML tag which is used to create an ordered list. The start attribute is used to set what the list starts with.  
  • <li> </li>: The li tag is the HTML tag that is used to create the list item for a particular ordered and unordered list. 
  • <dl> </dl>: The dl tag is the HTML tag which is used to create a descriptive list. 
  • <dt> </dt>: The dt tag is the HTML tag which is used to create the heading for the term being defined. 
  • <dd> </dd>: The dd tag is the HTML tag that is used to create the description for the term being defined. 

HTML Tags for Adding Graphics

<body>
<hr> 
<hr size="1">
<hr width="20%">
<hr noshade>

<img src="#"/>
<img src="#" align="left"/>
<img src="#" border="2px"/> 
<img src="#" height="200px"/>
<img src="#" width="200px" />
<img src="#" alt="Image Text" />
</body>

Consider the above code snippet, 

  • <hr>: The hr tag is the HTML tag that is used to create a horizontal rule. It works with different attributes – size, which is used to set the size of the horizontal rule; width, which is used to set the thickness of the horizontal rule and noshade, which is used to remove the shadow of the hr tag. 
  • <img>: The img tag is the HTML tag that is used to put images on your web page. The img tag has several attributes – src, which is used to set the path of the image; align, which is used to align the image; border, which is used to add a border to your image; height, which is used to set the height of the image; width, which is used to set the width of the image; alt, which is used to set the alternate text for your image and nowadays it is a good practice to provide alternate text for all the images on your web page. 

HTML Tags to Add Links

<body>
<a href="#"> Link Text </a>
<a href="mailto:address"> Email Text </a>
<a name="#location"> Location </a>
</body>

Consider the above code snippet,

The a tag, also called the anchor tag is the HTML tag, which is used to add links to your web page. There are certain attributes associated with the a tag. The href attribute sets the path of your link and/or adds email addresses. If you wish to link a location on your web page, you can use the name attribute.  

blog banner 1

HTML Tags to Create and Handle Forms

<form>
    <select name="dropdown-menu">
    <option></option>
    <option></option>
    </select>
    
   <input type=”#”>

    <textarea name="space" cols="x" rows="y"></textarea>
</form>

Consider the above code snippet,

  • <form> </form>: The form tag is the HTML tag which is used to create forms. 
  • <select> </select>: The select tag is the HTML tag that is used inside the body of the form to create a dropdown menu. 
  • <option> </option>: The option tag is the HTML tag that is used to set the options of the dropdown menu and is used inside the select tag’s body. 
  • <input>: The input tag is the HTML tag that is used to specify which kind of input is the form taking. You will read more about these in the upcoming section. 
  • <textarea>: Textarea is the HTML tag that can be provided to the users to add textual data in the form. Its height and width are set by using rows and columns. 

HTML Tag for Input and Its Attributes 

<input type="checkbox">
    <input type="checkbox" checked>
    <input type="radio">
    <input type="radio" checked>
    <input type="text">
    <input type="submit">
    <input type="image">
    <input type="reset">
    <input type="email">
    <input type="url">
    <input type="number">
    <input type="range">
    <input type="date">
    <input type="month">
    <input type="week">
    <input type="time">
    <input type="search">
    <input type="color">

Consider the above code snippet,

The input tag is used to specify which kind of input is from taking. The type attribute decides which kind of input that will be. There are several available options – checkbox, radio, text, submit (this creates a submit button), image (this helps in uploading an image), reset (this creates a reset button), email, URL, number, range, date, month, week, time, search and colour. If you will add checks to either a checkbox or a radio type input then by default they will appear selected on the web page. 

HTML Tags for Tables and Its Attributes 

<table>
	<th></th>
	<tr>
		<td></td>
	</tr>
</table>

Consider the above code snippet, 

  • <table> </table>: The table tag is the HTML tag which is used to create a table on your web page. 
  • <th> </th>: The th tag is the HTML tag which is used to add headings to columns. 
  • <td> </td>: The td tag is the HTML tag which is used to add columns to the table. 
  • <tr> </tr>: The tr tag is the HTML tag which is used to add rows to the table. 
<table border="2px">
<table cellspacing="2px">
<table cellpadding="2px">
<table width="100px">
<tr align="left">
<td align="right">
<td valign="middle">
<tr valign="middle">
<td rowspan="3">
<td colspan="3">

Consider the above code snippet, 

  • There are certain attributes you can use with the table tag. The border attribute specifies the width of the border used in the table. The cellspacing attribute specifies the amount of space that exists between table cells. The cellpadding attribute specifies the amount of space that exists between the cell border and the contents. The width attribute sets the width of the table. 
  • There are certain attributes for both td and tr tags. The align attribute horizontally aligns the content and valign attribute vertically aligns the content. The rowspan attribute sets the number of rows a cell should span and similarly the colspan attribute sets the number of columns a cell should span. 

Frequently Asked Questions

What are the basic tags of HTML?

The basic tags of HTML are html, head, title and body.

What are the five basic HTML tags?

The five basic HTML tags include html, head, title, body and p.

What is an HTML tag example?

<body> </body> is an example of an HTML tag.

What are the four basic HTML tags?

The four basic HTML tags are html, head, title and body.

What are the five types of HTML?

The five types of HTML are HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01 and HTML 5.0.

Conclusion

HTML is an easy to comprehend and interesting language. You can create your page layout anyhow you want to with HTML and then stylise it with CSS and add interactivity with JavaScript

With this cheat sheet, it becomes extremely easy to understand the HTML tags. Keep revisiting and using this sheet for all your HTML tag needs. 

Happy Learning

By Pooja Gera