Learn HTML in Minutes – Cheat Sheet
HTML Cheat-Sheet for Absolute Beginners
N
Developing Web Apps
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
HTML Cheat-Sheet for Absolute Beginners
Developing Web Apps
No comments yet. Be the first to comment.
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 familiarize 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
<!DOCTYPE html>
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>
<strong> tagIt also makes the text bold with added semantic importance.
<strong>This is strong text</strong>
<small> tagThis element is used to make the text smaller.
<small>This is small text</small>
<mark> tagIt is also possible to highlight a text in HTML using this tag.
<mark>This is marked/highlighted text</mark>
<b> tagWe can make the text bold using this tag.
<b>This is bold text</b>
<i> tagThis tag is used to italicise the text.
<i>This is italic text</i>
<em> tagIt also makes the text italic with added semantic importance.
<em>This is emphasized text</em>
<sup> tagThis element is used to superscript a text.
<sup>Superscripted text</sup>
<sub> tagThis element is used to subscript a text.
<sub>Subscripted text</sub>
<del> tagThis element is used to strike through the text marking the part as deleted.
<del>This is deleted text</del>
<ins> tagThis element is used to underline a text marking the part as inserted or added.
<ins>This is inserted text</ins>
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.
<img> tagThis tag is used to add or embed the images to a webpage/website.
<img src="url" alt="some_text" width="" height="">
<br> tagThis tag is used to create a line break in a text.
<br>
<hr> tagThis 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.
<hr>
<link> tagThis 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> tagMeta 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.
<meta charset="utf-8">
There are several container tags in HTML which contain some data such as text, image, etc.
<div> tagIt is used to make divisions or blocks on the document.
<div> This is div block </div>
<span> tagIt is a container for inline content
<span> This is span block </span>
<p> tagIt defines paragraph
<p> This is a paragraph </p>
<pre> tagIt defined pre-formatted text.
<pre> This is pre-formatted text </pre>
<code> tagIt defines source code
<code>selectAll()</code>
HTML lists allow web developers to group a set of related items in lists.
<ol> tagThis 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>
<ul> tagThis 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.
<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> tag<a> or anchor tag defines a hyperlink.
<a href="https://example.com/">Go to Website</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.
<header> tagIt defines a header in the document
<header>This is a header</header>
<nav> tagThis tag defines a set of navigation links.
<nav> Navigation links </nav>
<section> tagIt defines a section in the document
<section>This is a section</section>
<article> tagThis tag specifies independent, self-contained content.
<article> Enter your data here </article>
<aside> tagThis tag defines some content aside from the content it is placed in.
<aside>Content...</aside>