HTML Coding Guidelines for SEO, Accessibility, Schema & WordPress

Sep 5, 2026

If you are building HTML pages that will later be converted into a WordPress theme, it is important to structure the HTML correctly from the beginning.

The goal should be:

Semantic HTML + Accessibility + SEO-friendly structure + Schema.org readiness + Clean WordPress conversion

Below are 33 recommended practices to follow when coding your HTML pages.

1. Overall HTML Structure

Start each page with valid HTML5, a language attribute, a proper <head>, and semantic <header>, <main>, and <footer> areas.

A basic structure should look like:

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

    <title>Page Title | Website Name</title>
    <meta name="description" content="Clear page description.">
    <link rel="canonical" href="https://example.com/page/">
</head>

<body>

    <header>
        <!-- Logo + navigation -->
    </header>

    <main>
        <!-- Main page content -->
    </main>

    <footer>
        <!-- Footer content -->
    </footer>

</body>
</html>

2. Use Semantic HTML5 Tags

Prefer semantic HTML elements where they accurately describe the content.

Common semantic elements include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>

Instead of making everything a <div>, use the appropriate semantic element whenever possible.

Avoid

<div class="header">
    ...
</div>

<div class="navigation">
    ...
</div>

<div class="content">
    ...
</div>

<div class="footer">
    ...
</div>

Prefer

<header>
    ...
</header>

<nav>
    ...
</nav>

<main>
    ...
</main>

<footer>
    ...
</footer>

3. Header Structure

Use <header> for site branding and introductory content.

Use a real <a> element for the logo link and <nav> for navigation.

<header class="site-header">

    <div class="container">

        <a href="/" class="site-logo">
            <img
                src="images/logo.png"
                alt="Company Name"
                width="180"
                height="60">
        </a>

        <nav
            class="main-navigation"
            aria-label="Main navigation">

            <ul>
                <li>
                    <a href="/">Home</a>
                </li>

                <li>
                    <a href="/about/">About</a>
                </li>

                <li>
                    <a href="/services/">Services</a>
                </li>

                <li>
                    <a href="/contact/">Contact</a>
                </li>
            </ul>

        </nav>

    </div>

</header>

Avoid

<div class="logo">
    <img src="logo.png">
</div>

<div class="menu">
    <div onclick="location.href='about.html'">
        About
    </div>
</div>

Use actual <a> links rather than clickable <div> elements.

4. Main Content

Use one primary <main> element for the page’s main content.

<main>

    <section class="hero">

        <div class="container">

            <h1>Professional Web Development Services</h1>

            <p>
                We create fast and scalable websites for businesses.
            </p>

            <a href="/contact/" class="btn">
                Get Started
            </a>

        </div>

    </section>

    <section class="services">

        <div class="container">

            <h2>Our Services</h2>

            <!-- Service content -->

        </div>

    </section>

</main>

Avoid

<div id="main">
    ...
</div>

when <main> is appropriate.

5. Maintain a Proper Heading Hierarchy

Maintain a logical:

H1 → H2 → H3

structure.

For example:

<h1>Digital Marketing Services</h1>

<h2>Our Services</h2>

<h3>SEO</h3>

<h3>Social Media Marketing</h3>

<h3>Google Ads</h3>

<h2>Why Choose Us</h2>

<h3>Experienced Team</h3>

<h3>Transparent Pricing</h3>

Do not choose heading levels merely because you want a particular font size. Use CSS to control visual appearance.

Avoid

<h1>Digital Marketing Services</h1>

<h4>Our Services</h4>

<h2>SEO</h2>

<h6>Google Ads</h6>

6. Use a Clear Primary H1

For normal pages, use one clear primary H1 that describes the page.

<h1>Web Development Services</h1>

Avoid having multiple unrelated H1 headings simply because you want several large headings.

Use CSS when you need to make other headings visually large.

7. Use Sections Correctly

Use <section> for meaningful thematic sections.

<section class="about">

    <h2>About Our Company</h2>

    <p>
        Company information goes here.
    </p>

</section>

<section class="services">

    <h2>Our Services</h2>

    <p>
        Service information goes here.
    </p>

</section>

Avoid using <section> only as an arbitrary styling wrapper.

8. Use Articles for Independent Content

Use <article> for content that can stand on its own.

Examples include:

Blog posts
News articles
Individual posts
Self-contained content cards

Example:

<article class="blog-card">

    <figure>

        <img
            src="images/blog.jpg"
            alt="WordPress development"
            width="800"
            height="500">

    </figure>

    <div class="blog-content">

        <h2>
            <a href="/blog/wordpress-development/">
                How to Build a WordPress Website
            </a>
        </h2>

        <p>
            Learn the basic steps involved in creating a WordPress website.
        </p>

    </div>

