HTML Code Standards

From PM Wiki
Jump to navigation Jump to search

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>