Modern HTML & CSS Showcase

Latest capabilities as of May 2025, with minimal JavaScript

This page demonstrates the power of modern HTML and CSS with minimal JavaScript support. From interactive elements to advanced styling, discover what's possible with modern web standards in 2025.

Semantic Structure

Modern HTML provides a rich set of semantic elements that give meaning to your content and improve accessibility, SEO, and maintainability.

Article Example

Published: May 15, 2025

This is an example of an article with proper semantic structure. Articles can contain their own headers, footers, and sections.

Text Formatting

HTML provides various elements for text formatting without requiring CSS or JavaScript.

Basic Formatting

Bold text using 
Emphasized text using 
Underlined text using 
~~Strikethrough text~~ using <s>
Highlighted text using 
Small text using 
Text with _subscript using 
Text with ^superscript using

Advanced Text Formatting

漢字かんじ - Ruby annotations for East Asian typography

Text direction: This text will go right to left

Defining terms: HTML is the standard markup language for documents designed to be displayed in a web browser.

Variable: The equation is x = y + 2

Sample output: Hello, World!

Code and Keyboard

Use <code> for inline code like const x = 5; and <kbd> for keyboard inputs like Ctrl + S.

// This is a code block with syntax highlighting-like styling
function greet() {
  return "Hello, world!";
}

Quotes and Citations

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.

— W3C Mission Statement

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

— MDN Web Docs

Abbreviations and Details

HTML and CSS are the building blocks of the web. W3C maintains these standards.

More about HTML and CSS

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML.

Interactive Elements

Modern HTML includes several interactive elements that don't require JavaScript.

Details and Summary

Click to expand this section

The <details> and <summary> elements provide native HTML support for expandable content without requiring JavaScript.

Open Dialog

Native Popovers

Form Elements

HTML forms have evolved significantly, offering rich validation and input types without JavaScript.

Native Form Validation

Modern HTML provides powerful built-in validation capabilities:

Personal Information

Name:

Email:

Password (8-20 characters): Password strength indicator

Date of Birth:

Preferences

Favorite Color:

Satisfaction Level:

Low 75% High

Preferred Browser:

Update Frequency:

Subscribe to newsletter

Preferred Contact Method:

Email Phone SMS

Additional Information Feedback:

Upload File (PDF only):

Advanced Features

HTML Templates

The template above is not rendered but can be used as a blueprint for dynamic content. In a real application, JavaScript would clone and populate this template.

Progress and Meters

Task Progress: 70%

Disk Usage: 60%

Picture Element for Responsive Images

CSS Variables (Custom Properties)

This text uses a CSS custom property for its color.

CSS Grid Layout

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

Accessibility Features

Modern HTML provides numerous features to improve accessibility without requiring JavaScript.

ARIA Attributes

This is an alert message that would be announced by screen readers.

Skip Navigation

A skip navigation link (usually the first focusable element on a page) allows keyboard users to bypass navigation menus:

A skip link has been added at the top of the page. Press Tab when the page loads to see it appear.

Accessible Form Labels

Focus Management

CSS Animations

Modern CSS provides powerful animation capabilities without requiring JavaScript.

Hover Effects

Hover Me Hover For Effect

Keyframe Animations

CSS Transitions

Hover to expand

Hover to shrink

Responsive Design

Modern HTML and CSS provide powerful tools for creating responsive designs without JavaScript.

Responsive Typography

This heading uses clamp() for responsive sizing

This paragraph also uses clamp() to ensure the text is readable on all devices without requiring media queries.

Container Queries

Card 1

Card 2

Card 3

Card 4

Resize this container to see the cards reflow

Aspect Ratio

16:9 Aspect Ratio

1:1 Aspect Ratio

Advanced Layouts

Modern CSS provides powerful layout capabilities without requiring JavaScript.

CSS Flexbox

Flex Item 1

Flex Item 2 (grows more)

Flex Item 3

CSS Grid Advanced

Spans 2x2

1x1

Spans 2x1

1x1

CSS Subgrid

Subgrid allows nested grids to inherit the track sizing of their parent grid, enabling complex layouts with perfect alignment.

Parent Grid Item 1

Subgrid Item 1

Subgrid Item 2

Subgrid Item 3

Multi-column Layout

This is a multi-column layout that automatically balances the content between columns. It's perfect for text-heavy content like articles or blog posts.

The content flows naturally from one column to the next, creating a newspaper-like reading experience that works well on larger screens.

On smaller screens, the number of columns will automatically reduce to ensure readability is maintained without requiring JavaScript.

You can also control the width of columns instead of the count, allowing for more responsive designs.

CSS Scroll Snap

Scroll Snap provides a way to create smooth, controlled scrolling experiences without JavaScript.

Slide 1

Scroll horizontally to see the next slide. The scroll will snap to each slide.

Slide 2

Notice how the scrolling snaps to the beginning of each slide.

Slide 3

This creates a carousel-like effect without any JavaScript.

