Given the current mix of scope in Vector sidebar, having for example page tools in the panel for the portal, aside is not the right element to choose.
Therefore narrowing scope of this task.

We will watch structural elements application in (modern) Vector and refine if useful with the further steps taken in Desktop Improvements (Vector 2022) project.

Change 594819 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use semantic HTML5 elements where applicable

https://gerrit.wikimedia.org/r/594819

Once this rolls out, be sure to also test "Reader" mode in Firefox, Safari and Mobile Safari. Not just locally or beta, but also in production. Wikipedia's domain name quite regularly gets special-cased to optimise or fix things they run into.

@Johan Let's add a user notice:

Over-qualified CSS selectors of portals in Wikimedia skins have been changed. <code>div#p-personal</code>, <code>div#p-navigation</code>, <code>div#p-interaction</code>, <code>div#p-tb</code>, <code>div#p-lang</code>, <code>div#p-namespaces</code> or <code>div#p-variants</code> are now all removed of the <code>div</code> qualifier, as in for example it is <code>#p-personal, #p-navigation …</code>. This is so the skins can use HTML5 elements. If your gadgets or user styles used them you will have to update them.

@Johan User notice task has actually been split out into T252467 to be even clearer and better addressing gadget developers and users script/stylesheet editors.

Change 595962 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Use semantic HTML5 elements where applicable with minimal disruption

https://gerrit.wikimedia.org/r/595962

Change 595962 abandoned by VolkerE:
Use semantic HTML5 elements where applicable with minimal disruption

Reason:
Superseded by I540d9a41fc7fd580c5d61b90480e8745ae145850

https://gerrit.wikimedia.org/r/595962

Change 596312 had a related patch set uploaded (by Krinkle; owner: VolkerE):
[mediawiki/skins/Vector@master] Use semantic HTML5 elements where applicable

https://gerrit.wikimedia.org/r/596312

Kind of curious to know why <article> isn't in the list. Seems like an obvious inclusion. :)

@Izno Would you expand what you're missing without [[ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article | article ]]? We feature main and there's no obvious semantical win in my experience to additional define article.
On a blogging system like WordPress that might be more useful with a number of article(s) (excerpts) per view.

We are down down to 261 pages managed by 214 users across all wikis. Pending a reply to T252467#6197821 I think we should push ahead with this change.

Change 596312 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Use semantic HTML5 elements where applicable

https://gerrit.wikimedia.org/r/596312

For completion, above patch still features role ARIA attributes even though the native elements imply them. We will leave them around for some time to ensure CSS selectors building on top of them won't break.
role="contentinfo is a special case, as there's a VoiceOver bug, that doesn't expose footer as contentinfo.

Change 596312 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use semantic HTML5 elements where applicable

https://gerrit.wikimedia.org/r/596312

QA Steps need to be updated to look for before/after in IE 8 and in IE 11.
The issues surfaced are issues, but from my understanding not related to the specific change in this task, but earlier breakages.

@ovasileva, I'm moving this to Needs QA in Prod 🤠

Change 606838 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [CSS] Set display: block for main element in IE

https://gerrit.wikimedia.org/r/606838

IE11: <main> element is display: inline.

Rest ok:
https://caniuse.com/#feat=mdn-html_elements_nav
https://caniuse.com/#feat=mdn-html_elements_footer

@Jdlrobson wrote on gerrit:

The HTML5Shiv library which we already use has support for this: https://github.com/aFarkas/html5shiv#html5shivcss
We should apply this rule in core as part of runnnig the shiv, otherwise we're going to run into this bug again when other skins migrate.

I wondered why that wasn't done.

"In most cases a webpage author should include those basic styles in his normal stylesheet to ensure older browser support (i.e. Firefox 3.6) without JavaScript." (ref)

Would you agree with adding these rules to core/resources/src/mediawiki.skinning/elements.css?

@Demian that sounds better yes. Although I'm not sure if it's better to have core/resources/src/mediawiki.skinning/elements.css or a new html5 feature on ResourceLoaderSkinModule.

Change 607077 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] [CSS] Add HTML5 shiv rules to fix unknown elements in IE

https://gerrit.wikimedia.org/r/607077

In T66477#6245373, @Jdlrobson wrote:

I'm not sure if it's better to have core/resources/src/mediawiki.skinning/elements.css or a new html5 feature on ResourceLoaderSkinModule.

That's a forward-looking idea, though I don't see myself investing the effort into configuring RL. IE11 will be around for a while and I don't think we would conditionally load just these rules for IE with <!--[if IE]>.

Change 606838 abandoned by Aron Manning:
[CSS] Set display: block for main element in IE

Reason:
Rules added to core in patch: https://gerrit.wikimedia.org/r/c/mediawiki/core/ /607077

https://gerrit.wikimedia.org/r/606838

A separate phabricator ticket(s) should capture the IE11 issue per usual practice. Already some good conversation is occurring on Gerrit and here, based on new information from testing and we need to reconsider the priority and how it relates to deployment.

In T66477#6246890, @Jdlrobson wrote:

A separate phabricator ticket(s) should capture the IE11 issue per usual practice.

T256092: [Modern Vector] Fix broken rendering of `main` and element in IE9-11

reconsider the priority and how it relates to deployment.

Affects only modern layout in IE9-11. AFAICT it's not yet enabled on production wikis.
It makes the content unreadable, however, thus it's best not to leave for the last minute.

Change 606838 restored by Aron Manning:
[CSS] Set display: block for main element in IE

https://gerrit.wikimedia.org/r/606838

Thank you for doing this tedious testing, @Edtadros! We just recently got to IE11...

In T66477#6255468, @Edtadros wrote:

❌ There were some observable layout inconsistencies in IE9 through IE11 in production for useskinversion=1.

I believe you intended to write "useskinversion=2". This bug only affects modern layout.

Reported above: T66477#6242972
Fixed in T256092: [Modern Vector] Fix broken rendering of `main` and element in IE9-11
Should be merged any moment now.

Additional remark, as it hasn't been clearly enough stated here. The VoiceOver bug that let's us keep role=contentinfo on footer has been informed by:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer#Accessibility_concerns and
• https://bugs.webkit.org/show_bug.cgi?id=146930