DEV Community

Arnold Gunter
Arnold Gunter

Posted on

5 HTML Tricks to WOW Your Users

#html #webdev #programming

We all want to create that website that stands out, right? With that great buttery smooth user experience! Right?

Well, let me help you with 5 HTML tricks you never knew existed!

— Join hundreds of web developers leveling up their skills with my weekly newsletter — it is FREE —

1. Use the Camera on Mobile Devices

Did you know you can let users take pictures directly from your website? No need for third-party apps or special permissions — just a simple HTML attribute.
How It Works

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Capture</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
        input { margin-top: 20px; padding: 10px; }
    </style>
</head>
<body>
    <h2>Say Cheese! 📸</h2>
    <p>Click below to take a photo using your camera. (Only on mobile devices)</p>
    <input type="file" accept="image/*" capture="environment">
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • The <input type="file"> element allows users to upload files.
  • Adding capture="environment" tells the browser to use the back camera.
  • Using capture="user" opens the front camera instead. This is great for profile pictures, document uploads, or even just taking quick snapshots.

2. Add a Built-in Color Picker

Instead of making users type out hex codes, why not let them choose a color with a simple, built-in tool?
How It Works

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Picker</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
        input { margin-top: 20px; padding: 10px; }
    </style>
</head>
<body>
    <h2>Pick a Color! 🎨</h2>
    <p>Select your favorite color below:</p>
    <input type="color">
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • The <input type="color"> element opens a color picker when clicked.
  • Users can select a color, and the browser returns the hex code (like #ff5733). This is perfect for themes, design customization, or any feature that requires color selection.

3. Block Right-Clicking

If you want to prevent people from easily copying your content or saving images, you can disable right-clicking with a simple trick.
How It Works

<body oncontextmenu="return false">
    <h2>Try Right-Clicking! 😏</h2>
    <p>Oops! It’s disabled!</p>
</body>
Enter fullscreen mode Exit fullscreen mode

It won’t stop determined users, but it adds a small layer of protection against casual content theft.

4. Let Users Talk Instead of Type

Typing can be slow, so why not let users speak instead? With a single attribute, you can enable voice input in your forms.
How It Works

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Input</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; padding: 20px; }
        input { padding: 10px; width: 80%; }
    </style>
</head>
<body>
    <h2>Talk to Me! 🎤</h2>
    <p>Click the mic icon and start speaking.</p>
    <input type="text" x-webkit-speech>
</body>
Enter fullscreen mode Exit fullscreen mode
  • Adding x-webkit-speech to an <input> field enables speech-to-text in Chrome on mobile devices.
  • A microphone icon appears inside the input box.
  • Users click it, speak, and the text appears automatically. This is especially useful for search bars, chat applications, or accessibility features.

5. Refresh or Redirect a Page Automatically

Sometimes, you want a page to refresh itself or redirect users after a few seconds. You don’t need JavaScript for this — just a simple meta tag.

How It Works

<meta http-equiv="refresh" content="5"> refreshes the page every 5 seconds.
<meta http-equiv="refresh" content="5; url=https://example.com"> redirects after 5 seconds. This is useful for live updates, countdown pages, or guiding users to the right content.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Refresh & Redirect</title>
    <meta http-equiv="refresh" content="5; url=https://example.com">
</head>
<body>
    <h2>Hold Tight! ⏳</h2>
    <p>You will be redirected in 5 seconds...</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Final Thoughts
These small HTML tricks can improve your website’s user experience with minimal effort. They work across most browsers and don’t require any extra libraries or scripts.

Try them out, and happy coding!

Top comments (0)