HTML5 Cheat Sheet 👀
Introduction
Published
•3 min read
HTML stands for HyperText markup language, it is a standard language, not the programming language used to create and design web pages.
At its core, HTML is a markup language that uses a system of TAGS to define the structure of a document. The tags are understandable by a browser interpreter and rendered in a browser.
Basic Tags
//Declares the document type and version of HTML being used.
//It should be placed at the very beginning of an HTML document.
<!DOCTYPE html>
//Represents the root element of an HTML page.
<html>Root of all tags</html>
// head tag
<head>This tag contains title,links,etc </head>
// meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// title tag
<title> Title of your project </title>
// body tag
<body> Contains the content of the HTML document, such as text, images, links, and other elements </body>
// h1 tag
<h1>Heading</h1>
// div
<div> block level container used for grouping and styling the section </div>
Cheat sheet
Writing this cheat sheet for quick revisions and as well as exploring many tags in less time.
Container tags
Heading tags
Text tags
Formatting tags
Link tags
List tags
Table tags
Form tags
// Container tags
// Block level container used for grouping and styling the section
<header></header>
<nav></nav>
<div></div>
<section></section>
<article></article>
<aside></aside>
<main></main>
<style></style>
<script></script>
<footer></footer>
// Heading tag
<h1></1h>
<h2></2h>
<h3></3h>
<h4></4h>
<h5></5h>
<h6></6h>
// Text tags
<p>This is a paragraph of text.</p>
<span></span>
<mark>HTML</mark>
<ins>Represents inserted text, typically displayed as underlined.</ins>
<blockquote></blockquote>
// Formatting tags
<strong>This text is important.</strong>
<em>This text is emphasized.</em>
<br> brek the line tag<sub>Defines subscript text.</sub>
<sup>Defines superscript text.</sup>
<u>This text is underlined.</u>
<abbr title="World Health Organization">(WHO) Represents an abbreviation or acronym, often with a tooltip</abbr>
// Link tags and img tag
<a href="https://www.example.com">Visit Example Website</a>
<link rel="stylesheet" type="text/css" href="styles.css">
<img src="image.jpg" alt="Description of the image" width="300" height="200">
<iframe src="https://www.example.com" width="600" height="400" title="External Content"></iframe>
<base href="https://www.example.com/"> The base tag is used to specify the base URL for all relative URLs within a document
// List tags
// Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
//Ordered List
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
//Description List
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
<dt>Term 3</dt>
<dd>Description 3</dd>
</dl>
// Table tags
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
// Form tags
<form action="/submit_form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" maxlength="20" required>
<textarea id="message" name="message" placeholder="Type your message here" rows="4" cols="50" required></textarea>
<select id="interests" name="interests" multiple>
<option value="sports">Sports</option>
</select>
<button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; cursor: pointer;">Submit</button>
</form>
If you know the above-mentioned tags it is more than enough to create a web page.
Read more :
