Closed MasssiveJuice08 closed 3 weeks ago
Describe the bug
Quartz contains multiple H1 elements on every page. These are:
<h1 class="page-title"></h1>
<h1>Explorer</h1>
<h1 class="article-title"></h1>
An HTML page should only contain one H1 heading. According to MDN,
While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's element</a>).</p> <blockquote> <p>Note: Nesting multiple <code><h1></code> elements in nested <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning">sectioning elements</a> was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in <a rel="noreferrer nofollow" target="_blank" href="https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html">There Is No Document Outline Algorithm</a>.</p> </blockquote> <p>Prefer using only one <code><h1></code> per page and <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#nesting">nest headings</a> without skipping levels.</p> <p>- MDN, <em>'<code><h1>–<h6></code>: The HTML Section Heading elements'</em>, _<a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page">'Avoid using multiple <code><h1></code> elements on one page'</a>_.</p> </blockquote> <p><strong>Expected behavior</strong> Ideally only the article title should be an h1, Everything else should have a heading tag ranging from <code>h2-h6</code> and nested in the appropriate order relative to the other headings above and below them.</p> <p><strong>Source</strong> '<code><h1>–<h6></code>: The HTML Section Heading elements'<em>, </em><a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page">'Avoid using multiple <code><h1></code> elements on one page'</a>_.</p> <p>You can help speed up fixing the problem by either</p> <ol> <li>providing a simple reproduction</li> <li>linking to your Quartz repository where the problem can be observed - <a rel="noreferrer nofollow" target="_blank" href="https://morrowind-modding.github.io/">https://morrowind-modding.github.io/</a></li> </ol> <p><strong>Desktop (please complete the following information):</strong></p> <p>Quartz Version: [e.g. v4.2.3] node Version: v20.11.1 npm version: v10.2.4 OS: Windows 11 Pro Browser: Chrome</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elliottw"><img src="https://avatars.githubusercontent.com/u/1633097?v=4" />elliottw</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Nice, I was just about to add this issue. Doing some CSS styling, and this is really getting in the way.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MasssiveJuice08"><img src="https://avatars.githubusercontent.com/u/122503558?v=4" />MasssiveJuice08</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Hi @jackyzha0 , I was wondering if you could lend some insight into the decision to use multiple H1 elements per-page? I'm not an expert by any means and only started learning webdev this year.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jackyzha0"><img src="https://avatars.githubusercontent.com/u/23178940?v=4" />jackyzha0</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Hey, I'd agree with this! At least the sidebar elements we can fix. If people include H1 in their own Markdown, we shouldn't stop them though</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jackyzha0"><img src="https://avatars.githubusercontent.com/u/23178940?v=4" />jackyzha0</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Happy to take a pr for this</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MasssiveJuice08"><img src="https://avatars.githubusercontent.com/u/122503558?v=4" />MasssiveJuice08</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <p>Cheers!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MasssiveJuice08"><img src="https://avatars.githubusercontent.com/u/122503558?v=4" />MasssiveJuice08</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <p>Thanks!</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
<h1>
Describe the bug
Quartz contains multiple H1 elements on every page. These are:
<h1 class="page-title"></h1><h1>Explorer</h1><h1 class="article-title"></h1>An HTML page should only contain one H1 heading. According to MDN,