HTML Code Standards: Difference between revisions

From PM Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 34: Line 34:
</pre>
</pre>


= Page Structure =
== Page Structure ==


Utilize Bootstrap's container -> row -> column model for each block level element in your layouts:
Utilize Bootstrap's container -> row -> column model for each block level element in your layouts:
Line 64: Line 64:
</pre>
</pre>


== HTML Template ==
=== HTML Template ===


<pre>
<pre>

Latest revision as of 22:07, 27 October 2022

DOCTYPE

Utilize the following DOCTYPE for all HTML documents:

<!DOCTYPE html>

Required Meta Tags

The following meta tags are required for all HTML documents:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap

Include Bootstrap via CDN on all HTML documents:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

Favicons

If there is no available favicon for a page, use the following tag in the <head> section:

<link rel="shortcut icon" href="#">

Page Structure

Utilize Bootstrap's container -> row -> column model for each block level element in your layouts:

<header>

    <div class="container">

        <div class="row">

            <div class="col" id="header-left">

                <img src="/images/logo.png" alt="Site logo">

            </div>

            <div class="col" id="header-right">

                <img src="/images/click-to-call.png" alt="Call now!">

            </div>

        </div>

    </div>

</header>

HTML Template

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Document Title</title>

        <link rel="shortcut icon" href="#">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

    </head>

    <body>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

    </body>

</html>