close

Work Like A Pro With These 5 HTML Hacks

Post by|Web Development10 March,2021
431 View

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

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.

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.

<svg xmlns=“http://www.w3.org/2000/svg” width=“210” height=“236” viewBox=“0 0 210 236”>

<clipPath id=“hexa-image”>

<path d=“M730.985,3216.3v-90.63a27.422,27.422,0,0,1,13.577-23.71l77.86-45.31a26.965,26.965,0,0,1,27.154,0l77.86,45.31a27.421,27.421,0,0,1,13.576,23.71v90.63a27.421,27.421,0,0,1-13.576,23.71l-77.86,45.32a26.965,26.965,0,0,1-27.154,0l-77.86-45.32A27.422,27.422,0,0,1,730.985,3216.3Z” transform=“translate(-731 -3053)”></path>

</clipPath>

<a class=“leader-link” clip-path=“url(#hexa-image)” href=“#”>

<image clip-path=“url(#hexa-image)” width=“210” height=“236” href=“https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D–gqhA” preserveAspectRatio=“xMidYMin slice”></image>

</a>

</svg>

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

<img src=“https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D–gqhA” alt=“”>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

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

Do this

<figure>

<img src=“https://i.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D–gqhA” alt=“”>

<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>

</figure>

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 action=“”>

<label><input type=“checkbox” name=“checkbox” value=“value”>I agree</label>

<div>

<label><input type=“radio” name=“radio” value=“value”>1</label>

<label><input type=“radio” name=“radio” value=“value”>2</label>

<label><input type=“radio” name=“radio” value=“value”>3</label>

</div>

<input type=“submit”>

</form>

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.

<form>

<label>Email:</label>

<input type=“email” pattern=“[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$”>

<input type=“submit”>

</form>

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.

  • 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

<div class=“video-wrapper”>

    <video autoplay loop muted playsinline>

        <source src=“videoplayback.mp4”>

    </video>

</div>

CSS

.video-wrapper {position: relative;width: 50%;margin: 0 auto;}

.video-wrapper:before {content: “”;display: block;padding-top: calc(937 / 1665.77 * 100%);}

.video-wrapper video {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%;}

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.

<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

“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

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

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

<link rel=“prefetch” href=“/style.css” as=“style” />

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!

FAQ

Which Way Is Better To Add SVG As An Image Or Code?

If you want to make an animation or any changes using CSS in SVG then you must use code on the HTML page else you don’t need any interaction with SVG then you can add it as an image.

Is There Any Way To Play The Video With Sound?

Now there is no any way to play the video with volume without any user interaction. You can manipulate the browser in some cases but that will not work always. So it is better to choose the proper way for autoplay.


Speak Your Mind

Please enter your comment.
Please enter your name.