Hello Beginners! In this post, I will show you 10 HTML Pro Tips. I will show you 10 HTML Pro Tips for Beginners. You should keep in mind these 10 HTML tips.

So, Let's get started

Don't Forgot To Close Your HTML Tags

When you type a starting HTML tag (e.g. <h1>, <p>) don't forgot to close it with ending HTML tag (e.g. </h1>, </p>). Let's see an example with some tags.

<h1>HTML Pro Tips For Bigenners</h1>

<p>HTML Pro Tips For Bigenners</p>

<b>HTML Pro Tips For Bigenners</b>

This will ensure that your HTML pages work properly on all browsers, and will help to prevent any issue on your web pages. Some tags don't have a closing tag, these tags use on their own. For example:

The <br> tag is used for line break.
The <img> tag is used for show images on web pages.

Try to use external CSS to style your HTML pages

External style sheets will make your HTML coding life much easier. No more <font> tags everywhere to style any text! You also have good control over your pages how they will look, and you can change their style just by editing one style sheet file.

Use HTML Validator

It’s a good practice to run your HTML pages through an HTML validator before you publish them on a live server. These programs will validate problems such as missing closing tags on tables and check tags that won’t work properly on all browsers. Don’t forget – just because your page looks good in the browser where you’re viewing it doesn’t mean it will work on other browsers as well! HTML validators are also a good way to learn about How to use HTML tags in the correct way– you can learn from your mistakes!

W3C Markup Validation Service is the best and free-to-use HTML validator.

Use comments wisely in your HTML code

To make your HTML code readable for you and for others, you can add comments to your code. These are snippets of code that are ignored by browsers, so they’re useful for adding short notes and reminders within the code for you and for other developers.

<!-- Navigation Menu: Active a menu item with the \"active\" class -->

<div id=\"nav\">
  <ul>
    <li><a href=\"/\">Home</a></li>
    <li class=\"active\"><a href=\"/about/\">About</a></li>
  </ul>
</div>

Non-breaking Spaces in HTML

Sometimes you want to keep specific words together so that they’re not broken over two lines. You can do this with a non-breaking space HTML element. In the HTML a non-breaking space looks like this:

&nbsp;

For example, the following words (Brown and Fox) will break if they place at the end of a line

<p>The Quick Brown Fox</p>

To prevent breaking words in new lines should be used this way.

<p>The Quick Brown&nbsp;Fox</p>

Use Widths & Heights With HTML Images

It's a good idea to use the width and height attribute of an image when using an <img> tag. For example:

<img src=\"myimage.jpg\" width=\"200\" height=\"200\">

The advantage of using these attributes is that Web Browsers can format the page quickly as it is loaded because it understands how to arrange the images before they are downloaded. This means that your viewers can scroll your page without having to wait for all the images to show!

Most Graphic Softwares (Photoshop, Adobe Illustrator, etc) allow you to view the width and height of an image (in pixels) so that you can add the values into the <img/> tag easily. You can also right-click on the image and select inspect elements to check the width and height of that image.

Embedding images in HTML

The use of the <img> tag to correctly point to images is a common hurdle for beginners. Often your web page will appear good on your browser, however, while you add the web page for your site, all of the pictures are broken! The hassle isn`t helped via way of means of a few net web page editors, which incorrectly place “file://” picture URLs as averse to the usage of relative URLs! Follow that easy strategy to make certain your HTML images seem efficient each time.

i- Use Relative URLs.

Relative URLs are generally easy to use due to the fact they may paintings anyplace the web page and images are located, furnished they`re constantly withinside the identical location relative to every other. For example, if the image is withinside the same folder as the web page, use:

<img src=\"myimage.jpg\">

If the image is in another folder (Like images) but at the same level as the web page, then use:

<img src=\"images/myimage.jpg\">

If the image is in a folder at a level above the web page, then use:

<img src=\"../images/myimage.jpg\">

ii- Use URLs relative to the document root, Alternatively

If all your images are in the image folder which is the top level of your website (the document root or webroot), you can use images like this:

<img src=\"/images/myimage.jpg\">

Hope it will be helpful.

You can suggest other tips & tricks in the comment section, I will add them in my next article.

Happy Learning :)