Invidious

Codesweb ኮድስዌብ

A complete HTML cheatsheet for quick reference:

### **HTML Document Structure**
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
```

---

### **HTML Tags**
#### **Headings**
```html
<h1>Largest Heading</h1>
<h2>Second Largest Heading</h2>
<h6>Smallest Heading</h6>
```

#### **Paragraph and Text**
```html
<p>This is a paragraph.</p>
<br> <!-- Line Break -->
<hr> <!-- Horizontal Rule -->
```

#### **Formatting**
```html
<b>Bold</b>
<strong>Strong</strong>
<i>Italic</i>
<em>Emphasized</em>
<u>Underline</u>
<mark>Highlighted</mark>
<small>Small Text</small>
<del>Deleted</del>
<ins>Inserted</ins>
<sup>Superscript</sup>
<sub>Subscript</sub>
```

#### **Lists**
```html
<!-- Unordered List -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<!-- Ordered List -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

<!-- Definition List -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
```

#### **Links**
```html
<a href="example.com/">Clickable Link</a>
<a href="#section1">Anchor Link</a>
<a href="mailto:example@example.com">Email Link</a>
<a href="tel:+123456789">Phone Link</a>
```

#### **Images**
```html
<img src="image.jpg" alt="Description" width="300" height="200">
```

#### **Tables**
```html
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
```

#### **Forms**
```html
<form action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>

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

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>

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

---

### **HTML Attributes**
| Attribute | Description |
|----------------|-----------------------------------------|
| `id` | Unique identifier for an element |
| `class` | Assigns one or more class names |
| `style` | Inline CSS styling |
| `title` | Tooltip text when hovered |
| `alt` | Alternative text for images |
| `src` | Source file for media |
| `href` | Hyperlink reference |
| `target` | Opens link (`_blank`, `_self`, etc.) |

---

### **Media Elements**
```html
<!-- Video -->
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```

---

### **Semantic Elements**
```html
<header>Header Content</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<article>Article Content</article>
<section>Section Content</section>
<aside>Sidebar Content</aside>
<footer>Footer Content</footer>
```

---

### **Meta Tags**
```html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">
```

---

### **Input Types**

<input type="text"> <!-- Text Input -->
<input type="password"> <!-- Password Input -->
<input type="email"> <!-- Email Input -->
<input type="number"> <!-- Number Input -->
<input type="date"> <!-- Date Input -->
<input type="radio"> <!-- Radio Button -->
<input type="checkbox"> <!-- Checkbox -->
<input type="submit"> <!-- Submit Button -->

5 months ago | [YT] | 3