Find more blogs here
Hey there, aspiring web developers! Starting out with HTML and looking for a handy cheatsheet to reference? Look no further! Below is a comprehensive guide to some essential HTML tags and elements that will help you build the foundation of your web pages. Let's get started! ๐๐ป
Structure
This is the standard HTML boilerplate code to kickstart your web project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
Headings
HTML provides six levels of headings, from h1 (largest) to h6 (smallest):
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Container
Container tags are used to group content. Commonly used container tags are:
<div>This is a div block</div>
<span>This is a span block</span>
<p>This is a paragraph</p>
<pre>Hello World</pre>
<code>import python</code>
Text Formatting
Use text formatting tags to emphasize or style text:
<b>I'm bold text</b>
<strong>I'm important text</strong>
<i>I'm italic text</i>
<em>Emphasized text</em>
<sub>Subscript</sub>
<sup>Superscript</sup>
Lists
Create ordered and unordered lists:
<ol>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ol>
<ul>
<li>Your Data</li>
<li>Your Data</li>
</ul>
Media
Embed images, audio, and video into your web page:
<audio controls>
<source src="demo.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<img src="Source_of_image" alt="Alternate text" />
<video width="480" height="320" controls>
<source src="demo_move.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Table
Present data in a tabular format:
<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> </td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>
Links
Create hyperlinks to navigate between pages:
<a href="https://preetsuthar.me/">Visit preetsuthar portfolio!</a>
Form
Capture user input using HTML forms:
<form action="/action.php" method="post">
Name: <input name="name" type="text" /> <br />
Age: <input max="90" min="1" name="age" step="1" type="number" value="18" />
<br />
<select name="gender">
<option selected="selected" value="male">Male</option>
<option value="female">Female</option></select
><br />
<input checked="checked" name="newsletter" type="radio" value="daily" /> Daily
<input name="newsletter" type="radio" value="weekly" /> Weekly<br />
<textarea cols="20" name="comments" rows="5">Comment</textarea><br />
<label
><input name="terms" type="checkbox" value="tandc" />Accept terms</label
>
<br />
<input type="submit" value="Submit" />
</form>
Characters & Symbols
Display special characters using HTML entities:
©
<!-- Copyright Symbol (ยฉ) -->
<
<!-- Less than (<) -->
>
<!-- Greater than (>) -->
&
<!-- Ampersand (&) -->
$
<!-- Dollar ($) -->
Random Text
Use random text to test your layouts:
Elon Musk is an entrepreneur and business magnate. He is the founder, CEO, and
Chief Engineer at SpaceX; CEO and Product Architect of Tesla, Inc.; founder of
The Boring Company; and co-founder of Neuralink and OpenAI. A centibillionaire,
Musk is one of the richest people in the world.
Semantic Elements
Use semantic elements for better HTML structure:
<section>This is a section</section>
<article>Enter your data here</article>
<aside>Your data</aside>
There you have it, a handy HTML cheatsheet to assist you on your web development journey! Keep practicing and building amazing things with HTML.๐๐ป๐ฅ
Top comments (0)