Language: EN

cheatsheet-html

HTML CheatSheet

It is the standard language for creating and structuring web pages. It allows defining the content of a web document through a series of elements and tags.

Each element can have attributes that modify its behavior or appearance (often in combination with CSS and JS).

Basic HTML Structure

Minimum Structure

The basic skeleton of an HTML document includes the main elements such as doctype, html, head, and body.

<!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>
    <!-- Page content -->
  </body>
</html>

Comments in HTML

Comments are used to include notes in the code without affecting the content.

<!-- This is a comment -->

Title

Defines the title of the page, which appears in the browser tab and in search results.

<title>Page Title</title>

Meta Tags

The meta tags in the head provide additional information about the web (for example, for SEO).

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site description">
<meta name="author" content="Author Name">
TagDescription
descriptionSummary of the page content for SEO.
authorName of the content author.
viewportOptimizes display on mobile devices.
charsetDefines the character set used.

Adding Basic Elements

Adding a Favicon

The favicon is the icon that appears in the browser tab. It can be added using a <link> tag:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Adding CSS

To include an external CSS file and style the page, use the <link> tag:

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

If you want to include inline CSS, use the <style> tag:

<style>
  body {
    background-color: lightblue;
  }
</style>

Adding JavaScript

To include an external JavaScript file, use the <script> tag at the bottom of the <body> or in the <head> with the defer attribute to ensure the DOM is loaded before executing the script:

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

To include JavaScript code directly:

<script>
  console.log('Hello, world!');
</script>

Summary of Elements and Attributes

Elements and Tags

HTML is composed of a series of elements, each defined by a tag that can have content and attributes.

TagDescription
<html>Root of the HTML document.
<head>Contains metadata about the document.
<title>Title of the page that appears in the browser tab.
<body>Visible content of the page.
<h1> to <h6>Headings, where <h1> is the most important and <h6> the least.
<p>Defines a paragraph.
<a>Creates a link.
<img>Inserts an image.
<div>Used as a container for other elements.
<span>Defines inline text.
<strong>Indicates that the text has strong importance (bold).
<em>Indicates emphasis (italic).
<br>Inserts a line break.
<hr>Creates a horizontal line.
<blockquote>Defines a block of quoted text.

HTML Attributes

Attributes provide additional information about elements. They are placed within the opening tag.

AttributeDescription
idUnique identifier for an element.
classDefines one or more classes for an element.
styleDefines inline CSS styles.
hrefSpecifies the URL of a link.
srcDefines the source of an image or media file.
altAlternative text for an image.
titleProvides additional information on hover.
targetSpecifies how to open the link (e.g., _blank to open in a new tab).
relDefines the relationship between the current document and the linked resource.
langSpecifies the language of the content.
<p id="paragraph1" class="highlighted-text" style="color: red;" title="Important text">This is a paragraph.</p>

Text Elements

Headings

Headings (h1 to h6) are used for titles and subtitles, where h1 is the most important and h6 the least.

<h1>Header 1</h1>
<h2>Header 2</h2>

Paragraphs

For normal text blocks, the p element is used.

<p>This is a paragraph of text.</p>

Emphasis and Bold

<strong> emphasizes text in bold, while <em> emphasizes with italics.

<strong>Bold text</strong>
<em>Italic text</em>

Subscript and Superscript

For equations or scientific notation, use <sub> and <sup>.

H<sub>2</sub>O (water) and E = mc<sup>2</sup> (energy).

Links are created with the a element and the href attribute.

<a href="https://example.com">Visit Example</a>

Used to jump to a specific section of the page.

<a href="#section">Go to section</a>

<!-- The anchor destination -->
<h2 id="section">Section Title</h2>

To open a link in a new tab, use the target="_blank" attribute.

<a href="https://example.com" target="_blank">Open in a new tab</a>

Avoid doing this unless you have a really justified reason (not wanting them to leave my site is not a justified reason)

Images

Insert Images

Use the img element with the src attribute to specify the image path.

<img src="image.jpg" alt="Image description">

Attributes of the Tag

AttributeDescription
srcPath to the image.
altAlternative text for the image.
widthWidth of the image.
heightHeight of the image.

alt Attribute for Accessibility

The alt attribute describes the image in case it cannot be loaded or for screen readers.

<img src="photo.jpg" alt="A photo of a sunset landscape.">

Lists

Lists are useful for grouping similar items (that are part of the same collection).

Ordered Lists

Used when the order of items is important, with the ol element.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Unordered Lists

For lists without order, use the ul element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Nested Lists

You can nest lists within other lists.

<ul>
  <li>Main item
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
</ul>

Tables

Create Tables in HTML

Use the table, tr (row), th (header), and td (cell) elements.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>23</td>
  </tr>
</table>

Merge Cells

Use colspan or rowspan to merge cells horizontally or vertically.

<td colspan="2">Merged cell</td>

Table Attributes

AttributeDescription
borderDefines the width of the table border.
cellpaddingSpace between the cell border and its content.
cellspacingSpace between the cells of the table.

Forms and Inputs

Basic Forms

Forms are created with the form element and its different types of input (input, textarea, select).

<form action="/submit" method="post">
  <input type="text" name="name" placeholder="Name">
  <input type="submit" value="Submit">
</form>

Common input Types

The most common input types are text, password, email, number, date, and checkbox.

<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">

Labels for Accessibility

Using the label tag improves accessibility.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Form Elements

ElementDescription
<input>Field for data entry.
<textarea>Multi-line text area.
<select>Dropdown list of options.
<button>Button to submit or perform an action.

Multimedia and Graphics

Videos

To insert videos, use the video element.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video.
</video>

Attributes of the

AttributeDescription
controlsDisplays playback controls.
autoplayAutomatically plays the video.
loopRepeats the video when finished.
mutedMutes the video.

Audio

The audio element is similar to the video but for sound files.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio.
</audio>

Attributes of the

AttributeDescription
controlsDisplays playback controls.
autoplayAutomatically plays the audio.
loopRepeats the audio when finished.
mutedMutes the audio.

Canvas

The canvas element is used for drawing graphics with JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>

SVG (Scalable Vector Graphics)

SVG allows drawing vector graphics in HTML.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

Semantic Structure

Semantic Elements

Semantic elements are those that have a clear meaning and help search engines and screen readers understand the content.

ElementDescription
<header>Defines a header for a document or section.
<nav>Main navigation.
<footer>Defines a footer.
<article>Represents independent content.
<section>Defines thematic sections in a document.
<aside>Related content, such as a sidebar.
<main>Main content of a document.
<figure>Contains illustrative content, such as images.
<figcaption>Caption for a <figure>.
<header>
  <h1>Welcome to my website</h1>
</header>
<nav>
  <a href="#">Home</a>
  <a href="#">Contact</a>
</nav>
<section>
  <h2>About Us</h2>
  <p>Information about our company.</p>
</section>
<footer>
  <p>All rights reserved © 2024</p>
</footer>

Accessibility in HTML

ARIA Roles

ARIA roles improve accessibility for screen reader users.

<nav role="navigation">
  <!-- Navigation links -->
</nav>

Accessibility Attributes

Attributes like aria-label and aria-hidden are useful for enhancing accessibility.

<button aria-label="Close">X</button>