HTML Best Practices

Building websites is like building a house. Just like you follow rules when constructing a house to make it safe and strong, you also need to follow rules when building websites. These rules help make sure the website works well for everyone, and it’s easy to understand and use.

1. 🧑‍💻 Code Indentation

Indentation is like organizing your toys neatly on shelves. When you put your toys in the right order, you can find them easily. In coding, we use spaces or tabs to make our code easy to read and understand.

Example:

<div>
  <p>Hello, world!</p>
</div>

Here, we use spaces to show the relationship between things. It helps us understand that the <p> tag is inside the <div> tag.

2. 📦 Proper Nesting

Imagine you are putting boxes inside other boxes. You have to make sure the smaller box goes inside the bigger box properly. Similarly, in HTML, some tags need to go inside other tags.

Example:

<p>This is a paragraph <a href="#">with a link!</a></p>

In the example above, the link tag <a> is correctly placed inside the paragraph <p>. This makes the code work properly.

3. 📈 SEO-Friendly Structure

SEO stands for Search Engine Optimization, which is a fancy way of making sure your website is easy to find. Imagine your website is like a store, and SEO is like making sure people can find your store on the map.

You can make your website easy to find by using the right HTML tags:

<h1>Welcome to My Awesome Website!</h1>
<p>This is a description of what my website is about.</p>

Here, the <h1> tag is the most important heading, which helps search engines understand what your website is about. The <p> tag is a paragraph, telling search engines what your website contains.

4. 📱 Mobile-Friendly (Responsive)

Imagine you have a toy that works well with your big toy car, but it doesn’t fit in a small toy car. You need to make sure your toys fit in any car! Similarly, we want our website to look good on any device, whether it’s a big desktop computer or a small phone.

To make your website responsive (able to work on all devices), you use something called CSS and the meta viewport tag.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag helps your website scale properly on phones and tablets, so people can read it without zooming in and out.

5. ⚡ Performance Considerations

Performance is like how fast you can clean up your toys after playing. If you leave your toys scattered, it can take longer. Similarly, if a website is too slow, people might get bored and leave.

You can make your website faster by following these rules:

⏳ Lazy Loading

Lazy loading is like only picking up the toys when you need them. When a page loads, we don’t need to show everything at once. We can wait until the user scrolls to see images or videos, making the page load faster.

Example:

<img src="image.jpg" loading="lazy" alt="A beautiful landscape">

📝 Minimize DOM

The DOM (Document Object Model) is like a list of all the things on your page. The shorter the list, the faster it loads. If you add too many things, it can make the website slow.

To minimize the DOM, don’t add unnecessary tags, and only include what is needed.

Summary

• 🧑‍💻 Indentation: Organize your code so it’s easy to read.
• 📦 Nesting: Make sure tags go inside the right other tags.
• 📈 SEO: Use important tags like <h1> to help people find your website.
• 📱 Responsive: Make sure your website works on phones, tablets, and desktops.
• ⚡ Performance: Use lazy loading and keep your code simple to make the website faster.

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Resources