You are currently viewing 8 HTML Tips For Beginners

8 HTML Tips For Beginners

We’ll go through 8 HTML Tips for beginners in this blog. So, if you’re a beginner at HTML or want to get started, these pointers should be helpful.

HTML is the most widely used markup language on the internet. We can make our websites using HTML. We should be aware of several best HTML practices when producing HTML code.

HTML Tips for Beginners

HTML is a markup language that determines the structure of web pages at their most basic level. HTML informs browsers how to process content and show it to the viewer using tags and attributes.

You can indicate which parts of the document are a title, a list, an image, and so on using HTML. You can also hyperlink a word, embed a picture, change the font’s italics, and do a lot more.

Closing the html tags

When writing code, don’t forget to close the tag with the equivalent closing tag at the end. Otherwise, you’ll run into troubles with validation and glitches at every turn.

<h2> TechTwerk </h2>

However, there are some tags in HTML that do not need to be closed, and they are referred to as void elements.

<br>: for line break
<hr>: for horizontal line
<img>: for inserting image.

Using rel = nooperner attribute

When you start a webpage with target="blank", the new webpage has access to the original window.opener, which might lead to security issues.

Use the rel ="noopener" or rel ="noreferrer" property to avoid this issue. They tell the browser to open the target resource without giving the document that opened its access.

<a href="https://techtwerk.com/" target="_blank" rel="noopener">
	TechTwerk Website
</a>  

Avoid Using Inline Styles

Although inline styles are safe and serve a purpose, they are not encouraged for a variety of reasons:

  • The use of inline styling expands the size of the page significantly.
  • Since inline styles are the same as the clumsy embedded tags and typefaces, they don’t distinguish between text and design.
  • It might not be available on all devices. While new and sophisticated screen readers are capable of handling inline characteristics and tags, certain older devices are not.

Use the loading = lazy attribute

Lazy loading means the images will not load until the users scroll to them. So, to delay the loading of images on your website, use the loading=lazy property.

Download Attribute

Assume you want users to be able to download a file without having to navigate to it. Then, in your links, use the download property.

<a href='file/data.pdf' download>
  Download Data
</a>  

Mark tag

Using the mark tag <mark>, you can easily highlight any text.

<p> This is <mark> TechTwerk </mark>, a website for tech blogs and  </p>

Non-breaking spaces

Non-breaking space is used when you wish to retain a group of words together on a single line rather than splitting them across two lines. The markup for doing so is as follows:

&nbsp;

Using the non-breaking space to keep the “Tech” and “Twerk” together.

<p> This is Tech&nbsp;Twerk </p>

Favicon cache busting

By appending ?v=2 to the end of the filename, you can compel your browser to refresh your website and download a new version via favicon cache-busting.

<link rel="icon" href="/favicon.ico?v=2" />

Interested viewers can also check out the article on Best News Apps in India by clicking here.

This Post Has One Comment

Leave a Reply