3 min readTop 5 HTML Tricks and Tips

Share with others

Here are 5 HTML Tricks and Tips for beginners. If you’re just getting started with Web page development, these tips should prove to be very helpful!

Top 5 HTML Tricks and Tips

5 Useful HTML Tricks and Tips

1. Always close your HTML tags

When you type an opening HTML tag (e.g., b>, p>), always follow it with the corresponding closing tag. As an example:

  • <b>5 Useful HTML Tricks and Tips</b>
  • <p>5 Useful HTML Tricks and Tips</p>
  • <h2>5 Useful HTML Tricks and Tips</h2>

This ensures that your HTML pages work properly in all browsers and helps to prevent strange problems from occurring in your pages! This is especially true for tags like div>, span>, table>, tr>, and td>.

2. When possible, style HTML with style sheets.

Style sheets will greatly simplify your HTML coding. There will be no more font> tags everywhere! You also have much more control over the appearance of your pages, and you can change their appearance simply by editing one style sheet file.

3. Use an HTML validator

Before publishing your Web pages, it’s a good idea to run them through an HTML validator. These programmes will detect potential issues such as missing closing tags on tables and the use of tags that will not work correctly in all browsers. Remember that just because your page looks great in the browser you’re using doesn’t mean it will work in others!

HTML validators are also a good way to learn how to use HTML tags correctly – you can learn from your mistakes!

4. Use HTML comments wisely

You can add comments to your HTML code to make it clearer to you (and others). These are code snippets that Web browsers ignore, so they’re useful for adding short notes and reminders within the code:

<!-- Navigation area: Highlight a menu item with the "hi" class -->

<div id="nav">
    <li><a href="home.html">Home</a></li>
    <li class="hi"><a href="about.html">About</a></li>

5. Use widths and heights with HTML images

When using the img> tag, it’s a good idea to specify the width and height of an image. As an example:

<img src="business.jpg" width="234" height="123">

The benefit of doing so is that the Web browser can format the page faster as it loads because it knows how to lay out the images before they are downloaded. This means your visitors can begin browsing your page without having to wait for all of the images to load!

Most graphics programmes (Photoshop, Paint Shop Pro, and so on) allow you to view an image’s width and height (in pixels) so that you can insert the values into the img> tag. You can also right-click on the image and choose Properties (in Internet Explorer), or view the image in a separate window and read the width and height from the title bar (in most other browsers).

If you enjoy watching videos to learn, you should really watch this one. (Youtube Video)

Share with others
Iftikhar Qureshi
Iftikhar Qureshi

IFTIKHAR is a Website & SEO Developer, who also blogging addict, WordPress, HTML, PHP fanatic. Check out his social profile to contact him and view his past work.

Articles: 40