Senior Tips and Tricks

A grab-bag of hard-won habits that separate solid HTML from sloppy HTML.

You've covered a lot of ground. Let me hand you the habits I wish someone had told me early — small things with outsized impact.

Validate and lint

Run your markup through the W3C validator now and then. Invalid HTML mostly renders anyway thanks to lenient browsers, but it hides real bugs and breaks assistive tech in ways you won't notice.

Structure and meaning

One <h1> per page; never skip heading levels for looks.
Always set lang on <html> and charset as the first meta.
Prefer <button> for actions and <a> for navigation — don't blur the two.

Performance freebies

Add loading="lazy" to below-the-fold images so they fetch only when needed.
Set width and height (or an aspect ratio) on images to stop layout from jumping as they load.
Add rel="noopener" to any target="_blank" link to close a security and performance hole.

Forms and mobile

Always pair a <label> with each control.
Set autocomplete and the right type so mobile keyboards and autofill just work.

Write HTML as if the next person to read it is a tired teammate at 2am — because eventually it's you.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer audits markup using the W3C validator to catch missing alt attributes and improperly nested elements before deployment.
A front-end team adopts a coding convention of always using semantic elements and BEM class names for maintainable HTML.
A performance engineer removes inline event handlers and replaces them with external event listeners to keep HTML clean and cacheable.

More examples

Semantic over generic elements

Native semantic elements bring built-in keyboard access, ARIA roles, and browser-default behaviors for free.

<!-- Avoid: non-semantic clickable div -->
<!-- <div class="btn" onclick="submit()">Submit</div> -->

<!-- Prefer: native semantic element -->
<button type="submit" form="my-form">Submit</button>

<!-- Avoid: span for emphasis -->
<!-- <span class="bold">Warning</span> -->

<!-- Prefer: meaningful tag -->
<strong>Warning</strong>

Consistent indentation and attribute order

A consistent attribute order makes HTML easier to scan in code review and helps diff tools highlight changes.

<!-- Recommended attribute order: id, class, type, name, src/href, alt, aria-* -->
<img
  id="hero-img"
  class="hero__image"
  src="/img/hero.webp"
  alt="Developer at work"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
>

Validate and lint HTML with a config

An HTMLHint config file enforces best practices on every save, catching missing alt text and duplicate IDs early.

{
  "extends": ["htmlhint:recommended"],
  "rules": {
    "doctype-first": true,
    "title-require": true,
    "alt-require": true,
    "id-unique": true,
    "tag-pair": true,
    "attr-lowercase": true,
    "attr-value-double-quotes": true
  }
}

Discussion

Be the first to comment on this lesson.