HTML Cheat Sheet

Learn Frontend

HTML Cheat Sheet

Natalia Jackson

•

Last modified:

October 3, 2024

Related learning

View all courses

Document Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Essential Tags:

<html>: Root element of an HTML page.
<head>: Contains meta-information about the document.
<title>: Specifies the title of the document.
<body>: Contains the content of the HTML document.
<meta>: Specifies metadata about the HTML document.

Text Formatting

<h1> to <h6>: Header tags, <h1> being the most important, and <h6> the least.
<p>: Paragraph tag.
<br>: Line break.
<hr>: Thematic break in the page.
<strong> / <b>: Bold text.
<em> / <i>: Italicized text.
<u>: Underlined text.
<sup>: Superscript text.
<sub>: Subscript text.

Hyperlinks and Images

<a href="url">link text</a>: Creates a hyperlink.
<img src="url" alt="alternative text">: Embeds an image.

Lists

Unordered List:

<ul>
    <li>List item</li>
    <li>List item</li>
</ul>

Ordered List:

<ol>
    <li>List item</li>
    <li>List item</li>
</ol>

Tables

<table>
    <tr>
        <th>Header</th>
        <th>Header</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

Forms

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" name="email">
    <br>
    <input type="submit" value="Submit">
</form>

Useful Attributes

id: Defines a unique id for an element.
class: Defines one or more class names for an element.
style: Applies CSS styles directly to the element.
title: Adds extra information about an element (usually shown as a tooltip).

CSS Integration

<link rel="stylesheet" href="styles.css">

JavaScript Integration

<script src="script.js"></script>

Tips for Better HTML Coding

Use Semantic HTML: Wherever possible, use HTML5 semantic elements (<header>, <footer>, <article>, etc.) to enhance SEO and accessibility.

Validate Your Code: Use the W3C Validator to check your HTML and ensure it's error-free.

Keep Learning: HTML is constantly evolving, so stay updated with the latest elements and best practices.

This HTML cheat sheet provides a quick overview of the essential HTML elements and their use.

Keep it handy to refer to as you build or maintain web pages.

Written by

Natalia Jackson

•

HTML Cheat Sheet

Related learning

Frontend Developer

Introduction to HTML and CSS

JavaScript Core

Introduction to JavaScript

Introduction to Frontend

Text Formatting

Hyperlinks and Images

Lists

Tables

Forms

Useful Attributes

CSS Integration

JavaScript Integration

Tips for Better HTML Coding

Create a free account to access the full topic