</article>

9. Use Images Correctly

Informative images should have meaningful alt text.

<img
    src="images/team.jpg"
    alt="Web development team working in office"
    width="800"
    height="600">

For decorative images:

<img
    src="images/shape.svg"
    alt=""
    aria-hidden="true">

Where practical, specify image dimensions:

width="800"
height="600"

This can help reduce layout shifting.

10. Write Useful Alt Text

Alt text should describe the actual image.

Good

<img
    src="web-development.jpg"
    alt="Web developer working on a website">

Bad

<img
    src="web-development.jpg"
    alt="best web development company web development services website development company">

Do not use alt text as a place for keyword stuffing.

11. Use Descriptive Links

Link text should tell users where the link goes.

Good

<a href="/wordpress-development/">
    WordPress Development Services
</a>

Avoid

<a href="/wordpress-development/">
    Click Here
</a>

Also avoid using JavaScript and clickable <div> elements instead of normal links.

12. Use Buttons and Links Correctly

Use <a> for navigation:

<a href="/contact/">
    Contact Us
</a>

Use <button> for actions:

<button type="submit">
    Submit
</button>

For opening a modal:

<button type="button">
    View Details
</button>

A navigation link and a UI action are not the same thing.

13. Build Accessible Forms

Associate form inputs with proper <label> elements.

<form>

    <div class="form-group">

        <label for="name">
            Name
        </label>

        <input
            type="text"
            id="name"
            name="name"
            autocomplete="name"
            required>

    </div>

    <div class="form-group">

        <label for="email">
            Email Address
        </label>

        <input
            type="email"
            id="email"
            name="email"
            autocomplete="email"
            required>

    </div>

    <button type="submit">
        Submit
    </button>

</form>

Do not rely on placeholder text as a replacement for labels.

Use <nav> for navigation areas.

<nav aria-label="Main navigation">
    ...
</nav>

If there are multiple navigation areas, give them useful accessible labels.

For example:

<nav aria-label="Main navigation">
    ...
</nav>

<nav aria-label="Footer navigation">
    ...
</nav>

15. Use Lists for Lists

If content is actually a list, use <ul> or <ol>.

Unordered list

<ul>
    <li>Web Development</li>
    <li>SEO</li>
    <li>Digital Marketing</li>
</ul>

Ordered list

<ol>
    <li>Choose a plan</li>
    <li>Submit your requirements</li>
    <li>Start development</li>
</ol>

Avoid simulating lists with repeated <div> elements.

16. Use Tables for Tabular Data

Use <table> when presenting actual tabular information.

<table>

    <caption>Pricing Plans</caption>

    <thead>
        <tr>
            <th scope="col">Plan</th>
            <th scope="col">Price</th>
            <th scope="col">Users</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Basic</td>
            <td>₹999</td>
            <td>5</td>
        </tr>
    </tbody>

</table>

Do not use tables for page layout.

17. Use Strong and Emphasis Semantically

Use <strong> when something is important:

<strong>Important:</strong> Please submit the form.

Use <em> when something needs emphasis:

<em>Limited time offer.</em>

If the purpose is purely visual styling, use CSS instead.

18. Do Not Use `<br>` for Layout

Avoid using repeated <br> elements to create spacing or control page layout.

Avoid

<h1>
    Web Development<br>
    Services
</h1>

when the line break is only for visual presentation.

Use CSS instead:

.hero-title {
    max-width: 700px;
}

Use <br> when an actual content line break is meaningful.

19. Avoid Excessive Inline CSS

Avoid putting large amounts of CSS directly into HTML.

Avoid

<div style="color:red; margin-top:20px;">

Prefer

<div class="alert">

and:

.alert {
    color: red;
    margin-top: 20px;
}

This will make your eventual WordPress theme easier to maintain.

20. Avoid Excessive `<div>` Nesting

Avoid unnecessary HTML layers such as:

<div>
    <div>
        <div>
            <div>
                <div>
                    <h2>Services</h2>
                </div>
            </div>
        </div>
    </div>
</div>

Use only the wrappers needed for:

Layout
Components
Styling
Actual semantic structure

For example:

<section class="services">

    <div class="container">

        <h2>Our Services</h2>

        <div class="services-grid">
            ...
        </div>

    </div>

</section>

21. Always Use the `lang` Attribute

Always declare the document language.

<html lang="en">

For Bengali:

<html lang="bn">

For Hindi:

<html lang="hi">

Use the correct language for the page.

22. Use a Proper Canonical URL

Indexable pages should generally have an appropriate canonical URL.

<link
    rel="canonical"
    href="https://example.com/about/">

