Base Platform / Code Snippet Archive

Code Snippet & Reference Library

Battle-tested, copy-pasteable snippets across PHP, Python, JavaScript, VB.NET, SQL and Bash — compiled from real SaaS engineering sessions.

469

Snippets Indexed

PHP

JavaScript

Python

Showing 14 snippets · HTML

Clear filters

SNP-2025-0008 HTML 2024-01-18

Displaying Images in HTML: The img tag a masterclass

▾

THE PROBLEM

The <img> tag is a self-closing tag, which means it ends with />. It does not contain any content but rather serves as a self-sustaining element. Here's a simple example:

<img src="image.png" />

In this example, the src attribute specifies the image source. You can replace "image.png" with the actual file path or URL of your image.

On the web, a diverse range of image formats is used, including PNG, JPEG, GIF, SVG, and the more recent WebP. When using the <img> tag, it's important to include the alt attribute, as per HTML standards. The alt attribute provides a descriptive text for the image, aiding screen readers and search engine bots:

<img src="dog.png" alt="A picture of a dog" />

Ensure that the alt attribute provides a meaningful description of the image, contributing to accessibility and search engine optimization.

You can control the dimensions of the displayed image using the width and height attributes. These attributes take numeric values expressed in pixels. This is particularly useful to reserve space for the image, preventing layout changes when the image is fully loaded:

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

In this example, the width is set to 300 pixels, and the height is set to 200 pixels. Adjust these values according to your design preferences and layout requirements.

Integrating images with the <img> tag is a fundamental skill in web development. As you continue to explore HTML and enhance your web pages, mastering the art of incorporating images will contribute significantly to the overall user experience of your website.

Open Full Snippet Page ↗

SNP-2025-0006 HTML 2024-01-18

Creating your first web page in pure HTML 🎉

▾

THE PROBLEM

<p>A paragraph of text</p>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

While this allowed us to create a functional HTML page, it lacked some fundamental elements necessary for a well-formed HTML document. Consider the following improved version:

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <p>A paragraph of text</p>

    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>: This declaration, placed at the top, signals to the browser that the document is an HTML file.
<html>: The root element that wraps the entire HTML document. Inside it, you'll find the <head> and <body> sections.
<head>: This section contains meta-information about the document, such as the title, character set, linked stylesheets, and more. In this example, it's left empty for simplicity.
<body>: The container for the visible elements of the page. It encompasses the content you want to display, including paragraphs, lists, images, and more.

It's crucial to note that an HTML document should have only one occurrence of the <html>, <body>, and <head> elements.

Additionally, notice the indentation used in this example. Each nested tag, such as <head> inside <html> or <ul> inside <body>, is indented for clarity. Indentation helps maintain a "tree structure," making it easier to visually parse and understand the hierarchy of elements in an HTML file.

Whether you prefer a 2-character or 4-character indentation (or tabs), consistency is key to ensuring a clean and organized HTML structure. Adopting a systematic approach will greatly enhance your ability to navigate and modify HTML files effectively.

Open Full Snippet Page ↗

SNP-2025-0014 HTML 2024-01-17

CSS Selectors: Class and ID basic filtering for HTML elements

▾

THE PROBLEM

To target elements with a specific class, use the class selector syntax: .class {}. Here's an example:

HTML:

<p class="dog-name">Roger</p>

CSS:

.dog-name {
  color: yellow;
}

<p class="dog-name">Roger</p>

Repeating Classes vs. Unique IDs

Repeating Classes: You can repeat the same class value across multiple elements within an HTML document. For example, several elements can share the class "dog-name."
Unique IDs: An id must be unique within an HTML document. It can only be used once. For instance, an id like "dog-name" should be assigned to a single element.

To target elements with a specific id, use the id selector syntax: #id {}. Here's an example:

HTML:

<p id="dog-name">Roger</p>

CSS:

#dog-name {
  color: yellow;
}

Understanding the nuances of class and id selectors provides you with powerful tools for styling specific elements or groups of elements within your HTML documents. As you progress, you'll discover more advanced selectors and techniques to enhance your CSS styling capabilities. Stay tuned for further exploration into the world of CSS.

Open Full Snippet Page ↗

SNP-2025-0013 HTML 2024-01-16

Introduction to CSS 🚀

▾

THE PROBLEM

CSS can be applied in various ways:

1. Inline Style

<p style="color: red;">This is a red paragraph.</p>

2. Internal Style (Within HTML Document)

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3. External Style (In Separate CSS File)

<head>
  <link href="style.css" rel="stylesheet" />
</head>

You can list multiple CSS rules to apply different styles to various elements:

p {
  color: red;
}

a {
  color: blue;
}

A selector can target one or more items:

p, a {
  color: red;
}

Selectors can target one or more items, and spacing is insignificant in CSS:

p,a {
  color: red;}

p,a {              color: red;
         }

Each declaration in the declaration block should end with a semicolon (;).
Proper indentation and spacing enhance readability but are not required by the browser.

Understanding these fundamental concepts equips you to enhance the visual aspects of your HTML documents using CSS. As you delve deeper, you'll discover the versatility and power CSS brings to web development. Stay tuned for more insights into advanced CSS techniques and best practices.

REAL-WORLD USAGE EXAMPLE

Here's a basic example of a CSS rule that styles paragraph tags:

p {
  color: red;
}

Selector (p): Identifies the HTML element to which the styling rules will be applied.
Declaration Block ({ color: red; }): Contains one or more declarations. Each declaration comprises a property (color) and its corresponding value (red).

Open Full Snippet Page ↗

PAGE 2 OF 2 · 14 SNIPPETS INDEXED