Bootstrap: Move <footer> outside of <main>

[sukiletxe]

In some of the examples, the <footer>h elemnt is inside the <main element. I believe this placement is not correct, because the footer of a page is not part of the main content more than a header or a navigation menu.

[patrickhlauke]

if you can pinpoint the specific examples, i'd be glad to have a look and submit changes

[petetnt]

I think that <footer> is valid inside <main> though?

MDN states that

• must not be a descendent of an

  ,

  ,

  ,

  , or

  element.
• Only one main element can be used per document.

Permitted content: Flow content
Elements belonging to the flow content category typically contain text or embedded content. They are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.

Unless MDN is wrong though, I didn't check the spec

[patrickhlauke]

it's valid, but - just to split semantic hairs - once it's contained inside another sectioning element, the <footer> nominally acts as footer just for that particular section (ditto for <header> or similar...it's "valid" to add both <header> and <footer> directly inside <main>, but that completely defeats the idea of sectioning out the high-level sections of the page.

[petetnt]

@patrickhlauke Yeah, that's true. I assumed that the footers were went as footers for the said sections but the semantics do change if they are meant as top level footers.

[sukiletxe]

It seems that an application using the framework has this problem, not Bootstrap itself. In the examples of bootstrap, there is no <footer> inside of a <main> element (or its <div role> equivalents). In fact, there is no such main + footer combination . A <div>is used as a container for the main content and the footer in some cases (of course mixing up the actual landmarks). Should I open an issue for this?

[sukiletxe]

Oops, revisiting this issue, it seems that I accidentally closed it. No wonder why I didn't receive any answer. Reopening.

[mdo]

No plans for us to tackle anything here; we don't have anything for this in our docs or examples, and there's not much we should be doing to guide most HTML semantics for folks. There are other resources and better times for that.