HTML5 Fill in the Gaps (Semantics / SEO)

Semantic Tags

Main advantages of semantic tags:

Even if CSS fails to load, the page still presents a clear structure.
Helps SEO by allowing crawlers to extract more useful information.
Improves accessibility, making it easier for other devices (e.g., screen readers) to render the page.
Convenient for team development and maintenance.

What are the semantic tags?

Most commonly used: header / nav / main / footer / section / article / aside

The easiest to get wrong, and also the most important: h1 ~ h6. Screen reader users can jump between page sections quickly using headings, much like a table of contents. If the hierarchy is broken (e.g., h1 → straight to h3), the content in between gets skipped, and users won't even know it exists.

Secondary:

figure + figcaption: Image + caption
details + summary: Expandable/collapsible details
mark: Highlighted text
time: Date/time
address: Contact information

blockquote: Block-level quotation

<figure>
  <img src="photo.jpg" alt="Sunrise selfie">
  <figcaption>Taken on the balcony this morning, the light was so good.</figcaption>
</figure>

<details>
  <summary>View details</summary>
  <p>This is the hidden content.</p>
</details>

<p>She said <mark>absolutely not</mark>, but I didn't listen to her.</p>

SEO (Search Engine Optimization)

Metadata

Optimize the page's title / description / keywords (TDK).

title: Put the brand name first, make it unique per page.

description: The ad copy for your site; must include keywords and be engaging.

keywords: Gradually less important, but it doesn’t hurt to include them.

<head>
	<title>My Website</title>
	<meta name="description" content="Laobai's personal website, documenting tech, thoughts, and life." />
	<meta name="keywords" content="Laobai, tech blog, personal website, life journal" />
</head>

Content Strategy

This is the most important long-term factor. High-quality original content outweighs any technical trick.

Technical SEO

Provide robots.txt: tells crawlers which pages they can or cannot crawl. Often used to hide admin or low‑value pages, and to point crawlers to the sitemap path.

Provide sitemap.xml: shows search engines your site map, ensuring all pages are discovered.

Optimize Core Web Vitals: Google uses site performance as a ranking signal. There are three metrics: LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift)

Structure & Standards

Use semantic tags to help crawlers understand the page and keep the document structure clear.

Add alt text to non‑decorative images: it's more standard and improves keyword density. Especially for product‑oriented sites with many images but little text, crawlers have no idea what the images are about.

Follow W3C standards: correct nesting, closed attributes, consistent tag casing.

Link Strategy

External links: High‑quality external links are one of Google's most important ranking signals.

Reciprocal links: Sites swap links to help pass authority.

Internal links: Link pages within your site to form a topological structure, allowing crawlers to go deeper.

Submit your site: Submit your site to major search engines. After generating /sitemap.xml, submit it once, and search engines will crawl periodically.