HTML5 Techniques That Actually Matter for New York Business Sites (2026)

Most “HTML5 tips” lists you find online are recycled from 2013. They tell you to use <header> and <footer> and call it a day. That advice isn’t wrong, it’s just incomplete. The techniques below are the ones I actually reach for when building or fixing sites for businesses around here, and they’re the ones that move the needle on real metrics: load time, search visibility, and whether a visitor sticks around long enough to call you.

1. Semantic landmarks (and why they still beat div soup)

If your site is a wall of <div class="header"> and <div class="nav">, you’re making screen readers and search crawlers guess at your structure. Semantic elements tell them outright. This matters more now than it did five years ago because AI-powered search summaries lean heavily on clean document structure to figure out what a page is actually about.

<header>
 <nav aria-label="Main">
 <a href="/services/">Services</a>
 <a href="/contact/">Contact</a>
 </nav>
</header>

<main>
 <h1>Emergency Plumbing in Nassau County</h1>
 <article>
 <h2>What to do before we arrive</h2>
 <p>Shut off the main valve first...</p>
 </article>
</main>

<footer>
 <p>&copy; 2026 Your Business</p>
</footer>

One rule: one <h1> per page, and it should match the thing someone typed into Google. Don’t make your logo image the H1.

2. Responsive images with srcset and sizes

This is the single biggest easy win for most small business sites. You’re probably serving a 2400px hero image to a phone that only needs 800px. That’s wasted bandwidth on a cellular connection, and it’s the difference between a page that loads in 1.2 seconds and one that loads in 4.

<img
 src="hero-800.jpg"
 srcset="https://i0.wp.com/www.kennykey.com/hero-400.jpg 400w,
 https://i0.wp.com/www.kennykey.com/hero-800.jpg 800w,
 https://i0.wp.com/www.kennykey.com/hero-1600.jpg 1600w"
 sizes="(max-width: 600px) 100vw, 50vw"
 width="1600"
 height="900"
 alt="Technician repairing a boiler in a Commack basement"
 loading="lazy"
 decoding="async">

Keep the width and height attributes on there. They reserve space so the page doesn’t jump around while images load, which is a real Core Web Vitals metric (CLS). Don’t lazy-load your hero image, only the stuff below the fold.

3. Native form validation before you write any JavaScript

Half the contact forms I audit have a jQuery validation library doing work the browser has done natively for years. You don’t need it. HTML5 input types and constraint attributes handle most of it, they work on mobile with the right keyboard, and they degrade gracefully.

<form action="/submit" method="post">
 <label for="email">Email</label>
 <input
 type="email"
 id="email"
 name="email"
 required
 autocomplete="email"
 inputmode="email">

 <label for="phone">Phone</label>
 <input
 type="tel"
 id="phone"
 name="phone"
 pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
 placeholder="631-555-0100"
 autocomplete="tel">

 <button type="submit">Send</button>
</form>

The autocomplete attributes alone cut form abandonment noticeably because people don’t have to retype their email on a phone. Use type="tel" not type="number" for phone numbers, or you’ll get a numeric keypad with no way to type a dash or a plus sign.

4. dialog instead of a div-based modal

Building a modal from scratch means handling focus trapping, escape-to-close, and background scroll locking yourself, and most implementations get at least one of those wrong. The native <dialog> element does all of it. Browser support is solid across the board now.

<dialog id="contactModal">
 <form method="dialog">
 <h2>Request a callback</h2>
 <input type="tel" name="phone" required>
 <button value="cancel">Cancel</button>
 <button value="send">Send</button>
 </form>
</dialog>

<button id="openModal">Get a quote</button>

<script>
 const modal = document.getElementById('contactModal');
 document.getElementById('openModal')
 .addEventListener('click', () => modal.showModal());
</script>

showModal() handles the focus trap and the backdrop automatically. That’s a lot of accessibility code you don’t have to write or maintain.

5. Structured data in JSON-LD

This isn’t an HTML5 element, but it lives in your HTML and it’s the technique with the highest payoff for local businesses. It’s how you tell Google your hours, your service area, your phone number, and what you actually do, in a format it can parse without guessing.

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "LocalBusiness",
 "name": "Your Business Name",
 "telephone": "+1-631-555-0100",
 "address": {
 "@type": "PostalAddress",
 "streetAddress": "123 Main St",
 "addressLocality": "Commack",
 "addressRegion": "NY",
 "postalCode": "11725"
 },
 "areaServed": ["Suffolk County", "Nassau County"],
 "openingHours": "Mo-Fr 08:00-18:00"
}
</script>

Validate it with Google’s Rich Results Test before you ship it. A typo in the JSON breaks the whole block silently, and you won’t know unless you check.

What to do with this

You don’t need all five on day one. If your site is slow, start with responsive images. If you’re invisible in local search, start with structured data and semantic headings. If your forms are leaking leads, fix the forms. The rest can wait.

I do this kind of cleanup constantly for businesses across Suffolk and Nassau, and it’s usually a week of work, not a rebuild. If you want a sense of how I approach Long Island web design, that page covers the process end to end.

FAQ

Do I need to rewrite my whole site to use these?

No. Four of the five can be dropped into an existing site without touching your CMS templates much. Semantic structure is the only one that’s easier to fix during a redesign, and even then it’s often a template-level change, not a content rewrite.

Will any of this break older browsers?

Everything here has been supported in every major browser for years. The only thing worth a fallback is <dialog>, and even that has been safe since 2022. You can stop worrying about IE.

How much does this actually affect my Google rankings?

Directly? Modest. Indirectly? A lot. Faster pages, cleaner structure, and proper local business markup improve the things Google measures (Core Web Vitals, crawlability, local relevance) and the things visitors care about (whether the page loads before they give up). That combination is what moves rankings over time.