8 HTML Tips That Every Beginner Should Follow

HTML is the standard markup language for web pages. Using HTML, we can create our websites. While writing the HTML code, we should be aware of some best HTML practices. In this blog, we will share 8 HTML tips for beginners. So if you are a newcomer or want to start with HTML, these tips should be beneficial to use.

1. Avoid Using Inline Styles

Inline styles are surely harmless and have a purpose, but they are not preferred because of many reasons:

• They don’t separate our content from design as inline styles are the same as the clunky embedded tags and fonts.
• Inline styling makes our page much bigger.
• It may not be accessible on every device. While new and modern screen readers can handle inline attributes and tags efficiently but some old devices can’t.

2. Always close your HTML tags

While writing a code, don’t forget to place the corresponding closing tag at the end after opening the tag. Otherwise, you will encounter validation and glitch issues at every turn.

Example: <h2> WidgetCore </h2>

However, HTML does contain some tags which don’t need to be closed, and they are known as void elements.

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

3. Use the loading = lazy attribute

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

<img src='logo.jpg' loading='lazy' alt='WidgetCore Logo'>  

4. Use rel = nooperner attribute

Webpages opened with target=”_blank” allow the new webpage to access the original window.opener, which can cause security inference. So to prevent this situation, use rel = “noopener” or rel = “noreferrer” attribute. They instruct the browser to open the target resource without granting access to the document that opened it.

<a href="https://widgetcore.com/" target="_blank" rel="noopener">
	WidgetCore website
</a>  

5. Favicon cache busting

By Using favicon cache busting, you can force your browser to refresh your website and download a new version by adding ?v=2 to the end of the filename.

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

6. Download Attribute

Suppose you want to allow users to directly downloading the file rather than navigating it. Then use the download attribute in your links.

<a href='file/resume.pdf' download>
  Download Resume
</a>   

7. Non-breaking spaces

If you want to keep certain words together so that they are not split over two different lines, we use non-breaking space. The markup for doing this is:

&nbsp;

Example:

<p> WE ARE WIDGET CORE </p>

If we want to keep the widget and core together, we will use non-breaking space.

<p> WE ARE WIDGET&nbsp;CORE </p>

8. Mark tag

You can highlight any text easily by using the mark tag <mark>.

<p> WE ARE <mark> WIDGETCORE </mark> A BLOGGING WEBSITE. </p>

Hopefully, you loved all the HTML tips for beginners and found them helpful. If you have any other HTML tips, let others know by commenting in the comment section below.

Happy Coding!