WebBitz HTML & CSS Cheatsheet

๐ŸŒ HTML Cheatsheet

๐Ÿงฑ Basic Structure

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

๐Ÿ“Œ Common Tags

TagDescription
<html>Root of the document
<head>Metadata container
<title>Title shown on browser tab
<body>Main content
<h1>-<h6>Headings
<p>Paragraph
<br>Line break
<hr>Horizontal line
<strong>Bold text
<em>Italic text
<div>Block container
<span>Inline container

๐Ÿ”— Links

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Site</a>

๐Ÿ–ผ๏ธ Images

<img src="image.jpg" alt="Description" width="300" height="200">

๐Ÿ“‹ Lists

Unordered List

<ul>
  <li>Item</li>
</ul>

Ordered List

<ol>
  <li>First</li>
</ol>

๐Ÿ“ฆ Tables

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>25</td></tr>
  </tbody>
</table>

๐Ÿ”˜ Forms

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Send">
</form>

Common Inputs

๐Ÿง  Semantic Elements

TagPurpose
<header>Top section
<nav>Navigation
<main>Main content
<section>Grouped content
<article>Standalone item
<aside>Sidebar
<footer>Bottom section

๐Ÿงฉ Media Elements

Audio

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

Video

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

๐Ÿ’ก Metadata & SEO

<meta name="description" content="Brief description of page">
<meta name="keywords" content="HTML, cheat sheet, tutorial">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>

๐Ÿช„ Special Characters

CharacterCode
&&amp;
<&lt;
>&gt;
"&quot;
'&apos;
ยฉ&copy;
โ„ข&trade;

๐Ÿงช Useful Attributes

AttributeUse
classStyling with CSS
idUnique identifier
styleInline CSS
titleTooltip
hiddenHide element
disabledDisable input
requiredMake form input mandatory