SEO (Search Engine Optimization) is the practice of optimizing your website to rank higher in search engine results. Good HTML structure and proper use of semantic elements are fundamental to SEO success. While content quality matters most, how you structure that content with HTML directly impacts how search engines understand and rank your pages.
What is SEO?
SEO is about making your website more visible to people searching for products, services, or information related to your content. Higher rankings in search results typically lead to:
- More website traffic
- Better qualified visitors
- Increased brand awareness
- Higher conversion rates
- Better user experience
How Search Engines Work
Understanding the basics helps you optimize effectively:
- Crawling: Search engine bots discover and visit web pages
- Indexing: Pages are analyzed and stored in the search engine's database
- Ranking: Algorithm determines which pages to show for each search query
Title Tags
The title tag is one of the most important on-page SEO elements:
title-tags.html
<head>
<!-- ✅ GOOD: Clear, descriptive, keyword-rich -->
<title>Best Running Shoes for Marathon Training | RunGear Pro</title>
<!-- ✅ GOOD: Includes brand, benefit, location -->
<title>Organic Coffee Beans - Fresh Roasted | Portland Coffee Co</title>
<!-- ❌ BAD: Too generic -->
<title>Home</title>
<!-- ❌ BAD: Keyword stuffing -->
<title>Shoes, Running Shoes, Marathon Shoes, Athletic Shoes, Buy Shoes</title>
<!-- ❌ BAD: Too long (gets cut off) -->
<title>Welcome to Our Amazing Website Where We Sell the Best Products You've Ever Seen at Great Prices</title>
</head>Title Tag Best Practices
- Keep between 50-60 characters (or ~600 pixels)
- Include primary keyword near the beginning
- Make it unique for each page
- Write for humans, not just search engines
- Include brand name (usually at the end)
- Be descriptive and compelling
Meta Description
The meta description appears below the title in search results:
meta-description.html
<head>
<title>Best Running Shoes for Marathon Training</title>
<!-- ✅ GOOD: Compelling, descriptive, includes CTA -->
<meta name="description" content="Discover top-rated running shoes designed for marathon training. Expert reviews, detailed comparisons, and free shipping on orders over $50. Shop now!">
<!-- ❌ BAD: Too short, not descriptive -->
<meta name="description" content="Running shoes for sale.">
<!-- ❌ BAD: Too long (gets truncated) -->
<meta name="description" content="Welcome to our comprehensive guide about running shoes where we discuss everything you need to know about finding the perfect pair of shoes for marathon training including detailed reviews of every brand and model available on the market today along with expert tips and advice.">
<!-- ❌ BAD: Duplicate description from title -->
<meta name="description" content="Best Running Shoes for Marathon Training">
</head>Meta Description Best Practices
- Keep between 150-160 characters
- Include primary keyword naturally
- Write unique descriptions for each page
- Make it compelling to encourage clicks
- Include a call-to-action when appropriate
- Accurately summarize page content
Heading Hierarchy for SEO
Proper heading structure helps search engines understand your content:
heading-seo.html
<!-- ✅ GOOD: Proper hierarchy -->
<article>
<h1>Complete Guide to Marathon Training</h1>
<h2>Getting Started with Marathon Training</h2>
<p>Introduction to marathon training...</p>
<h3>Choosing the Right Training Plan</h3>
<p>Details about training plans...</p>
<h3>Essential Gear for Beginners</h3>
<p>Information about running gear...</p>
<h2>Advanced Training Techniques</h2>
<p>Advanced techniques...</p>
<h3>Interval Training</h3>
<p>Details about intervals...</p>
</article>
<!-- ❌ BAD: Only one heading level -->
<article>
<h1>Complete Guide to Marathon Training</h1>
<h1>Getting Started</h1>
<h1>Training Plans</h1>
<h1>Advanced Techniques</h1>
</article>
<!-- ❌ BAD: Skipping levels -->
<article>
<h1>Main Title</h1>
<h4>Subsection</h4> <!-- Skipped h2 and h3 -->
</article>Heading SEO Tips
- Use only one H1 per page (typically the page title)
- Include keywords naturally in headings
- Follow logical hierarchy (H1 → H2 → H3)
- Make headings descriptive of the content below
- Don't skip heading levels
- Use headings to structure content, not for styling
Semantic HTML for SEO
Search engines understand semantic HTML better:
semantic-seo.html
<!-- ✅ GOOD: Semantic structure -->
<article>
<header>
<h1>Article Title</h1>
<time datetime="2024-10-15">October 15, 2024</time>
</header>
<section>
<h2>Introduction</h2>
<p>Article content...</p>
</section>
<section>
<h2>Main Points</h2>
<p>More content...</p>
</section>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
<!-- ❌ BAD: Generic divs -->
<div class="article">
<div class="header">
<div class="title">Article Title</div>
<div class="date">October 15, 2024</div>
</div>
<div class="content">
<p>Article content...</p>
</div>
</div>URL Structure
Clean, descriptive URLs help both users and search engines:
url-structure.html
<!-- ✅ GOOD: Descriptive, keyword-rich URLs -->
https://example.com/blog/marathon-training-guide
https://example.com/products/running-shoes/nike-pegasus-40
https://example.com/about/our-team
<!-- ❌ BAD: Cryptic, parameter-heavy URLs -->
https://example.com/page?id=12345
https://example.com/product.php?cat=3&item=567
https://example.com/p/x7k2m9
<!-- ✅ GOOD: Canonical tag for duplicate content -->
<head>
<link rel="canonical" href="https://example.com/products/red-shoes">
</head>
<!-- Use when same content accessible via multiple URLs:
https://example.com/products/red-shoes
https://example.com/products/red-shoes?color=red
https://example.com/shoes/red
-->URL Best Practices
- Use hyphens (-) to separate words, not underscores (_)
- Keep URLs short and descriptive
- Include target keywords
- Use lowercase letters
- Avoid special characters and parameters when possible
- Create logical hierarchy (/category/subcategory/page)
Internal Linking
Internal links help search engines discover pages and understand site structure:
internal-linking.html
<!-- ✅ GOOD: Descriptive anchor text -->
<p>
Learn more about
<a href="/guides/marathon-training">marathon training techniques</a>
for beginners.
</p>
<p>
Check out our guide on
<a href="/nutrition/runners-diet">nutrition for runners</a>
to fuel your training.
</p>
<!-- ❌ BAD: Generic anchor text -->
<p>
Want to learn more? <a href="/guide">Click here</a>
</p>
<p>
For more information, visit <a href="/page">this page</a>
</p>
<!-- ✅ GOOD: Contextual linking -->
<article>
<h2>Best Running Shoes for Beginners</h2>
<p>
If you're new to running, choosing the right shoes is crucial.
Our <a href="/guides/shoe-buying-guide">comprehensive shoe buying guide</a>
can help you find the perfect fit. You might also want to read about
<a href="/guides/injury-prevention">common running injuries</a> and
how to avoid them.
</p>
</article>Image SEO
Optimize images for better search visibility:
image-seo.html
<!-- ✅ GOOD: Descriptive filename, alt text, title -->
<img src="nike-pegasus-40-running-shoe-blue.jpg"
alt="Nike Pegasus 40 running shoe in blue colorway"
title="Nike Pegasus 40 - Best for Daily Training"
width="800"
height="600">
<!-- ✅ GOOD: Figure with caption -->
<figure>
<img src="marathon-training-schedule.jpg"
alt="16-week marathon training schedule chart">
<figcaption>
A complete 16-week training plan for first-time marathoners
</figcaption>
</figure>
<!-- ❌ BAD: Generic filename and missing alt -->
<img src="IMG_1234.jpg">
<!-- ❌ BAD: Keyword stuffing in alt text -->
<img src="shoe.jpg"
alt="running shoes best running shoes cheap running shoes buy running shoes online running shoes sale">Image Optimization Tips
- Use descriptive, keyword-rich filenames
- Always include meaningful alt text
- Compress images for faster loading
- Use modern formats (WebP) with fallbacks
- Specify width and height attributes
- Use responsive images with srcset
- Consider lazy loading for below-fold images
Links and Navigation
links-seo.html
<!-- ✅ GOOD: Descriptive link text -->
<nav>
<a href="/products/running-shoes">Running Shoes</a>
<a href="/guides/training-plans">Training Plans</a>
<a href="/blog">Running Tips & Articles</a>
</nav>
<!-- ✅ GOOD: External links with rel attribute -->
<p>
According to
<a href="https://example.com/study"
rel="nofollow"
target="_blank">
this research study
</a>, interval training improves performance.
</p>
<!-- ✅ GOOD: Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/products/shoes">Shoes</a></li>
<li>Nike Pegasus 40</li>
</ol>
</nav>
<!-- ❌ BAD: JavaScript-only links (can't be crawled) -->
<div onclick="goToPage('/products')">Products</div>
<!-- ✅ GOOD: Progressive enhancement -->
<a href="/products" onclick="navigate(event)">Products</a>Important Link Attributes
rel="nofollow"- Don't pass link equity (for untrusted content, paid links)rel="sponsored"- Identify paid or sponsored linksrel="ugc"- User-generated content linksrel="noopener"- Security for target="_blank" links
Mobile Optimization
Google uses mobile-first indexing, so mobile optimization is critical:
mobile-seo.html
<head>
<!-- ✅ REQUIRED: Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ✅ GOOD: Responsive images -->
<link rel="preload" as="image"
href="hero-small.jpg"
media="(max-width: 768px)">
<link rel="preload" as="image"
href="hero-large.jpg"
media="(min-width: 769px)">
</head>
<body>
<!-- ✅ GOOD: Responsive image with srcset -->
<img src="product-medium.jpg"
srcset="product-small.jpg 400w,
product-medium.jpg 800w,
product-large.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Product image">
</body>Page Speed and Performance
Page speed is a ranking factor. Optimize for fast loading:
performance-seo.html
<head>
<!-- ✅ GOOD: Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- ✅ GOOD: Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<!-- ✅ GOOD: Defer non-critical CSS -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="print.css" media="print">
<!-- ✅ GOOD: Async/defer scripts -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>
</head>
<body>
<!-- Content -->
<!-- ✅ GOOD: Lazy load below-fold images -->
<img src="placeholder.jpg"
data-src="actual-image.jpg"
loading="lazy"
alt="Description">
</body>Structured Data Preview
Structured data helps search engines understand your content better (covered in detail in next lesson):
structured-data-intro.html
<!-- ✅ GOOD: Article structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Complete Guide to Marathon Training",
"author": {
"@type": "Person",
"name": "John Doe"
},
"datePublished": "2024-10-15",
"image": "https://example.com/marathon-guide.jpg"
}
</script>Robots.txt and Sitemap
robots-sitemap.html
<!-- In your HTML: Link to sitemap -->
<head>
<link rel="sitemap" type="application/xml" href="/sitemap.xml">
</head>
<!-- robots.txt file (not HTML, but important) -->
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /private/
Sitemap: https://example.com/sitemap.xml
<!-- sitemap.xml (simplified example) -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2024-10-15</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/blog/marathon-training</loc>
<lastmod>2024-10-14</lastmod>
<priority>0.8</priority>
</url>
</urlset>Content Quality Matters Most
While technical SEO is important, content quality is paramount:
- Original content: Write unique, valuable content
- Comprehensive: Cover topics thoroughly
- Up-to-date: Keep information current
- Well-written: Use proper grammar and formatting
- User-focused: Write for humans, not search engines
- Engaging: Keep users on page with quality content
Things to Avoid
- Keyword stuffing: Unnaturally repeating keywords
- Hidden text: White text on white background
- Cloaking: Showing different content to search engines
- Duplicate content: Copying content from other sites
- Link schemes: Buying links or participating in link farms
- Thin content: Pages with little valuable information
- Doorway pages: Pages created only for ranking
SEO Checklist
For Every Page:
- ✓ Unique, descriptive title tag (50-60 characters)
- ✓ Compelling meta description (150-160 characters)
- ✓ One H1 heading with primary keyword
- ✓ Logical heading hierarchy (H1, H2, H3)
- ✓ Descriptive, keyword-rich URL
- ✓ Alt text on all images
- ✓ Internal links with descriptive anchor text
- ✓ Mobile-responsive design
- ✓ Fast page load speed
- ✓ Semantic HTML elements
- ✓ Original, high-quality content
- ✓ Canonical tag if needed
Key Takeaways
- Title tags and meta descriptions are crucial for SEO
- Use proper heading hierarchy with H1-H6 tags
- Semantic HTML helps search engines understand content
- Create clean, descriptive URLs with keywords
- Optimize images with descriptive filenames and alt text
- Use descriptive anchor text for internal links
- Mobile optimization is critical for rankings
- Page speed affects both SEO and user experience
- Quality content is more important than technical tricks
- Avoid black hat SEO techniques that can get you penalized
What's Next?
Now that you understand SEO fundamentals, you can optimize your HTML for better search engine visibility. In the next lesson, we'll dive deeper into meta tags for SEO and learn about advanced meta tag strategies including Open Graph, Twitter Cards, and more.