In this guide, you’ll learn a simple and practical way to highlight HTML landmarks on your WordPress site. This method helps you instantly visualize how your pages are structured and assess their accessibility. By using a small code snippet—without relying on heavy plugins or third-party tools—you can add coloured outlines around key landmarks such as header, nav, main, section, article, and aside. It’s a quick and effective way to diagnose layout and accessibility issues while previewing your site.
Why HTML landmarks matter
HTML landmarks are structural elements that help browsers, assistive technologies and keyboard users understand the layout of a page. Landmarks include header, nav, main, section, article and footer, among others. They play a key role in:
- screen reader navigation — users can jump between landmarks;
- keyboard navigation — users can tab or skip to main content quickly;
- semantic clarity — search engines and tools understand page regions better;
- developer debugging — you can check whether your page builder has added the correct tags.
Yet many themes and page builders hide these details, or they add them inconsistently. Some third‑party tools (for example, the free WAVE tool) can check headings and contrast, and they’ll identify major landmarks like header, main and footer — but they often miss article and aside landmarks or require you to submit a URL and wait. That’s where the LandMarker code snippet comes in: it highlights everything in your preview, on the fly, while you’re logged into WordPress.
What the LandMarker does
The LandMarker snippet adds border outlines and labels to every landmark on your page while you preview the site as an admin. Each landmark gets a different colour so you can instantly distinguish them:
- Pink — header and footer (same pink used for both to indicate container)
- Blue — nav elements (menu/navigation blocks)
- Yellow — main landmark (main content area)
- Purple — section landmarks
- Green — article landmarks (posts, standalone articles)
- Heading tags (H1/H2 etc.) are also highlighted and labelled
The snippet is intentionally small and runs only in the admin preview (when you’re logged in), so it won’t add any bloat to your front-end site or impact page speed for visitors.
How to install the LandMarker tool (step‑by‑step)
Installation is straightforward and requires no coding knowledge beyond copy/paste:
- Get the code snippet from the LandMarker resource (link available in the resource section or your developer notes).
- Install the free Code Snippets plugin from the WordPress repository if you don’t already have it.
- Create a new snippet, paste the code, save and activate it.
- Preview any page or post while logged in and click the admin bar button labelled landmarks — colourful outlines will appear around the landmarks on that page.
Once activated you can customise colours in the snippet CSS if you prefer different colour coding. The snippet uses the admin top bar to toggle the overlays, so you can switch them on and off while editing or previewing.
Real‑world examples and important behaviours
Understanding how page builders handle landmarks will help you avoid common pitfalls. Here are examples and behaviours to watch out for with Elementor and WordPress:
Elementor and automatic main landmark
Elementor (and some other modern page builders) often insert a main landmark automatically. That means:
- You may already have a yellow outline appear around your main content without doing anything.
- If you manually add another container and tag it as
main, the LandMarker will warn you about multiple main elements. - Only one main should exist per page — it helps assistive tech find the primary content reliably.
“multiple main elements”
If you see that warning, edit the offending container and change its HTML tag to section or leave it as a div, unless it truly is the page’s single main content area.
Pure WordPress pages (no page builder widgets)
Even a plain WordPress page can show a main landmark when the theme or templates provide it. When previewing a basic WP page with simple content you’ll often see the yellow main outline — again, supplied by the theme or header/footer templates — which is useful to confirm that your theme’s structure is accessible.
Single post templates, posts widgets and loop grids
There are two important caveats when working with posts, single post templates and loop grids:
- The LandMarker will highlight article elements when they exist, but some posts generated via loop grids or widgets may not get an article tag automatically.
- Loop grid items (for example, a posts widget showing several posts) may not be picked up by LandMarker as
articleelements. The snippet will show the article landmark where it exists, but looped items can bypass this and not be outlined as articles.
Because of this you should check your single post template to make sure that the container wrapping the post content is set correctly.
How to ensure a single post template has the right tags
In Elementor’s single post or single product templates, there are two places to check:
- Open the main container settings (the settings cog for the template) and set the HTML tag to
mainif the template is supposed to be the main content area. This ensures the yellow main outline appears. - For the inner post content container, go to Additional Options and set the HTML tag to
article. That tells assistive tech this block is an article and will be highlighted by LandMarker in green.
Example structure to check in your template:
- Template settings:
HTML tag = main - Post content container:
HTML tag = article - Related posts or other side blocks:
HTML tag = section(optional)
“should be inside main”
If LandMarker shows a message that an element “should be inside main”, follow that guidance — move your primary content container inside the main tag, or adjust tags so the hierarchy makes sense. The goal is that the primary article content sits within the single main landmark on the page.
Troubleshooting and best practices
When you run the LandMarker and inspect pages, here are common situations you might encounter and how to resolve them:
- Multiple mains: Remove the extra main tag. Convert child containers to
sectionordivunless they truly represent the primary content area. - No main found: Set the top-level template container to
main, or ensure your theme supplies a main landmark. - Article not highlighted: Set the post content block’s HTML tag to
article. If using loop grids, consider whether you need manual tagging for each loop item. - Aside not picked up: Manually tag sidebars or widgets as
asidein the Additional Options if they are supplementary to the main content.
Remember that you only see the overlays when logged in and previewing; your public visitors won’t see any of this. The snippet is purely an admin diagnostic tool.
Why this helps accessibility and your business
Accessible websites serve more people. Screen reader users, people who rely on keyboard navigation, and those using assistive technologies will benefit from consistent, semantic landmarks. The practical advantages include:
- Better navigation for assistive users — they can jump straight to main content or skip nav.
- Fewer support requests and improved user satisfaction for people with disabilities.
- Potential SEO clarity — while landmarks aren’t a ranking magic bullet, properly structured content helps machines understand your pages.
- A quick, visual way for designers and developers to audit page structure without leaving the editor.
FAQs
Do I need to be a developer to use this tool?
No. Install the free Code Snippets plugin, paste the snippet and activate it. No further coding is required. You can optionally tweak the CSS colours in the snippet if you want different outlines.
Will this affect my site speed or add bloat?
No. The snippet only runs in the admin preview when you’re logged in. It does not affect front‑end visitors or site speed for users.
Does this replace tools like WAVE or Lighthouse?
Not exactly. Those external tools check many accessibility rules, contrast ratios and produce reports. LandMarker is a quick on‑site visual inspector for landmarks specifically. Use both — LandMarker for instant structure checks, and tools like WAVE or Lighthouse for deeper audits.
What if my page builder already adds a main tag?
If the page builder already supplies a main landmark, you do not need to add another. In fact, adding another creates a problem. Remove the extra main or change its tag to section/div so you only have one main per page.
Why aren’t my loop grid posts being highlighted as articles?
Loop grids often output content via templates that don’t include an explicit article tag for each item. You may need to edit the loop item template and set the item wrapper’s HTML tag to article or otherwise ensure the loop output is semantic.