Do not hard-code the same canonical URL on every page.

When converting the HTML into WordPress, canonical URLs should ideally be generated dynamically or managed through your SEO setup.

23. Use Schema.org JSON-LD

Schema markup helps search engines understand what your page and its content represent.

For example:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "ABC Company",
    "url": "https://example.com/"
}
</script>

For a modern website, JSON-LD is generally the cleanest approach.

Possible Schema types include:

Organization
LocalBusiness
WebSite
WebPage
Service
Product
Article
BlogPosting
BreadcrumbList
Event
Course
Recipe

Do not add every Schema type to every page. Use structured data that accurately represents the actual page.

When converting to WordPress, values such as company name, URL, logo, author, dates, product prices, availability, etc. should be generated dynamically where appropriate.

24. Structure Breadcrumbs Properly

If your website has breadcrumbs, use navigation markup.

<nav aria-label="Breadcrumb">

    <ol class="breadcrumbs">

        <li>
            <a href="/">Home</a>
        </li>

        <li>
            <a href="/services/">Services</a>
        </li>

        <li aria-current="page">
            Web Development
        </li>

    </ol>

</nav>

You can later generate corresponding BreadcrumbList Schema in WordPress.

25. Structure Blog / Article Pages Properly

A blog post can use:

<main>

    <article class="single-post">

        <header class="post-header">

            <h1>How to Build a WordPress Website</h1>

            <p>
                Published on
                <time datetime="2026-09-03">
                    September 3, 2026
                </time>
            </p>

        </header>

        <figure>

            <img
                src="images/wordpress.jpg"
                alt="WordPress website development"
                width="1200"
                height="675">

        </figure>

        <div class="post-content">

            <p>...</p>

            <h2>Getting Started</h2>

            <p>...</p>

            <h2>Choosing a Theme</h2>

            <p>...</p>

        </div>

    </article>

</main>

This structure is also well suited for conversion into WordPress’s single.php template.

26. Use the `<time>` Element

Use <time> for dates and times.

<time datetime="2026-09-03">
    September 3, 2026
</time>

For date and time:

<time datetime="2026-09-03T18:30">
    September 3, 2026 at 6:30 PM
</time>

This is useful for:

Blog publication dates
Event dates
Updated dates
Appointment/event times

27. Structure Hero Sections Properly

A hero section should contain meaningful content rather than just visual elements.

<section class="hero">

    <div class="container">

        <div class="hero-content">

            <p class="eyebrow">
                Professional Web Solutions
            </p>

            <h1>
                Build a Better Website for Your Business
            </h1>

            <p>
                We design and develop fast, modern websites.
            </p>

            <div class="hero-actions">

                <a href="/contact/" class="btn">
                    Get Started
                </a>

                <a href="/services/" class="btn btn-secondary">
                    Explore Services
                </a>

            </div>

        </div>

    </div>

</section>

Keep visual styling separate from the semantic HTML structure.

Use <footer> for site-wide footer content.

<footer class="site-footer">

    <div class="container">

        <div class="footer-column">

            <h2>Company</h2>

            <ul>
                <li>
                    <a href="/about/">About Us</a>
                </li>
                <li>
                    <a href="/services/">Services</a>
                </li>
                <li>
                    <a href="/contact/">Contact</a>
                </li>
            </ul>

        </div>

        <div class="footer-column">

            <h2>Contact</h2>

            <address>
                ABC Technologies<br>
                Kolkata, West Bengal, India
            </address>

        </div>

    </div>

</footer>

Use <address> when providing genuine contact information.

29. Build Accessible Mobile Menus

Do not create a mobile menu button using a clickable <div>.

Avoid

<div onclick="toggleMenu()">
    ☰
</div>

Prefer

<button
    type="button"
    class="menu-toggle"
    aria-label="Open menu"
    aria-expanded="false"
    aria-controls="main-menu">

    <span aria-hidden="true">☰</span>

</button>

JavaScript can update aria-expanded when the menu opens and closes.

Do not create content specifically for search engines and hide it from users.

Avoid using hidden content such as:

.hidden-seo-content {
    display: none;
}

when the purpose is to manipulate search engine rankings.

Your structured data should also describe genuine page content.

31. Avoid Keyword Stuffing

Do not repeat keywords unnaturally in:

H1/H2 headings
Paragraphs
Links
Image alt text
Meta descriptions
Schema
URLs

Bad

<h1>
    Best Web Development Company in Kolkata - Best Website Development
    Company Kolkata - Web Developer Kolkata
</h1>

Better

<h1>
    Web Development Services in Kolkata
</h1>

Write useful content for visitors first.

32. Keep Schema Data Accurate

Never invent structured data.

For example, do not add fake ratings:

