mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
2 lines
3.9 KiB
JavaScript
2 lines
3.9 KiB
JavaScript
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as s,o as n}from"./app-42vVvAb-.js";const r={};function o(i,e){return n(),t("div",null,e[0]||(e[0]=[s('<h1 id="html-–-code-guidelines" tabindex="-1"><a class="header-anchor" href="#html-–-code-guidelines"><span>HTML – Code Guidelines</span></a></h1><h2 id="we-write-semantic-markup" tabindex="-1"><a class="header-anchor" href="#we-write-semantic-markup"><span>We write semantic markup</span></a></h2><p>We avoid using <code>divs</code> and <code>spans</code> and try to choose more meaningful HTML elements instead. If unsure which element to use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">this list by MDN</a> can be of help.</p><p>Why?</p><ul><li>semantic markup is crucial for accessibility</li><li>it makes the code more readable for other developers</li><li>it benefits our SEO</li></ul><p>For more background <a href="https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/" target="_blank" rel="noopener noreferrer">see this article</a>.</p><p>This doesn’t mean you can’t ever use a <code>div</code> – just think twice before you do!</p><h2 id="we-write-as-little-html-as-possible-–-and-as-much-as-necessary" tabindex="-1"><a class="header-anchor" href="#we-write-as-little-html-as-possible-–-and-as-much-as-necessary"><span>We write as little HTML as possible – and as much as necessary</span></a></h2><p>HTML is used to <em>structure content on the page</em> and should therefore reflect its complexity. Not more and not less. Most content does not require deep nesting of HTML elements – if you find yourself wrapping <code>container</code> around <code>container</code> or adding an element just to correctly position another element on the page this calls for the use of CSS instead!</p><p>Why?</p><ul><li>deep nesting makes it hard to understand, style and maintain components</li><li>it can lead to performance issues</li></ul><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>For a deeper dive into the WHY and HOW have a look at the following resources:</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML" target="_blank" rel="noopener noreferrer">HTML: a good basis for accessibility</a></li><li><a href="https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/" target="_blank" rel="noopener noreferrer">Why, how, and when to use semantic HTML and ARIA</a></li></ul>',14)]))}const c=a(r,[["render",o],["__file","html.html.vue"]]),m=JSON.parse('{"path":"/webapp/html.html","title":"HTML – Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We write semantic markup","slug":"we-write-semantic-markup","link":"#we-write-semantic-markup","children":[]},{"level":2,"title":"We write as little HTML as possible – and as much as necessary","slug":"we-write-as-little-html-as-possible-–-and-as-much-as-necessary","link":"#we-write-as-little-html-as-possible-–-and-as-much-as-necessary","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.78,"words":233},"filePathRelative":"webapp/html.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>We write semantic markup</h2>\\n<p>We avoid using <code>divs</code> and <code>spans</code> and try to choose more meaningful HTML elements instead. If unsure which element to use <a href=\\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">this list by MDN</a> can be of help.</p>"}');export{c as comp,m as data};
|