You want to make your website stand out from the crowd but you’re not sure what to do. You’ve been reading up on cool HTML tricks and tips, but haven’t been able to identify any unique ideas that will improve your web pages.
Html tricks are useful for web page design and development to boost website performance and gain more traffic.
With it, you can make your website stand out, or create interactive features that enhance the user experience.
Here are 11 cool HTML tips you can use in your next website design.
1. Add Voice Recognition
The voice recognition tag allows you to embed a recording of your own voice into your web page. This could be useful if you want to say something and have it appear as text on the page.
This trick is used to add voice search in the input field. Like Google searches, it searches by voice recognition.
This will only work on mobile devices(Laptop only Google Chrome.
<input type="text" x-webkit-speech/>
2. Lazy Loading Image
If you’re looking to make your web pages stand out, there’s no better way than by using lazy loading i.e. one of the most important cool HTML tricks.
Lazy loading is the process of displaying an image on a page when it’s not needed—for example, when the browser has already loaded it and is waiting for more data.
This technique allows you to save bandwidth and improve performance, but it also adds to the aesthetics of your site by allowing users to see more content as they scroll down.
You can use lazy loading in your HTML code with this line:
<img src="image.png" loading="lazy" alt="..." width="200" height="200">
3. Input Suggestions
An input suggestion tag is a small piece of code that you can add to an HTML page. It’s used to suggest what the user should enter into a form field—and it’s pretty useful! You can use these tags in a variety of ways:
- Search forms
- Contact forms
- Sign up forms
<label for="programmingLanguages">Choose Your Favourite Programming Language:</label>
<div class="container">
<input type="text" list="programmingLanguages"
placeholder="Enter Here" />
<datalist id="programmingLanguages">
<option value="Objective C">Objective C</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Cobol">Cobol</option>
<option value="Go">Go</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
<option value="Pascal">Pascal</option>
<option value="Perl">Perl</option>
<option value="R">R</option>
<option value="Swift">Swift</option>
</datalist>
4. Picture Tag
Picture tags are a great way to add images to your web pages. You can simply use the picture tag to insert an image into your web page without having to write any additional code. The picture tag is used like this:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
5. Document Refresher
You can use the document. refresh() method to refresh your webpage. The method refreshes the current page when using an AJAX request, or if you have linked to an external web page.
To refresh a webpage, you must first call the refresh() method on the window object. Then, you need to specify an interval parameter, which specifies how often (in seconds) you want the browser to refresh your page. For example, if you want to refresh your page every 5 seconds, then set this variable to 5000 (5 seconds).
**<head>
<meta http-equiv="refresh" content="30">
</head>**
6. Spellcheck
Spellcheck in HTML is a great way to make sure that your documents are error-free. It will allow you to check your spelling, as well as grammar and punctuation.
The spellchecker can be turned on or off, depending on what you want out of it. If you’re looking for a simple way to improve the quality of your documents, turning it on is a good idea.
<p contenteditable="true" spellcheck="true">This is a paragraph.</p>
7. Translate
This is one of the easiest cool HTML tricks. The Translate attribute is used to tell the browser whether the content is to be translated or not. It can be translated into any language.
<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>
8. Accept
The HTML attribute accept is used to specify the file types that the server will accept. This attribute can only be used on type=”file”> elements. This attribute is not used by validators, as file uploads must be validated on the server.
<form action="/action_page.php">
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
<input type="submit">
</form>
9. Poster
Poster tags in HTML are a great way to add custom content to your site. This is especially helpful when you’re using a theme that has only one image as its background. If you need to use multiple images, such as banners and other visual elements, you can use poster tags instead of having to add multiple images on the page.
You can use poster tag attributes to customize the size of your image. For example, if you want an image to be twice as large as normal—so it takes up half of the space on your page—use this code:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
10. Download
The download tag is an HTML element that allows you to specify exactly what file or files your page should be downloading.
It lets you define a URL that points to the file you want to download, and it also lets you define what type of file it is (e.g., “image/jpg”).
The download tag can be used in any kind of HTML document, including those that are displayed on the web, and it can be used to link directly to files from web servers or other locations on the Internet.
<a href="/images/myw3schoolsimage.jpg" download>
11. User Camera
With the advent of the web and the rise of smartphones, it’s no surprise that people are now taking more photos and videos than ever before. However, when you’re trying to take a picture or record a video on your phone, you might be surprised to find out that there’s no easy way to access your phone’s camera.
Fortunately, there’s an easy fix: add a “user” tag with the number of the camera on your phone right after the tag. This will make all shots taken by this camera appear in your photo gallery.
Open back facing camera to take a video:
<input type="file" capture="environment" accept="video/*">
Open front-facing camera to take a photo:
<input type="file" capture="user" accept="image/*">
**Conclusion
**
Compared to HTML’s earlier days, it is much easier to work with this language today. These great tricks will make you feel like an HTML master and save you time while creating great web pages. If you want to learn more about HTML then W3 School is best.
Let me know if you know more cool HTML tricks in the comments.
Top comments (0)