Native HTML Features

HTML has many built-in features that can replace small JavaScript solutions.

Using native HTML makes pages simpler, faster, and easier to understand.

In HTML-first development, you should always ask: Can the browser already do this?

The details Element

The element creates content that users can open and close.

The visible heading is written with the element.

Example

Example Code

html

Try it Yourself

More information

This text is hidden until the user opens it.

This works without any JavaScript.

HTML Form Validation

HTML can validate form fields before a form is submitted.

You can use attributes like required, minlength, maxlength, and pattern.

Example

Example Code

html

Try it Yourself

Username:

 Email:

 Register

The browser checks the fields automatically.

Input Types

HTML includes input types for common data.

These input types can show better keyboards on mobile devices and provide built-in validation.

type="email"
type="number"
type="date"
type="url"
type="search"

Example

Example Code

html

Try it Yourself

Birthday:

The datalist Element

The element gives users a list of suggested values.

The user can choose a suggestion or type another value.

Example

Example Code

html

Try it Yourself

Choose a browser:

The dialog Element

The element can be used for dialog boxes and popups.

Opening and closing dialogs usually needs a small amount of JavaScript, but the dialog behavior is built into the browser.

Example

Example Code

html

Try it Yourself

This is an open dialog window.

Lazy Loading Images

Images can be lazy loaded with the loading attribute.

This can improve performance by loading images only when they are needed.

Modern browsers support a loading="lazy" attribute for and elements. This tells the browser to defer loading the resource until the user scrolls near it.

Example

Example Code

html

Try it Yourself

Use native HTML first. Add JavaScript only when native HTML cannot solve the problem.