DEV Community

Cover image for 12 HTML Tricks You Probably Don't Know About

12 HTML Tricks You Probably Don't Know About

HTML is the backbone of the web, but it's far more than just a set of basic tags and attributes. There are tons of hidden features in HTML that can make your websites more interactive, accessible, and efficient. Ready to level up your HTML skills? Let's dive into these cool tricks!

1. contenteditable - Make Elements Editable

Did you know you can make any HTML element directly editable by the user? The contenteditable attribute allows you to do just that. Whether you're building a CMS, an interactive blog, or a live text editor, this attribute can save you loads of time.

<div contenteditable="true">
 You can edit this text. Give it a try!
</div>
Enter fullscreen mode Exit fullscreen mode

Use case: Enhance user engagement by allowing them to edit content directly on the page. No need for complex JavaScript!

2. Custom Data Attributes - Store Extra Info on Elements

If you've ever needed a way to store custom data within an HTML element, custom data attributes are for you. These attributes, prefixed with data-, let you add extra information that you can access via JavaScript, without cluttering your DOM.

<div id="user-profile" data-user-id="42" data-role="admin">
 <! -User details go here 
</div>
Enter fullscreen mode Exit fullscreen mode

Usage: Perfect for dynamic applications that rely on metadata. Plus, it keeps your code clean!

3. The hidden Attribute - Hide Elements Without CSS

Forget using display: none; in your stylesheets. The hidden attribute is a more semantic way to hide elements. It's easy to use and helps keep your HTML tidy.

<p>This paragraph is visible.</p>
<p hidden>This paragraph is hidden.</p>
Enter fullscreen mode Exit fullscreen mode

Usage: Use it with JavaScript to show or hide elements dynamically without worrying about styles.

4. <fieldset> and <legend> - Better Form Accessibility

Forms can get messy, especially if they have many inputs. Enter <fieldset> and <legend>. These tags help you group related controls together, providing a clear, accessible structure for all users, including those using screen readers.

<fieldset>
 <legend>Personal Information</legend>
 <label for="firstname">First Name:</label>
 <input type="text" id="firstname" name="firstname">
</fieldset>
Enter fullscreen mode Exit fullscreen mode

Usage: It's all about improving user experience. Structured forms are easier to navigate and understand!

5. download Attribute - Simplify File Downloads

Want to offer a file download on your site? The download attribute on an <a> tag lets you do this seamlessly. You can even specify the filename that the file should be saved as.

<a href="path/to/file.pdf" download="myfile.pdf">Download the PDF</a>
Enter fullscreen mode Exit fullscreen mode

Usage: Makes downloading files straightforward for your users. No need for extra server-side configurations!

6. spellcheck - Enable Spell Checking in Text Inputs

Ever wanted to add spell-checking to your text inputs or textareas? The spellcheck attribute lets you turn on the browser's built-in spell checker. This can be super useful for enhancing user experience by reducing typos and mistakes.

<textarea spellcheck="true">This textarea will be spell-checked!</textarea>
Enter fullscreen mode Exit fullscreen mode

Usage: Make sure users always have a great experience by helping them avoid embarrassing typos.

7. inputmode - Improve Mobile Input

Tailor the virtual keyboard for users on mobile devices using the inputmode attribute. This attribute specifies what kind of input is expected, triggering a keyboard that's optimized for the type of data to be entered.

<input type="text" inputmode="numeric" placeholder="Enter your phone number">
Enter fullscreen mode Exit fullscreen mode

Usage: Providing the right keyboard helps users enter data quickly and correctly. Great for mobile-friendly sites!

8. <details> and <summary> - Create Native Expandable Content

Need to create expandable content without relying on JavaScript? The <details> and <summary> elements offer a simple, built-in solution for collapsible sections. Perfect for FAQs, menus, or any other content that benefits from being hidden until needed.

<details>
 <summary>What is HTML?</summary>
 <p>HTML stands for HyperText Markup Language. It's the foundation of the web!</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Usage: This is a lightweight, accessible way to toggle content visibility without using JavaScript.

9. draggable -Add Drag-and-Drop Functionality

Want to add drag-and-drop functionality to your site? The user is able to drag elements with the "draggable" attribute. It's an easy way to introduce interactivity without needing external libraries.

<img src="image.jpg" alt="Draggable Image" draggable="true">
Enter fullscreen mode Exit fullscreen mode

Usage: Combine draggable with JavaScript events to create custom drag-and-drop experiences!

10. type="date" - Simplify Date Input

Instead of using text fields and JavaScript to manage dates, try using <input type="date">. This will bring up a native date picker in most modern browsers, making it easier for users to enter dates.

<input type="date" name="birthday">
Enter fullscreen mode Exit fullscreen mode

Usage: Provides a consistent, easy-to-use interface for date input, no additional JavaScript required.

11. srcset and sizes - Optimize Images for Different Devices

If you want to make your website faster and more responsive, use the srcset and sizes attributes on <img> tags. These attributes allow the browser to choose the most appropriate image based on the device's screen size and resolution.

<img src="image-small.jpg"
 srcset="image-medium.jpg 768w, image-large.jpg 1200w"
 sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
 alt="Responsive Image">
Enter fullscreen mode Exit fullscreen mode

Usage: Serve the right image for the right screen, reducing load times and improving the user experience.

12. placeholder - Enhance Form Inputs with Hints

Need to provide a hint or example for your form inputs? Use the placeholder attribute to display a short hint inside an input field before the user enters a value.

<input type="email" placeholder="you@example.com">
Enter fullscreen mode Exit fullscreen mode

Usage: It helps users understand what input is expected without cluttering your form with extra text.

Final Takeaway

These HTML tricks show that there’s a lot more to HTML than meets the eye. Don’t just settle for the basics—explore and experiment with these features to build more dynamic, accessible, and user-friendly web pages. Dive in and start experimenting to discover all the cool things HTML can do!

Top comments (1)

Collapse
 
d7460n profile image
D7460N

This is a great list. Thanks for posting!