Modern CSS Selectors

CSS has evolved with powerful new selectors that make complex styling possible without JavaScript.

The :has() Selector

The :has() selector allows you to select elements based on their children or descendants - a "parent selector" that was long requested.

Card with Image

This card contains an image.

Card without Image

This card does not contain an image.

Another Card with Image

This card also contains an image.

The :is() and :where() Selectors

These selectors help simplify complex selector lists and control specificity.

Demo Header

This paragraph is inside a header.

Demo Article

This paragraph is inside an article.

This paragraph is inside a div inside an article.

The :focus-visible Selector

This selector applies styles only when the focus is from keyboard navigation, improving the user experience.

CSS Logical Properties

Logical properties and values provide a way to control layout through logical, rather than physical, direction and dimension mappings.

Physical Properties

Using left, right, top, bottom

Logical Properties

Using inline-start, inline-end, block-start, block-end

Logical Properties (RTL)

Same logical properties, different direction

Dark Mode

Modern CSS makes it easy to implement dark mode without JavaScript using CSS custom properties and media queries.

CSS-Only Theme Switching

This demo shows how to implement a theme toggle without JavaScript.

Toggle Dark Mode

Card Title

This card automatically adapts to the selected theme. All colors are controlled by CSS variables.

How It Works

The checkbox state is used to toggle a class on the parent container, which changes the CSS variables.

:root { --bg-color: white; --text-color: black; } .dark-theme { --bg-color: #222; --text-color: white; }

Print Styles

CSS media queries allow you to create print-friendly versions of your web pages without JavaScript.

Print-Optimized Content

This section demonstrates how to optimize content for printing using CSS media queries.

Article Title

Published: May 15, 2025 | Author: Web Standards Committee

This is an example article that will look different when printed. When you print this page, you'll notice:

Navigation menus and unnecessary UI elements are hidden
The layout is simplified for better readability on paper
Colors are optimized for printing (black text on white background)
Links show their URLs for reference
Page breaks are controlled to avoid splitting important content

This example link will show its URL when printed.

Data Table Example

Tables are specially formatted for printing to ensure readability.

Feature	Screen Display	Print Display
Colors	Full color palette	Optimized for black & white
Navigation	Visible	Hidden
Links	Clickable text	Text with URL
Images	As designed	Optimized resolution
Backgrounds	As designed	Removed to save ink

Modern Features with Minimal JavaScript

These features demonstrate the power of modern web standards with minimal JavaScript support.

1. Web Share API

Share content using the device's native sharing capabilities:

Note: Web Share API requires HTTPS and is supported in most modern browsers.

2. Clipboard API

const greeting = "Hello, HTML!";

3. Native Lazy Loading

Improve page performance with the loading="lazy" attribute:

Regular Image

Lazy Loaded Image

The lazy loaded image will only load when it comes into the viewport, saving bandwidth.

6. Scroll-To-Text Fragment

Link directly to specific text on a page:

This is a paragraph with some highlighted text that can be linked to directly using text fragments.

Jump to Highlighted Text

Note: Text fragments require HTTPS and are supported in Chromium-based browsers.

Semantic Structure

Text Formatting

Basic Formatting

Advanced Text Formatting

Code and Keyboard

Quotes and Citations

Abbreviations and Details

Interactive Elements

Details and Summary

CSS-Only Modal Dialogs

This is a CSS-only modal dialog

Native Popovers

Native HTML Popover

Form Elements

Native Form Validation

Advanced Features

HTML Templates

User Name

Progress and Meters

Picture Element for Responsive Images

CSS Variables (Custom Properties)

CSS Grid Layout

Accessibility Features

ARIA Attributes

Skip Navigation

Accessible Form Labels

Focus Management

CSS Animations

Hover Effects

Keyframe Animations

CSS Transitions

Responsive Design

Responsive Typography

This heading uses clamp() for responsive sizing

Container Queries

Aspect Ratio

Advanced Layouts

CSS Flexbox

CSS Grid Advanced

CSS Subgrid

Multi-column Layout

CSS Scroll Snap

Slide 1

Slide 2

Slide 3

Modern CSS Selectors

The :has() Selector

Card with Image

Card without Image

Another Card with Image

The :is() and :where() Selectors

Demo Article

The :focus-visible Selector

CSS Logical Properties

Physical Properties

Logical Properties

Logical Properties (RTL)

Dark Mode

Card Title

How It Works

Print Styles

Article Title

Data Table Example

Modern Features with Minimal JavaScript

1. Web Share API

2. Clipboard API

3. Native Lazy Loading

Regular Image

Lazy Loaded Image

6. Scroll-To-Text Fragment

7. Enhanced Form Validation Feedback

8. Intersection Observer for Scroll Animations

9. Web Speech API

11. CSS Scroll Snap with Navigation

Slide 1

Slide 2

Slide 3

12. CSS Variables Manipulation

Dynamic Theme with CSS Variables