Html5 Bootstrap

HTML5 + Bootstrap 5.3 Guidelines

When to Use

Load this skill when asked to:

• Create or update .html files.
• Refactor legacy markup to semantic HTML5 structure.
• Apply or review Bootstrap 5.3 layout and component usage.
• Improve responsive behavior, form markup, navigation, or page structure.
• Clean up pages with overly generic <div> wrappers or inconsistent document structure.

Core Principles

• Prefer semantic HTML elements over generic containers when they express meaning clearly.
• Start with valid, minimal HTML structure and add Bootstrap classes on top of that structure.
• Preserve document meaning first; use Bootstrap for layout and styling, not to replace semantics.
• Keep markup predictable, readable, and easy to maintain.
• Favor native HTML behavior and accessibility attributes before adding custom workarounds.

Default Rules

Document structure

• Use the HTML5 doctype: <!doctype html>.
• Always include <html lang="...">.
• Include <meta charset="utf-8">.
• Include the responsive viewport meta tag:
  • <meta name="viewport" content="width=device-width, initial-scale=1">
• Keep document structure complete and ordered: html, head, body.
• Put CSS <link> elements in <head>.
• Put Bootstrap JavaScript near the end of <body>.

Semantic HTML5

• Prefer header, main, section, article, aside, nav, and footer where they match the content.
• Use heading levels in order and avoid skipping levels without reason.
• Use button for actions and a for navigation.
• Use proper form semantics: form, label, input, select, textarea, and helpful attributes like for, id, name, type, required, min, max, and placeholder when appropriate.
• Use lists (ul, ol) for grouped items rather than freeform line breaks.
• Use figure and figcaption when media has a caption.
• Keep alt text meaningful for informative images and empty only for decorative images.

Content model and validity

• Respect allowed nesting and content-model rules from the HTML Living Standard.
• Do not place interactive controls inside incompatible interactive elements unless explicitly valid.
• Avoid obsolete or purely presentational markup when semantic alternatives exist.
• Prefer attributes and elements with standard meaning over custom data encoding in generic markup.

Bootstrap 5.3 usage

• Use Bootstrap’s layout primitives first: container, container-fluid, grid rows/columns, spacing utilities, and display helpers.
• Use Bootstrap components as designed instead of recreating them with custom markup.
• Keep component structure consistent with Bootstrap expectations so JS behavior continues to work.
• Include bootstrap.bundle.min.js when components require Bootstrap JavaScript behavior.
• If dropdowns, popovers, or tooltips are not used, separate JS loading can be considered to reduce payload.
• Use Bootstrap utility classes for spacing, alignment, sizing, and visibility before adding custom CSS.

Accessibility and interaction

• Ensure landmarks are meaningful and not duplicated without purpose.
• Use aria-* attributes only when needed and consistent with the native element behavior.
• Keep labels associated with controls.
• Preserve keyboard accessibility for toggles, dialogs, menus, and navigation.
• Use descriptive link and button text.

Maintainability

• Avoid deeply nested wrapper <div> elements when semantic grouping is available.
• Keep class lists purposeful; remove unused or contradictory classes.
• Preserve project-specific HTML tokens and placeholders exactly as required.
• Avoid inline event handlers when a separate script can attach behavior cleanly.