Learn HTML in Minutes – Cheat Sheet
HTML stands for HyperText Markup Language. It is a markup language that allows us to make web pages for websites. It is just a simple text file with a .html or .htm extension. Likewise other programming languages, HTML also has many versions, here we will talk about HTML5.
It is human-readable and uses tags to define what manipulation has to be done. It is used by browsers to manipulate text, images, and other content, in order to display it in the required format.
HTML is created by Tim Berners-Lee in 1991. You can learn the different tags and elements on a site like w3schools, understand how they work, and familiarise yourself with the language. This article is concerned with HTML syntax and some useful information.
HTML element is defined by a start tag, some content, and end tag. There are some empty tags, which means that they do not need any end tag.
<tagname> Contents... </tagname>
Every HTML5 document must start with this declaration. It is recommended by W3C
HTML comments are not displayed by browser but it is helpful for developers to debug the code later.
<!-- Comments here -->
This is the most important heading
<h1>Heading level 1</h1>
This is less important heading than heading 1
<h2>Heading level 2</h2>
This is the least important heading than heading 2
<h3>Heading level 3</h3>
This heading has ranking 4
<h4>Heading level 4</h4>
This heading has ranking 5
<h5>Heading level 5</h5>
This heading has ranking 6
<h6>Heading level 6</h6>
HTML Text Formatting
It also makes the text bold with added semantic importance.
<strong>This is strong text</strong>
This element is used to make the text smaller.
<small>This is small text</small>
It is also possible to highlight a text in HTML using this tag.
<mark>This is marked/highlighted text</mark>
We can make the text bold using this tag.
<b>This is bold text</b>
This tag is used to italicise the text.
<i>This is italic text</i>
It also makes the text italic with added semantic importance.
<em>This is emphasized text</em>
This element is used to superscript a text.
This element is used to subscript a text.
This element is used to strike through the text marking the part as deleted.
<del>This is deleted text</del>
This element is used to underline a text marking the part as inserted or added.
<ins>This is inserted text</ins>
HTML Empty tags
The tags that do not contain any closing tags are empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.
This tag is used to add or embed the images to a webpage/website.
<img src="url" alt="some_text" width="" height="">
This tag is used to create a line break in a text.
This tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from the left to right-hand side of the page.
This tag defines the relationship between the current document and an external resource. It is most often used to link to external stylesheets.
<link href="style.css" rel="stylesheet">
Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on the page itself, but only in the page’s source code.
There are several container tags in HTML which contain some data such as text, image, etc.
It is used to make divisions or blocks on the document.
<div> This is div block </div>
It is a container for inline content
<span> This is span block </span>
It defines paragraph
<p> This is a paragraph </p>
It defined pre-formatted text.
<pre> This is pre-formatted text </pre>
It defines source code
HTML lists allow web developers to group a set of related items in lists.
This tag defines an ordered list. An ordered list can be numerical or alphabetical.
<ol> <li>Data 1</li> <li>Data 2</li> <li>Data 3</li> </ol>
This tag represents an unordered list of items, typically rendered as a bulleted list.
<ul> <li>Data 1</li> <li>Data 2</li> </ul>
HTML tables allow web developers to arrange data into rows and columns.
HTML Table Structure
<table> <caption>Demo Table</caption> <thead> <tr> <th>Column1</th> <th colspan="2">Column2</th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Data2</td> <td>Data2</td> </tr> <tr> <td>Data1</td> <td>Data2</td> <td>Data2</td> </tr> </tbody> <tfoot> <tr> <td>&Data</td> <td>Data</td> <td>Data</td> </tr> </tfoot> </table>
Links are clickable text that can redirect you to some other page.
<a> or anchor tag defines a hyperlink.
<a href="https://www.itsnp.org/">Visit ITSNP!</a>
Form is used to collect user’s input, generally user’s data is sent to server for further processing. Here is an example of HTML form with two input fields and one submit button:
<form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>
Semantic elements are those elements that are self describable, i.e., from their name itself, you can understand their meaning.
It defines a header in the document
<header>This is a header</header>
This tag defines a set of navigation links.
<nav> Navigation links </nav>
It defines a section in the document
<section>This is a section</section>
This tag specifies independent, self-contained content.
<article> Enter your data here </article>
This tag defines some content aside from the content it is placed in.