The Full-Stack Lens
📝 HTML Cheat Sheet🔥

📝 HTML Cheat Sheet🔥

Quick and Handy Reference for HTML Basics

Manshi Tyagi's photo
Manshi Tyagi
·

4 min read

Table of contents

Introduction

Welcome to the world of HTML, the foundation of every webpage you browse! 🌍 Whether you’re a beginner or looking to refine your web development skills, this guide will break down HTML in an engaging and simple way. Let’s build the backbone of the internet together!

What is HTML? 🤔

HTML (HyperText Markup Language) is a markup language, not a programming language. It structures content on the web, allowing browsers to display text, images, links, and more. Think of HTML as the skeleton of a website, defining its structure while CSS and JavaScript add style and interactivity. 🎨⚡

Basic Structure of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World! 🌍</h1>
    <p>Welcome to HTML magic! ✨</p>
</body>
</html>

🛠 Explanation:

  • <!DOCTYPE html> → Declares the document type and version of HTML.

  • <html> → The root element that wraps the entire document.

  • <head> → Contains metadata such as character set, title, and links to styles.

  • <title> → Defines the title shown on the browser tab.

  • <body> → Contains all visible content on the webpage.

Headings & Paragraphs 📢

<h1>Main Heading</h1>  <!-- Biggest -->
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller</h4>
<h5>Almost Tiny</h5>
<h6>Smallest</h6>  <!-- Smallest -->
<p>This is a paragraph of text.</p>

🛠 Explanation:

  • HTML has six heading levels, from <h1> (largest) to <h6> (smallest).

  • <p> defines a paragraph.

  • Use headings in a hierarchical order for better readability and SEO.

Text Formatting 🎨

<b>Bold</b> <!-- Bold text -->
<strong>Strong</strong> <!-- Important text -->
<i>Italic</i> <!-- Italic text -->
<em>Emphasized</em> <!-- More emphasis -->
<u>Underlined</u> <!-- Underlined text -->
<mark>Highlighted</mark> <!-- Highlighted text -->
<small>Smaller text</small> <!-- Smaller text -->
<del>Strikethrough</del> <!-- Strikethrough -->
<sup>Superscript</sup> <!-- Superscript -->
<sub>Subscript</sub> <!-- Subscript -->

🛠 Explanation:

  • <b> and <strong> make text bold, but <strong> conveys importance.

  • <i> and <em> make text italic, with <em> adding emphasis.

  • <u> underlines text, <mark> highlights it.

  • <del> adds a strikethrough, <sup> makes text superscript, and <sub> makes it subscript.

Lists (Ordered & Unordered) 📝

<ul>  <!-- Unordered List (Bullets) -->
    <li>Apple 🍏</li>
    <li>Banana 🍌</li>
    <li>Cherry 🍒</li>
</ul>

<ol>  <!-- Ordered List (Numbers) -->
    <li>Wake up ⏰</li>
    <li>Brush teeth 🦷</li>
    <li>Start coding 💻</li>
</ol>

🛠 Explanation:

  • <ul> creates a bulleted list.

  • <ol> creates a numbered list.

  • <li> is used to define list items.

<a href="https://www.google.com">Visit Google</a>
<a href="about.html">About Us</a>
<a href="#section1">Jump to Section</a>
<a href="mailto:someone@example.com">Email Me</a>
<a href="file.pdf" download>Download PDF</a>
<a href="tel:+1234567890">Call Us</a>

🛠 Explanation:

  • <a> defines a hyperlink.

  • href specifies the URL or file path.

  • #section1 navigates within the same page.

  • mailto: opens an email client, tel: initiates a phone call.

  • download allows file downloads.

⚡ Target Attribute:

  • _self → Default, opens in the same tab.

  • _blank → Opens in a new tab.

Example:

<a href="https://www.github.com" target="_blank">Open GitHub in a new tab</a>

Images & Icons 🖼️

<img src="image.jpg" alt="A beautiful sunset" width="300">

🛠 Explanation:

  • src → Specifies the image source.

  • alt → Provides alternate text for accessibility.

  • width / height → Adjusts image size.

Forms & Inputs 📩

<form action="submit.php" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Submit">
</form>

🛠 Explanation:

  • <form> defines a form.

  • <input> allows users to enter data.

  • type specifies input type (text, email, password, etc.).

  • placeholder adds hint text inside the input box.

  • action defines where to send form data.

  • method specifies GET (visible in URL) or POST (hidden).

The Importance of Semantic HTML for SEO

Semantic HTML is all about using meaningful tags that tell both the browser and developers what content is for. Instead of using generic tags like <div>, you can use specific tags like <article>, <section>, and <nav>. These tags help search engines and screen readers understand your webpage better.

Why You Should Use Semantic HTML:

  • Helps with SEO (Search Engine Optimization): Search engines can better understand your page and rank it higher when you use semantic tags.

  • Better Accessibility: Screen readers for visually impaired users can easily understand semantic tags, making your website more accessible to everyone.

  • Easier to Maintain: Semantic tags make your code cleaner and easier to understand, which is great for future updates and changes.

Example:

Instead of using a generic <div> for the footer:

<div class="footer">
    <p>Contact us at: <a href="mailto:contact@website.com">contact@website.com</a></p>
</div>

Use a semantic tag like this:

<footer>
    <p>Contact us at: <a href="mailto:contact@website.com">contact@website.com</a></p>
</footer>

Using the <footer> tag makes it clear that this section contains footer information, improving both readability and SEO!

Did you know that HTML was created by Tim Berners-Lee in 1991 with just 18 tags to help scientists share documents on the web! 😜

ChaiCodeHTML5Web DevelopmentFrontend Developmentcheatsheet