Page title

` | Landmark navigation lands on the first | Fix when touched | | Obsolete attributes, `type` on scripts and styles, trailing slashes | Nothing | Ignore | | Unknown attributes from frameworks | Nothing | Ignore | ### 2. Fix the document-level errors The first three lines of every page decide the rendering mode and the encoding. In your base template (`header.php`, `theme.liquid`, a layout component): ```html Page title ``` Keep the `lang` value accurate, since screen readers pick their pronunciation from it ([language attributes and screen readers](https://getreport.app/guides/language-attributes-and-screen-readers)), and never add `user-scalable=no` or `maximum-scale=1` to the viewport tag ([why pinch zoom must stay on](https://getreport.app/guides/zoom-and-viewport-never-disable-pinch-zoom)). `` goes first because the browser must know the encoding before it reads any text, including the title. If your server already sends `Content-Type: text/html; charset=utf-8`, the meta tag is a belt to those braces. A byte-order mark at the very start of a file overrides both declarations. The most common cause of garbled letters is simpler: a template or a database table saved in one encoding (Windows-1250, Latin-1) and declared as another. Save templates as UTF-8. To see which mode the browser chose, type `document.compatMode` in the DevTools console: `"CSS1Compat"` is standards mode, `"BackCompat"` is quirks mode. The [MDN page on quirks mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) lists what changes. ### 3. Keep the head clean Only ``, `<meta>`, `<link>`, `<script>`, `<style>`, `<base>`, `<noscript>` and `<template>` belong in `<head>`. The usual intruders are tracking snippets: the `<noscript><iframe>` part of the Tag Manager snippet belongs right after `<body>`, not in the head, and a pixel's `<img>` fallback likewise. Plugins that print a `<div>` from a `wp_head` hook do the same damage. After a fix, the validator should no longer report "Element … not allowed as child of element head" and the Elements panel in DevTools should show your canonical and Open Graph tags inside `<head>`. ### 4. Fix duplicate ids Search the validator output for "Duplicate ID". The usual sources are a component rendered twice (a search form in the header and again in the mobile menu, both with `id="search"`), copy-pasted blocks and sliders that clone slides. Make each id unique or remove ids nothing references: ```html  <label for="email">Email</label><input id="email" type="email">  <label for="email">Email</label><input id="email" type="email">  <label for="contact-email">Email</label><input id="contact-email" type="email"> <label for="newsletter-email">Email</label><input id="newsletter-email" type="email"> ``` This matters more for accessibility than for anything else: a screen reader announces the second field without its label. ### 5. Fix structure that moves content "Stray end tag `div`" or "End tag `div` seen, but there were open elements" usually means one template opens a wrapper and another closes it, often across an `if` branch. Match every opening tag with its closing tag in the same file and the same branch: ```html  {% if sidebar %}<div class="with-sidebar">{% endif %} … </div>  {% if sidebar %}<div class="with-sidebar">{% else %}<div>{% endif %} … </div> ``` Lists take only `<li>` children (plus `<script>` and `<template>`); wrap extra markup inside the `<li>`. Tables need their content inside `<td>` or `<th>`. A `<p>` cannot contain `<div>`, `<ul>`, headings or another `<p>`; use a `<div>` as the outer element instead. ### 6. Leave the noise alone These errors and warnings change nothing a visitor or a crawler can notice: - `type="text/javascript"` and `type="text/css"` (unnecessary, harmless). - Trailing slashes on void elements, `<br />` and `<img … />`. - Obsolete presentational attributes such as `border="0"` or `align="center"`: move them to CSS when you touch the template, not before. - Framework attributes such as `v-if`, `@click`, `x-data` or `ng-…`, and hyphenated custom elements. (`data-…` attributes are valid already.) - A `<div>` inside an `<a>`: valid since HTML5, as long as the link contains nothing interactive and its parent allows the `<div>`. ### 7. Validate in CI For a static or server-rendered site, run the Nu checker on the built HTML so structural errors do not come back: ```bash # Once: the checker as a dev dependency (needs Java 11+) npm install --save-dev vnu-jar # In CI, after the build: errors only, HTML files only java -jar node_modules/vnu-jar/build/dist/vnu.jar --errors-only --skip-non-html dist/ ``` It exits with a non-zero status when it finds errors. Start with the templates that matter most and add the rest once they are clean. ## Platform notes ### WordPress The classic editor and older themes run content through `wpautop`, which wraps lines in `<p>`. A shortcode that outputs a `<div>` then ends up inside a paragraph, producing a stray `</p>` and an empty paragraph. Shortcode authors fix it by returning block markup without surrounding line breaks; site owners can put the shortcode in its own Shortcode block in the block editor. Page builders produce deeply nested but mostly valid markup; that is a [DOM size](https://getreport.app/learn/dom-size) problem, not a validation one. Duplicate ids are common with header and mobile-menu widgets that print the same form twice. ### Shopify Liquid conditionals that open a tag in one branch and close it outside the branch are the main source of misnesting. Sections and app blocks that each print their own `<style>` or `<link>` inside the body are allowed and not worth fixing. ### Sites built with JavaScript When a framework builds the page in the browser, the source the validator fetches may be an almost empty shell. Validate the rendered DOM as well: in the console, run `copy('<!doctype html>\n' + document.documentElement.outerHTML)` and paste the result into the validator's text input. `outerHTML` does not include the doctype, which is why the snippet adds it. ## Verify - The validator lists no errors from the "fix now" rows of the triage table on your main templates. - The report's doctype and charset findings read "Doctype is present" and "Character encoding is declared early". - In DevTools, the Elements panel shows every `<meta>` and `<link>` inside `<head>`, and `document.compatMode` returns `"CSS1Compat"`. ## Common mistakes - **Chasing zero errors.** A day spent removing `type` attributes changes nothing. Fix the rows that change the document and stop. - **Validating the source when JavaScript rewrites the page.** The validator sees the shell, not what visitors get. Validate the rendered DOM too. - **Fixing framework noise.** Removing `v-if` or `x-data` to please the validator breaks the page. Leave them. - **Ignoring duplicate ids.** They look harmless in the list and quietly break labels and ARIA references. Search for them first. - **Moving the charset below other tags.** A plugin that inserts a long comment or script before `<meta charset>` can push it past the first 1,024 bytes. Keep it the first element in `<head>`.