HTML Cheat Sheet - GeeksforGeeks

HTML (HyperText Markup Language) is the core language of the web, structuring content and defining how web pages display and interact across all platforms.

Forms the backbone of every web page.
Structures text, images, videos, and other content.
Universally supported across all browsers and frameworks.
Includes semantic elements for meaningful markup.
Supports mobile optimization and responsive design.
Cheat sheets provide quick reference for beginners and pros.

Main root

The <html> element represents the root (top-level element) of an HTML document also called the document element. All other elements must be descendants of this element.

<html> … </html>

Boilerplate

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Description of the document -->
    <meta charset="UTF-8" />
    <title>
        <!-- title goes here -->
        Geeks For Geeks
    </title>
</head>

<body>
    <!-- your content goes here -->
    Welcome to Geeks for Geeks
</body>

</html>

Sets up a basic HTML page with UTF-8 character encoding and a title: “Geeks For Geeks”.
Displays the text “Welcome to Geeks for Geeks” in the body of the page.

Headings

HTML heading tags (<h1> to <h6>) are used to define headings and subheadings on your webpage.

The <h1> tag is typically reserved for the page’s main title, while the others denote subheadings in descending order of importance.

Heading Tags	Description	Syntax
<h1>	Used for title generally once per page and has a font size of 2em.	<h1>....</h1>
<h2>	Used for medium sized titles and has a font size of 1.5em.	<h2>....</h2>
<h3>	Used for subsections and has a font size of 1.17em.	<h3>....</h3>
<h4>	Used for highlighting text with font size of 1em.	<h4>....</h4>
<h5>	Fifth level heading with font size of .83em.	<h5>....</h5>
<h6>	Displays least significant details and has a font size of .67em	<h6>....</h6>

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Heading Tags</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>GeeksforGeeks</h2>
    <h3>GeeksforGeeks</h3>
    <h4>GeeksforGeeks</h4>
    <h5>GeeksforGeeks</h5>
    <h6>GeeksforGeeks</h6>
</body>

</html>

Displays the text “GeeksforGeeks” using all six heading levels: <h1> (largest) to <h6> (smallest).
Demonstrates how HTML headings decrease in size and importance from h1 to h6.

Container

Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at once. The several container tags in HTML are:

Tags	Description	Syntax
<div>	Block element that defines a division in HTML document.	<div>... </div>
<span>	Inline element used to mark up a part of a text or document.	<span>...</span>
<p>	Used to represent a paragraph.	<p>...</p>
<pre>	Represents pre-formatted text to present exactly as written in the HTML file.	<pre>...</pre>
<code>	Used to represent source codes	<code>...</code>

HTML

<!DOCTYPE html>
<html>

<head>
    <title> GeeksforGeeks </title>
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Geeksforgeeks is a computer science portal." />
    <style type="text/css">
        body {
            background-color