Work Like A Pro With These 5 HTML Hacks

Images

SVG

Scalable Vector Graphics (SVG) are tiny in size because that is XML code. It is a bunch of code, so it’s smaller in size and loads faster. When we scale PNG or JPG more than the original size, they get pixelated and reduce the look & fill with your website. But when you scale SVG, it will not pixelate and maintain crisp of the image in all retina. So You can manage it on all devices without quality and load issues.

Figure And Figcaption

when we need in caption image, people generally use <p> after image and show <p> as a caption. but that not the correct way.

Don’t do this

HTML5 has <figure> and <figcaption> tag for that. so you can add image in <figure> tag and caption in <figcaption>.

Do this

Forms

For Clickable Label

Generally, When we want a clickable label for a checkbox or radio, we use a label with a “for” attribute. But if you will put a checkbox or radio in a label, then the label will be automatically clickable if you want more customization. Then you can wrap the text of the label with span or any other tag. You can use “after & before” pseudo-elements for custom designing.

Form Validations

Form validations are good for security purposes. It help’s the user in entering correct data for your website. Some inputs in HTML5 already have predefined validation. Like ‘Email’, ‘URL’, and ‘Tel’. With the Pattern attribute’s help, we can validate the user’s information. With the pattern, we can define custom validation for input using Regular Expressions. Regular Expressions check which expressions the <input> element’s value.

Video

Video background video can reduce the bounce rate. Sometimes readings can be tedious, so that this concept can solve that problem. You need a video which can express your information effectively.

  • If you want your video autoplay, then make it mute first. Because of browser policy, if the user will not interact with the document, the video will not allow autoplay with volume. If you want volume, then you can provide a button for volume.
  • On iPhone, to play video inline, you can add the “playsinline” attribute to the video tag.

HTML

CSS

Meta Tags

Viewport

All devices have not the same width. So the layout needs to fit in each device. If you do not use the viewport meta tag, then the design will show a desktop in devices, and the layout will shrink.

Link Tags

Prefetch

<link rel=”prefetch”> download resources and store in to catch. The browser will not execute any resources which are stored in the catch.

Conclusion

As we saw, HTML stands out to be the easiest coding language to learn and implement. While there are a few more hack that you, as a beginner, can apply in your coding — the above-mentioned cover over 90% of the tricks. In fact, if you’re a front-end developer working for a branding & design agency, you understand the importance and versatility of HTML and how a brand can benefit from it. In case you’re looking for a quick guide and partner, you can reach out to us!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store