HTML (Hypertext Markup Language) is the backbone of any website, and it’s essential to know some tricks to make your website stand out. But, often times, we don’t hear about the lesser-known HTML tricks that can take our website to the next level. Here are some HTML tricks that are not commonly known but can be incredibly useful:
5 HTML Tricks Nobody Tells You
1.Spellcheck
The spellcheck is used to check the spelling and grammar of Html elements such as input.
<input spellcheck="true" placeholder="Enter Anything"></input>2. Translate
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"> Do not translate this! </p>3. Accept
The accept attribute is used to specify the type of files the user can upload. In the below example, the user can upload or use only .jpg or .raw files.
<input type="file" accept=".jpg, .raw">4. Poster
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
<video src="" poster="cat.jpg" ></video>5. Download
The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
<a href="" download></a>HTML Tricks That Nobody Tells You About
Here we’ll be discussing some of the HTML tricks that nobody tells you about.
Use the “alt” attribute in images
This attribute is used to describe the image in case it doesn’t load or is not visible to users with visual impairments. It’s important to provide a concise and meaningful description of the image to make your website more accessible. For example, if you have an image of a cat, your “alt” attribute should read “a cat sitting on a windowsill.”
Use CSS for layout and styling
HTML is used to create the structure of the website, while CSS is used for styling and layout. Using CSS allows for a more organized and efficient way to style your website, and it also separates the presentation from the structure of your website. This way, you can make changes to the layout or design of your website without affecting the content.
Use semantic elements
HTML5 introduced new semantic elements such as , , , , , etc. These elements give meaning to the structure of your website and make it easier for search engines to understand the content of your website. For example, using the element for the header of your website, and the element for the footer of your website, makes it clear for the search engine to understand the structure of your website.
Use the “data” attribute
The “data” attribute allows you to store extra information on an element. This information can be used by JavaScript to change the behavior of the element or by CSS to change the styling of the element. This attribute can be used to store information such as the original size of an image, the language of a paragraph, or the number of items in a shopping cart.
Use the “spellcheck” attribute
The “spellcheck” attribute allows you to enable or disable the spell checker on an element. This attribute is especially useful for forms where you want to check the spelling of the input. By default, the spellchecker is enabled on all elements, but by setting the attribute to “false”, you can disable it on specific elements.
Conclusion:
In conclusion, knowing these HTML tricks can help you create a more accessible, efficient, and visually appealing website. Always remember to use semantic elements, use CSS for layout and styling, and take advantage of attributes such as “alt,” “data,” and “spellcheck” to enhance the user experience.
Also Read: