HTML Snippets & Examples

HTML snippets for layout, forms, and structure. Use these as a base and adjust to your design.

Markup here is valid HTML5. We focus on structure and behavior (e.g. scrollable areas, disabled controls, background images) rather than visual styling—pair these with your own CSS or a framework. For interactive behavior, combine with JavaScript or jQuery as needed.

Scrollable div with fixed height

<style>
.scroll-box {
  height: 120px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 8px;
}
</style>
<div class="scroll-box">Content here...</div>

overflow-y: auto shows a vertical scrollbar when content exceeds the height. Use overflow-x for horizontal scroll if needed. For a fixed width with horizontal scroll use overflow-x: auto and set width or max-width.

Disabled checkbox

<label>
  <input type="checkbox" name="agree" disabled> Terms (read-only)
</label>

The disabled attribute prevents the user from changing the control; the value is not submitted with the form. Use readonly for text inputs when you want to show a value that shouldn’t be edited. For checkboxes, disabled is the standard choice.

Background image in HTML/CSS

<style>
.hero {
  background-image: url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 200px;
}
</style>
<div class="hero"></div>

background-size: cover scales the image to cover the area while keeping aspect ratio; contain fits the whole image inside. Use background-position to align. For accessibility, put meaningful content in the div or add a role and aria-label if it’s decorative.

Correct HTML for a dropdown (select)

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Choose...</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

Use <select> with <option> elements. The value is what gets submitted; the text inside <option> is what the user sees. Always pair with a <label> using for and the select’s id.

More HTML topics

See also: JavaScript, Code Snippets.