HTML is one of the key technologies that is powering the modern web. Almost all the websites and web apps that we see on the web today have used HTML for their development. Thus, whether you are an aspiring or a professional web developer, you need to develop a solid understanding of HTML. In this HTML cheat sheet, we will share all the essential information about HTML that you should know to make the most out of this markup language. Let us get started by discussing the key highlights of HTML:
- HTML stands for Hypertext markup language.
- It is the standard markup language for the World Wide Web ( WWW ).
- HTML allows us to create the basic structure of web pages and add various elements to them.
- It contains many tags and all tags have certain functionality.
- The tag defines the nature of the contents.
Common Collective Objects Used in HTML
| HTML Object | Description |
| © | To create a copyright sign |
| &commat | To create @ symbol |
| &bull | To create a small bullet |
|   | For Non-breaking space |
| & | For Ampersand (&) |
| < | < sign |
| < | > sign |
| &trade | For Trademark symbol |
HTML Tag Component
An HTML tag has two major components:
- Tag name
- Attributes
Tag Name: The word or character written in HTML just after the < symbol is considered as a tag name. Attribute: The word or character written in an HTML tag just after the tag name is considered as a tag attribute. A tag can have many attributes. Attributes provide additional information about the tag. Example:
<a href =” google.com”> Google </a>
In the above example, a is the tag name and href is an attribute and Google is the content of <a> tag.
Types of Tags
There are two types of HTML tags:
- Pair tags
Tags that have an opening and ending tag are known as pair tags. Examples: <p> for paragraph </p>, <h1>for heading </h1>.
- Single tags
Tags that do not have opening and ending tags are known as single tags. Examples: <br/>, <hr/>
HTML 5
Released in 2014, HTML 5 is the latest version of HTML. Compared to the previous HTML versions, HTML5 supports several new tags, such as <video> and <audio>.
HTML Tags Cheat Sheet
Document Basic Tags
| Tag | Description |
| <!DOCTYPE html> | It tells the browser to use the current version of HTML. |
| <html> </html> | It is the parent tag of every tag, and each tag of a webpage lay inside it. |
| <head> </head> | Head tag contains title tag, meta data and conventionally <script > and <style> tags. |
| <title> </title> | It is a content tag that contains the title of the web page. |
| <body> </body> | Body tag includes all the other tags that represent the content in a web page. |
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Document Information Tags
Document information tags deal with the communication with the browser and give extra information to the browser about an HTML page.
| Tag | Description |
| <base/> | It is used to give information to the browser about the base or homepage URL of a website. |
| <meta/> | Meta provides extra information about the web page, such as page description, author, published data, language, etc. |
| <link/> | Link tag is used to add an external css file. |
| <style> </style> | Style tag makes it possible to add CSS in an HTML file. |
| <script> </script> | The script tag is used to link and add JavaScript in an HTML file. |
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset =”utf-8”>
<base href=https://www.techgeekbuzz.com target=”blank”>
<link rel =” ”>
<style> </style>
<script> </script>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Document Structure Tags
Document structure tags provide a structure to the content inside them. These tags generate a box-like structure and all the content stays inside it.
| Tag | Description |
| <h1> </h1> To <h6> </h6> | In HTML, we have 6 heading tags. The <h1> is the largest heading and the <h6> is the smallest one. |
| <p> </p> | <p> tag represents a paragraph, and if we do not give any tag to a content in an HTML document, the browser would consider the content as a paragraph. |
| <div> </div> | The <div> tag provides a generic container. We can use the div tag to create different sections on a web page. |
| <span> </span> | The <span> tag is similar to the <div> tag, however, it is used as an inline container. |
| <br/> | <be> tag is used for line break. |
| <hr/> | The <hr> tag is used to create a horizontal line. |
Example:
<body>
<div>
<h1> first heading</h1>
<p> first paragraph</p>
</div>
<br/>
<hr/>
div>
<h1> second heading</h1>
<p> second paragraph</p>
</div>
</body>
Text Formatting Tags
There are many tags in HTML that are used to format the text style. Mostly, these tags apply on paragraph content.
| Tag | Description |
| <strong> … </strong> | It is used to bold the text. |
| <b> </b> | This tag can also bold the text. |
| <em>…. </em> | The <em> tag emphasizes a text by italicizing it. |
| <i>… </i> | This tag italicizes the text. |
| <strike> <strike> | The <strike> tag adds strikethrough to the text. |
| <pre> </pre> | This tag preformats text, here the monospace text is laid out with white space. |
| <del> </del> | This tag highlights the previous deleted text. |
| <blockquote> </blockquote> | The <blockquote> tag provides quotation for long paragraphs. |
| <q> </q> | The <q> tag is used for short quotation. |
| <abbr> </abbr> | This tag is used to denote the abbreviation of any text. |
| <sub> </sub> | Sub stands for subscript, and the <sub> tag shrinks the text up to half of the default text. |
| <sup> </sup> | Sup stands for superscript, and the <sup> tag also shrinks the text but puts it upside. |
| <small> </small> | The <small> tag is used to reduce the size of a text. |
Links Tag
Links and hyperlinks are the most important tags in HTML. With these tags, we can link one web page with another.
| Tag | Description |
| <a href= “ ”> </a> | This is also known as an anchor tag and is used for adding a hyperlink. |
| <a href=”#div_name” > </a> | This tag adds a link to the same page. |
Image tags with attributes
| Tags and attributes | Description |
| <img/> | It is an image tag, which is used to include and display images. |
| src = ‘URL’ | Src stands for source, and it is an attribute of <img> tag which accepts the value of image URL and image itself. |
| alt = “text” | Alt stands for alternative, and the <alt> tag provides alternative information of an image. |
| height = “” | Height is an attribute of the image that specifies the height of the image. |
| width= “ ” | Width is an attribute of the image that specifies the width of the image. |
| align= “ ” | It is an attribute that deals with the alignment of the image. |
| <map> </map> | The map tag adds some clickable areas to an image. |
| <area/> | It is a tag that specifies the area of the image map. |
Example:
<img src="car.jpg" alt="car image">
List Tags
HTML has tags to create lists.
| Tag | Description |
| <ol> </ol> | Create an odered numeric list. |
| <ul> </ul> | Create a bulleted list. |
| <li> <li> | Li tag lay inside the ul or ol tags, and it creates the list items. |
| <dl> </dl> | Reversed specifically for list items definitions. |
| <dt> </dt> | Adds the definition of a single term in line with body content. |
| <dd> </dd> | Adds description for the defined term. |
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<dl>
<dt>Cola</dt>
<dd>- black</dd>
<dt>blood</dt>
<dd>Red</dd>
</dl>
Table Tags
In HTML we have table tags to create tables.
| Tags | Description |
| <table> <table> | The table tag identifies and contain all the table related content. |
| <caption> </caption> | Caption contain the description of a specific table. |
| <tbody> </tbody> | It contains table data or information. |
| <tfoot> </tfoot> | It defines all the footer content. |
| <tr> </tr> | Contains the information to be included in a single row. |
| <th> </th> | Represents the table heading. |
| <td> </td> | Contains the actual information of data for a single table cell. |
Example:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Forms
By using forms, we can collect data from the user interacting with a web page.
| Tag | Description |
| <form> </form> | It creates a form. |
| <fieldset> </fieldset> | Used to identify the groups of all fields on a form. |
| <label> </label> | It provides a label to each form field. |
| <legend> </legend> | It works as a caption for the field set element. |
| <input/> | The form input attribute defines the type of field information to receive from a user. |
| <textarea> </textarea> | This tag creates a large text input field for longer text. |
| <select> </select> | Create a dropdown box for users to choose from a variety of options. |
| <option> </option> | Specifies one of the available options in the drop-down list. |
| <button> </botton> | Creates a clickable button to submit the form. |
Form Specification
| Form Attributes and Input Type | Description |
| action= “URL” | It is an attribute of <form> tag to specify where to send the form data. |
| method = ” ” | It refers to the HTTP methods, such as Get or Post. |
| enctype = “ ” | This attribute deals with how the form data is to be encoded when submitting the data to the webserver. |
| autocomplete | Used to enable or disable auto-completion. |
| type = “ ” | This is an input attribute that specifies the field input type that could be text, password, date-time, checkbox, submit, etc. |
| name = “ ” | It specifies the name of the form or input types. |
| value = ” “ | It provides value to the input fields. |
| size= “ ” | It specifies the input character size. |
| maxlength=” ” | Used to define the number of maximum input characters. |
| required | Used to mark an input field that should be filled to submit the form. |
| width =” ” | Specifies the width of the input field. |
| height =” ” | Specifies the height of the input field. |
| Placeholder = “ ” | It helps to provide a hint for filling an input field of a form. |
| Min = ” ” | Specified the minimum value allowed for input fields. |
Example:
<form action="go.php">
<fieldset>
<legend>Information</legend>
First name:<br>
<input type="text" name="firstname" value="Jhon"><br>
Last name:<br>
<input type="text" name="lastname" value="Smith"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Iframe
An iframe is often used to display a webpage within a web page. Example:
<iframe src="go.html" style="border:2px solid red;"></iframe>
New Tags in HTML5
There are many new tags introduced in HTML 5 that are discussed in the following table:
| Tag | Description |
| <header> </header> | It specifies a header block for HTML documents. |
| <footer> </footer> | It specifies a footer block for HTML documents. |
| <main> </main> | This tag specifies the main content of an HTML document. |
| <detail> </detail> | Provides additional information in a an HTML document. |
| <figurecaption> </figurecaption> | It can caption the figure. |
| <figure> </figure> | It creates independent block featuring diagram and photos. |
| <mark> </mark> | Highlights the content. |
| <nav> </nav> | Creates a navigation bar. |
| <meter> </meter> | Describes scalar measurement. |
| <progress> </progress> | Displays an animation for loading or processing. |
| <rp> </rp> | Displays text within the browser that does not support ruby annotation. |
| <time> </time> | Used to specify time and date. |
| <wbr> | Generates a new line. |
| <ruby> <ruby> | Specifies ruby annotation. |
To Sum it Up
HTML is a markup language that is one of the key technologies used for creating web pages and web apps. While working as a web developer, you need to have an in-depth understanding of various aspects of HTML. The markup language allows you to structure web pages and add various elements to them. In this HTML cheat sheet, we have discussed various important HTML tags that often need to use for creating web pages. While working with HTML, you need to make use of a wide range of tags for adding text, images, forms, tables, etc. to web pages. We hope that this HTML cheat sheet will help to work efficiently with HTML for developing interactive websites and web apps. If you have any queries or suggestions, share them with us in the comments sections below.
People are also reading:
Leave a Comment on this Post