Fix HTML validation errors

[mmmavis]

We have A LOT of HTML errors on the site. Numbers are quite high :see_no_evil: Here are the results of the 5 random pages I tested using https://validator.w3.org/

• https://foundation.mozilla.org/en/ 52 errors, warnings, or improvement suggestions
• https://foundation.mozilla.org/en/blog/ 77 errors, warnings, or improvement suggestions
• https://foundation.mozilla.org/en/privacynotincluded/categories/toys-games/ 48 errors, warnings, or improvement suggestions
• https://foundation.mozilla.org/en/privacynotincluded/articles/ 34 errors, warnings, or improvement suggestions
• https://foundation.mozilla.org/en/privacynotincluded/euki/ 52 errors, warnings, or improvement suggestions

Why should we fix these errors?

From an online source

There are some markup cases defined as errors because they are potential problems for accessibility, usability, interoperability, security, or maintainability—or because they can result in poor performance, or that might cause your scripts to fail in ways that are hard to troubleshoot. Along with those, some markup cases are defined as errors because they can cause you to run into potential problems in HTML parsing and error-handling behavior—so that, say, you’d end up with some unintuitive, unexpected result in the DOM.

How to address these issues?

• I'm thinking we can fix the pages with highest traffic first. Since some code snippets are shared, we are fixing issues on other pages along this process as well.
• Devs should refresh our knowledge around semantic HTML.
• For more tedious checks (e.g., redundant trailing slash, extra closing tag etc), let's see if there's any existing tool/script that can do the trick for us.

┆Issue is synchronized with this Jira Epic

[tbrlpld]

Ouch

[tbrlpld]

I am also working on getting HTML template linting and formatting set up (#9034). Well, actually it's already merged. You can run inv lint-html. What is missing is fixing the issues pointed out and making the CI step required.

[mtdenton]

This was one of the topics that we would have addressed in the Torchbox SEO evaluation/fix work that never came to fruition. Let's break this issue out into more manageable chunks, maybe by page, and we'll get those prioritized in the backlog.

[tbrlpld]

@mmmavis Can you add some info which tool / HTML validator you used to generate that initial list?

[mmmavis]

Yup. Updated the ticket description to mention https://validator.w3.org/ There are other tools for sure but this is the one I've been using.

[mmmavis]

Found some tools listed on https://validator.w3.org/nu/about.html . html5validator in particular might be the most helpful for our use case. Though I'm not sure if our GitHub security settings will allow us to use it as it's from outside of the org 😬

[mmmavis]

I'm thinking we can start fixing from pages that get the most traffic and aim to fix 1 to 3 pages per sprint? Many components/code snippets are shared so hopefully the number of HTML errors for the remaining pages will go down significantly after we fix the first few pages.

[tbrlpld]

@jhonatan-lopes I looks like that this was not broken down into smaller ticket. The epic in Zenhub only contains #9484. I can start with that one.

If we can get access to the traffic information, I could add tickets for those and start working them.

[jhonatan-lopes]

Hey @tbrlpld, I would start with the Homepage, the PNI Homepage and the Blog Homepage (I think those receive the most traffic).

@mtdenton do you have info on which pages we should prioritise first here?

[tbrlpld]

After fixing the three of the most prominent pages (home, blog index and PNI home) we can probably shift focus to the highest traffic pages.

Based on traffic data I have received from the SEO team that should be:

• PNI article #11631
• Campaign page #11632
• Blog article #11632

[mtdenton]

Thanks @tbrlpld , feels like a sound approach.

[tbrlpld]

PRs for the above pages are in.

The next most prominent page types are (based on traffic data):

• PNI category page (/en/privacynotincluded/categories/cars/) - I think is only a variation of the PNI homepage. There fore probably nothing new to fix, but I will check anyhow.
• PNI product page (/en/privacynotincluded/nissan/)
• Banner page (/en/what-we-do/, /en/what-we-fund/, /en/what-we-fund/fellowships/)
• Primary page (/en/who-we-are/)
• Default Page (/en/artifacts/x-ray-goggles/ )
• Participate page2 (/en/what-you-can-do/ )

[jhonatan-lopes]

Remaining tickets:

• [x] #11606
• [ ] #11644
• [x] #11646
• [ ] #11605
• [x] #11592
• [x] #11607
• [x] #11645