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 <details> element creates content that users can open and close.
The visible heading is written with the <summary> element.
Example
<details>
<summary>More information</summary>
<p>This text is hidden until the user opens it.</p>
</details>
Try it Yourself »
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
<form action="/register" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="3">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Register</button>
</form>
Try it Yourself »
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
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
Try it Yourself »
The datalist Element
The <datalist> element gives users a list of suggested values.
The user can choose a suggestion or type another value.
Example
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
Try it Yourself »
The dialog Element
The <dialog> 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.
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 <img> and <iframe> elements.
This tells the browser to defer loading the resource until the user scrolls near it.
Example
<!-- The browser handles the timing here -->
<img src="image.jpg" alt="A mountain" loading="lazy">
Try it Yourself »
Use native HTML first. Add JavaScript only when native HTML cannot solve the problem.
