Day 9: HTML Best Practices

What You'll Learn Today

Metadata in <head>
SEO fundamentals
Open Graph Protocol (OGP)
Performance optimization
HTML coding best practices

Metadata in `<head>`

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title | Site Name</title>
    <meta name="description" content="A concise description of this page, about 150 characters.">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

flowchart TB
    subgraph Head["Key Elements in &lt;head&gt;"]
        Meta["meta charset<br>Character encoding"]
        VP["meta viewport<br>Responsive design"]
        Title["title<br>Page title"]
        Desc["meta description<br>Page description"]
        Link["link<br>CSS, Favicon"]
    end
    style Meta fill:#ef4444,color:#fff
    style VP fill:#f59e0b,color:#fff
    style Title fill:#22c55e,color:#fff
    style Desc fill:#3b82f6,color:#fff
    style Link fill:#8b5cf6,color:#fff

SEO Fundamentals

Title Tag

<!-- ✅ Good -->
<title>Learn HTML Basics | Beginner Tutorial - My Site</title>

<!-- ❌ Bad -->
<title>My Site</title>

Principle	Description
Length	30–60 characters
Keywords	Important keywords first
Unique	Different title per page
Structure	`Content

Heading Hierarchy

<h1>HTML Tutorial</h1>
  <h2>Basic Structure</h2>
    <h3>DOCTYPE</h3>
    <h3>html Element</h3>
  <h2>Text Elements</h2>

Structured Data (JSON-LD)

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Learn HTML Basics",
    "author": {
        "@type": "Person",
        "name": "John Doe"
    },
    "datePublished": "2026-01-29"
}
</script>

Open Graph Protocol (OGP)

Controls how your page appears when shared on social media.

<meta property="og:title" content="Learn HTML Basics">
<meta property="og:description" content="A complete beginner's guide to HTML">
<meta property="og:image" content="https://example.com/images/og-html.jpg">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Tech Blog">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn HTML Basics">
<meta name="twitter:description" content="A complete beginner's guide to HTML">
<meta name="twitter:image" content="https://example.com/images/og-html.jpg">

Performance Optimization

Resource Loading

<link rel="stylesheet" href="styles.css">

<script src="app.js" defer></script>
<script src="analytics.js" async></script>

<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">

Technique	Description
`defer`	Execute script after HTML parsing
`async`	Execute script when download completes
`preload`	Load important resources early
`dns-prefetch`	Resolve DNS early
`preconnect`	Establish connection early

flowchart LR
    subgraph Scripts["Script Loading Strategies"]
        Normal["Normal<br>Block → Load → Execute"]
        Defer["defer<br>Parallel load → Execute after parse"]
        Async["async<br>Parallel load → Execute immediately"]
    end
    style Normal fill:#ef4444,color:#fff
    style Defer fill:#22c55e,color:#fff
    style Async fill:#f59e0b,color:#fff

Image Optimization

<img src="photo.jpg" alt="Photo" loading="lazy">
<img src="photo.jpg" alt="Photo" width="800" height="600">

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="Photo">
</picture>

HTML Coding Best Practices

1. Write Valid HTML

<!-- ✅ Good -->
<p>Text <strong>important</strong> text</p>

<!-- ❌ Bad -->
<p>Text <strong>important</p></strong>

2. Consistent Indentation

<!-- ✅ Good -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

3. Quote Attribute Values

<!-- ✅ Good -->
<a href="page.html" class="link">Link</a>

<!-- ❌ Bad -->
<a href=page.html class=link>Link</a>

4. Avoid Unnecessary Elements

<!-- ✅ Good -->
<img src="logo.png" alt="Logo">

<!-- ❌ Bad (unnecessary divs) -->
<div><div><img src="logo.png" alt="Logo"></div></div>

5. Use Comments Wisely

<!-- Header -->
<header>...</header>

<!-- Main Content -->
<main>...</main>

Complete `<head>` Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Page Title | Site Name</title>
    <meta name="description" content="Page description (~150 chars)">

    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Page description">
    <meta property="og:image" content="https://example.com/og-image.jpg">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary_large_image">

    <link rel="icon" href="/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="styles.css">

    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "Page Title"
    }
    </script>
</head>

Summary

Concept	Description
Metadata	Info in `<head>` (title, description, OGP)
SEO	Making HTML search-engine friendly
OGP	Controlling social media share appearance
defer / async	Efficient script loading
preload / preconnect	Early resource loading
loading="lazy"	Deferred image loading

Key Takeaways

title and description are SEO fundamentals
OGP is essential for social media sharing
Use defer/async to optimize JavaScript loading
Develop a habit of writing valid HTML

Exercises

Exercise 1: Basic

Create a page with a complete <head> section (charset, viewport, title, description, favicon).

Exercise 2: Intermediate

Write OGP and Twitter Card meta tags for a blog article page.

Challenge

Create a page that passes the W3C Validator with zero errors, applying all SEO, OGP, and accessibility best practices.

References

Next up: In Day 10, you'll tackle the "Final Project"—building a portfolio site with everything you've learned!