Html Cheat sheet - cheatsheet.live

HTML Quick Reference

Welcome to the HTML Cheat Sheet! This guide provides a quick reference for commonly used HTML elements, their purposes, and basic usage examples. Whether you're a beginner learning HTML or an experienced developer looking for a quick refresher, this cheat sheet will help you find the right elements for your web projects. Explore the categories below to find the HTML elements you need.

Text Elements

<h1> - <h6>
Defines HTML headings, with <h1> being the highest (most important) level and <h6> the lowest.
```
<h1>Main Heading</h1>
```
<p>
Defines a paragraph. Browsers automatically add some space before and after each <p> element.
```
<p>This is a paragraph.</p>
```
<a>
Defines a hyperlink, which is used to link from one page to another. The most important attribute is href, which indicates the link's destination.
```
<a href="https://example.com">Link text</a>
```
<strong>
Defines text with strong importance. The content inside is typically displayed in bold.
```
<strong>This text is important!</strong>
```
<em>
Defines emphasized text. The content inside is typically displayed in italic.
```
<em>This text is emphasized</em>
```

List Elements

<ul>
Defines an unordered (bulleted) list. Use with <li> tags to create list items.
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```
<ol>
Defines an ordered (numbered) list. Use with <li> tags to create list items.
```
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
```
<li>
Defines a list item. It's used inside ordered (<ol>) and unordered (<ul>) lists.
```
<li>This is a list item</li>
```

Form Elements

<form>
Defines an HTML form for user input. It's a container for different types of input elements.
```
<form action="/submit" method="post">
  
</form>
```
<input>
Specifies an input field where the user can enter data. The type attribute specifies the type of input.
```
<input type="text" name="username">
```
<textarea>
Defines a multi-line input field (text area). The rows and cols attributes specify the visible width and height.
```
<textarea rows="4" cols="50">Enter text here...</textarea>
```
<button>
Defines a clickable button. Can be used in forms or anywhere in a document that needs a standard push button.
```
<button type="submit">Send</button>
```

Multimedia Elements

<img>
Defines an image. The src attribute specifies the URL of the image, and the alt attribute provides alternative text for screen readers.
```
<img src="image.jpg" alt="Description of image">
```
<video>
Defines a video or movie. Use the src attribute to specify the URL of the video file, and include optional attributes like width, height, and controls.
```
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```
<audio>
Defines sound or audio content. Similar to the <video> element, use the src attribute to specify the URL of the audio file, and include controls if needed.
```
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
```

Table Elements

<table>

Defines an HTML table. Use with <tr> for table rows, <th> for table headers, and <td> for table cells.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

<tr>
Defines a table row. Used inside the <table> element to create rows of cells.
```
<tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>
```
<th>
Defines a table header. Used inside a <tr> element to specify a header cell in a table.
```
<tr>
  <th>Header 1</th>
  <th>Header 2</th>
</tr>
```
<td>
Defines a table cell. Used inside a <tr> element to specify cells in a table row.
```
<tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>
```

Semantic Elements

<header>
Defines a header for a document or section. Typically contains introductory content or navigation links.
```
<header>
  <h1>Website Header</h1>
</header>
```
<footer>
Defines a footer for a document or section. Typically contains information about the author, copyright data, or links to related documents.
```
<footer>
  <p>Copyright © 2024 Company Name.</p>
</footer>
```
<nav>
Defines a section with navigation links. Used to define navigation menus, tables of contents, and similar content.
```
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
```
<main>
Defines the main content of a document. Should not include content that is repeated across multiple pages (like headers, footers, or navigation).
```
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</main>
```

Meta Elements

<meta>
Defines metadata about an HTML document. Metadata is not displayed on the page but is machine-readable and used by browsers (like the character set, description, author, etc.).
```
<meta charset="UTF-8">
<meta name="description" content="Description of the page">
<meta name="keywords" content="keywords, for, SEO">
<meta name="author" content="Author Name">
```
<link>
Defines the relationship between the current document and an external resource (most used to link to stylesheets). Can also be used to define a favicon for the website.
```
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
```
<script>
Defines client-side JavaScript within an HTML document or links to an external JavaScript file using the src attribute.
```
<script>
  // JavaScript code here
</script>
<script src="script.js"></script>
```