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>
Note: 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>
Note: 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">
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>
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.
Example
<dialog open>
<p>This is an open dialog window.</p>
</dialog>
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">
Note: Use native HTML first. Add JavaScript only when native HTML cannot solve the problem.