"aggregateRating": {
    "ratingValue": "5",
    "reviewCount": "500"
}

unless the ratings and reviews actually exist and meet the applicable structured-data requirements.

Likewise, Schema should not contain incorrect:

Prices
Product availability
Reviews
Ratings
Business information
Dates
Authors

Schema should describe the real page, not manipulate search engines.

33. Prepare the HTML for WordPress Conversion

Since your workflow is:

HTML → WordPress Theme

build your HTML in modular components.

A good HTML structure might be:

HTML
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── Hero
│   ├── Content Sections
│   ├── Services
│   ├── Testimonials
│   ├── FAQ
│   └── CTA
│
└── Footer

This can later map naturally to a WordPress theme:

WordPress Theme
│
├── header.php
├── footer.php
├── front-page.php
├── page.php
├── single.php
├── archive.php
├── 404.php
│
├── template-parts/
│   ├── hero.php
│   ├── services.php
│   ├── testimonials.php
│   └── faq.php
│
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
│
└── functions.php

Avoid hard-coding values that will later need to come from WordPress.

Values such as these should eventually become dynamic:

Page title
Meta description
Canonical URL
Logo
Images
Author
Publication date
Modified date
Product price
Product availability
Business information
Schema data

Quick Avoid Checklist

Before converting your HTML into WordPress, check that you are not doing any of the following:

Excessive generic <div> nesting
Fake buttons made from <div> or inappropriate links
Tables used for page layout
Informative images without alt attributes
Keyword-stuffed alt text
Keyword-stuffed headings
Random or incorrect heading hierarchy
Repeated <br> tags for layout
Large amounts of inline CSS
Large amounts of inline JavaScript
Hidden SEO content
Fake reviews or ratings
Fake Schema information
Incorrect canonical URLs
Same canonical URL on every page
Schema that does not match visible page content
Missing <title>
Missing meta description
Missing lang attribute
Navigation implemented with clickable <div> elements
Forms without proper labels

Recommended HTML Development Workflow

For your HTML → WordPress workflow, follow this order:

1. Valid HTML5
       ↓
2. Semantic HTML
       ↓
3. Correct heading hierarchy
       ↓
4. Accessible navigation/forms/buttons
       ↓
5. Proper image alt text + dimensions
       ↓
6. Descriptive links
       ↓
7. Title + meta description + canonical
       ↓
8. Open Graph metadata
       ↓
9. Appropriate JSON-LD Schema
       ↓
10. Validate HTML
       ↓
11. Test accessibility
       ↓
12. Test Schema
       ↓
13. Convert to WordPress dynamically

Final Principle

Build clean, semantic, accessible HTML first. Add appropriate JSON-LD structured data second.

Schema compliance does not mean adding Schema attributes to every HTML element. The important thing is that your structured data accurately represents the actual content of the page.

When the HTML is later converted into WordPress, make the appropriate content and Schema values dynamic rather than hard-coding them into the theme.

HTML Coding Guidelines for SEO, Accessibility, Schema & WordPress

1. Overall HTML Structure

2. Use Semantic HTML5 Tags

Avoid

Prefer

3. Header Structure

Avoid

4. Main Content

Avoid

5. Maintain a Proper Heading Hierarchy

Avoid

6. Use a Clear Primary H1

7. Use Sections Correctly

8. Use Articles for Independent Content

9. Use Images Correctly

10. Write Useful Alt Text

Good

Bad

11. Use Descriptive Links

Good

Avoid

12. Use Buttons and Links Correctly

13. Build Accessible Forms

14. Structure Navigation Properly

15. Use Lists for Lists

Unordered list

Ordered list

16. Use Tables for Tabular Data

17. Use Strong and Emphasis Semantically

18. Do Not Use <br> for Layout

Avoid

19. Avoid Excessive Inline CSS

Avoid

Prefer

20. Avoid Excessive <div> Nesting

21. Always Use the lang Attribute

22. Use a Proper Canonical URL

23. Use Schema.org JSON-LD

24. Structure Breadcrumbs Properly

25. Structure Blog / Article Pages Properly

26. Use the <time> Element

27. Structure Hero Sections Properly

28. Structure the Footer Properly

29. Build Accessible Mobile Menus

Avoid

Prefer

30. Do Not Hide Important SEO Content

31. Avoid Keyword Stuffing

Bad

Better

32. Keep Schema Data Accurate

33. Prepare the HTML for WordPress Conversion

Quick Avoid Checklist

Recommended HTML Development Workflow

Final Principle

18. Do Not Use `<br>` for Layout

20. Avoid Excessive `<div>` Nesting

21. Always Use the `lang` Attribute

26. Use the `<time>` Element