2 Content Guides for writing HTML

HTML is declarative.

It won't warn you of a bad markup talkless of a potential bad markup.

This style guide aims to help you avoid issues on the long run.

Avoid nesting Content Windows

Content Windows are mutually exclusive. Only one can be active at a time even if it has descendants. Hence, it's redundant to nest content windows.

<body>
  <dialog> <!-- -->
    <dialog></dialog>
  </dialog>
</body>

The markup above is unsemantic to how it functions. A Primary Window (body element) parents a Secondary Window (dialog element) which parents another Secondary Window.

<body>
  <div></div> <!-- represents primary window -->
  <dialog></dialog>
  <dialog><dialog>
</body>

The markup above is semantic to how it functions. It introduce a div element to represent the primary window since the body element doubles as the root of all non-meta contents. In addition, no secondary windows are nested.

Start with this 7-content boilerplate

Every web document should begin with the following 7 contents because of their respective purposes.

In code, you'll be using the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><!-- Document Title --></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toheeb/prose@0.0.0/index.min.css">

    <!-- More Content Metas -->
  </head>
  <body>
    <div class="window-primary">
      <main>
        <!-- Content -->
      </main>
      <!-- Hidden Main Views -->
    </div>
    <!-- Secondary Windows -->
  </body>
</html>
Expectations

It is expected that you'll do the following: