Work Like A Pro With These 5 HTML Hacks

Right from school, HTML is the first of the many computer basics that we taught, and it stays with us the longest. It is an essential language that is simple to learn and easy to implement even by non-coders. HTML is a standard markup language requiring technologies like Cascading Style Sheet (CSS) and more scripting languages like Javascript.

While a few of us know our way around HTML and the little tips and tricks, some of us beginners are yet to learn a few work hacks. We shall attempt to uncover a few of these work hack to make your coding quicker and sturdy.

Images

SVG

When we need an image with a shape, people generally save the image with shape as png and use it. But in that case, they will make a compromise with quality. If you don’t want to compromise with the quality, you can add an image in vector shape.

Like this, you can add SVG code with a link on the image.

Figure And Figcaption

Don’t do this

Do this

Forms

For Clickable Label

Form Validations

Video

  • Add video in the ratio to ignore cropping issues.
  • 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

“width=device-width” = This will fit layout in device width.

“initial-scale=1” = On load this will zoom layout to 1.

“maximum-scale=1” = This will not zoom layout more than 1.

“user-scalable=no” = This will prevent user from zoom.

Link Tags

Prefetch

When the user redirects to that page, then page load speed will be increase.

Conclusion

Originally published at https://www.zealousweb.com.

We Fuel Notions that grow! We know Web, We know your industry and we’re here to help you.