KandZ – Tuts

We like to help…!

HTML 💻 30 Cheatsheet

Basic Structure

```html
<!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>
    <style>
        /* CSS styles */
    </style>
</head>
<body>

    <!-- Content goes here -->

</body>
</html>
```

Headings

```html
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
```

Paragraphs and Text Formatting

```html
<p>This is a <strong>bold</strong> paragraph.</p>
<p>This is an <em>italic</em> paragraph.</p>
<p>This is a <u>underlined</u> paragraph.</p>
<p>This is a <mark>highlighted</mark> paragraph.</p>
<p>This is a <ins>inserted</ins> paragraph.</p>
<p>This is a <del>deleted</del> paragraph.</p>
```

Links

```html
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
<a href="mailto:info@example.com">Contact Us</a>
```

Images

```html
<img src="image.jpg" alt="Description of image">
<img src="image.jpg" alt="Image not found" width="300" height="200">
```

Lists

#### Unordered List (Bullet Points)

```html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
```

#### Ordered List (Numbered)

```html
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
```

#### Description List

```html
<dl>
    <dt>Term 1</dt>
    <dd>Description of term 1.</dd>
    <dt>Term 2</dt>
    <dd>Description of term 2.</dd>
</dl>
```

Division and Span

```html
<div>This is a division.</div>

<p>This is a span within a paragraph <span style="color: red;">highlighted text</span>.</p>
```

Tables

```html
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
```

Forms
```html
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

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

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

    <textarea rows="4" cols="50" name="comment"></textarea><br><br>

    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>

    <label for="cars">Choose a car:</label>
    <select id="cars" name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select><br><br>

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

not enough space for the whole cheatsheet

Leave a Reply