Best Practices and SEO
Headings, Meta Tags, Clean Code

Best Practices and SEO: Build HTML That Works for Humans and Search Engines

Great websites don't just look good — they’re structured, searchable, and semantic. Whether you’re creating a simple banana catalog or a cherry-powered e-commerce site, following HTML best practices ensures your content is accessible, crawlable, and SEO-friendly.

1. Meta Tags: Your First Impression in Search Results

Meta tags live inside the <head> and describe your page to search engines and social media platforms.

Essential Meta Tags:

<head>
  <title>Apple vs Banana: A Fruit Comparison</title>
  <meta name="description" content="Explore the health benefits, flavor profiles, and use cases of apples and bananas in this fruity showdown.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

[ Search engines display this title and description in results ]

Tip: Keep your meta description between 150–160 characters. Make it persuasive!

2. Proper Use of Headings (H1 to H6)

Search engines and screen readers rely on headings to understand page structure. Think of them as your document’s table of contents.

Good Example:

<h1>Fruit Facts</h1>
<h2>Apples</h2>
<p>Apples are rich in fiber and antioxidants.</p>

<h2>Bananas</h2>
<p>Bananas are high in potassium and great for smoothies.</p>

Best Practices:

  • Use only one <h1> per page
  • Follow a logical hierarchy (h1 → h2 → h3)
  • Use keywords naturally in headings

3. Title and Description Tags: SEO Superstars

Your <title> tag shows up in browser tabs and search engine results. The <meta name="description"> gives a preview of your page’s content.

<title>Cherry Nutrition Facts - Benefits and Recipes</title>
<meta name="description" content="Discover the sweet health benefits of cherries, along with easy recipes to include them in your diet.">

[ Google displays this snippet in search results ]

4. Clean and Semantic HTML Structure

Write HTML that’s easy to read for both humans and machines. Use semantic tags like <article>, <section>, <nav>, and <footer> to clarify meaning.

<article>
  <h2>How to Pick a Ripe Banana</h2>
  <p>Look for brown speckles and a soft texture.</p>
</article>

Tip: Avoid overusing <div> and <span> when semantic alternatives exist.

5. Linking Structure: Internal and External

Links help users and bots discover content. Use clear anchor text that describes the destination.

<a href="/apple-recipes">Try our Apple Pie Recipes</a>
<a href="https://fruitnutrition.org/bananas" target="_blank">Learn more about bananas</a>

Best Practices:

  • Use descriptive anchor text (not “click here”)
  • Link to relevant internal pages to build structure
  • Use target="_blank" for external links

6. Code Quality: Formatting and Readability

Clean, consistent code improves maintainability and helps search engine crawlers parse your content better.

Checklist:

  • Indent properly (2 or 4 spaces)
  • Close all tags
  • Use lowercase tag names
  • Avoid inline styles — use CSS

Summary

SEO isn't just about keywords — it's about clarity, structure, and quality. Today you learned to:

  • Craft effective <title> and <meta> tags
  • Use proper heading structure
  • Write semantic, accessible HTML
  • Build internal and external link strategies
  • Keep your code clean and meaningful

What’s Next?

Coming up: we’ll take these best practices and build an SEO-optimized HTML homepage layout for a fictional fruit brand — with accessibility and structure baked in.

QUIZ

Question 1:Which meta tag is essential for specifying the character encoding of an HTML document?

Question 2:Using heading tags (h1 to h6) properly helps search engines understand the page structure.

Question 3:Which of the following are best practices for SEO-friendly title and description tags?

Question 4:What is a key advantage of a clean, semantic HTML code structure for SEO?

Question 5:Linking structure, such as internal linking between pages, does not affect SEO.

Question 6:Which attributes in the tag can improve SEO when linking external resources?