個人的に使ってるHTMLのテンプレート

WEB制作の第一歩目はHTMLだと思っています。そして慣れないHTMLを書く際に「あれ、ヘッダー内に何を書いておけばいいんだっけ？」と思いまよね。
このため、自分が良く使うものを公開することで、自分やHTML初心者に利用していただければと思います。

HTMLテンプレート

<!doctype html>
<html lang="ja">
    <head>
        <!-- 文字コードはutf8にする -->
        <meta charset="UTF-8">
        <!--スマートフォンなどの画面対応-->
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <!-- ブラウザ上部に表示されるtitleの設定。 -->
        <title>〇〇のHP | 〇〇の画面</title>
        <!-- このページの概要を説明する。検索エンジンのキーワード検索などに関与する。 -->
        <meta name="description" content="" />
        <!--電話番号に勝手に解釈されないように設定-->
        <meta name="format-detection" content="telephone=no" />
        
        <!-- CSSの読み込み -->
        <!--reset CSSを先に書く-->
        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
        <!--　自分で作ったCSSを読み込ませる-->
        <link rel="stylesheet" href="" />
        
        <!--ファビコンの設定（ブラウザ上部のタグのところに表示される画像）-->
        <link rel="icon" href="./img/favicon.png" />
        <link rel="icon" href="./img/favicon.svg" type="image/svg+xml" />
        <link rel="apple-touch-icon" href="./img/favicon.png" />

        <!-- ogp(TwitterなどのSNSリンク対応） -->
        <meta property="og:site_name" content="HPの名前" />
        <meta property="og:url" content="URLを入れる" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="HPの名前 | ページ名" />
        <meta property="og:description" content="コンテンツの内容" />
        <meta property="og:image" content="./img/サムネ画像.jpg" />
        <meta property="og:locale" content="ja_JP" />
        <!-- <meta property="fb:app_id" content="AppID"> -->
        <meta name="twitter:card" content="./img/thumbnail.jpg" />
        <!-- <meta name="twitter:site" content="@moshamusha2010" /> -->
        <meta name="twitter:description" content="HPの名前 | ページ名" />
        <meta name="twitter:image:src" content="./img/サムネ画像.jpg" />
        
        <!-- JavaScriptのロード(deferオプションでHTMLが読まれた後に動作させる) -->
        <script src="js/loading.js" defer></script>
    </head>

    <body>
        <!--サイトの顔になる画像やメニューなどを含める-->
        <header>
            <!--サイトのナビゲーション。-->
            <nav class ="">
                <ul>
                    <li><a href ="">TOP</a></li>
                    <li><a href ="">LINK</a></li>
                    <li><a href ="">CONTACT</a></li>
                </ul>
            </nav>
        </header>

        <main>        
            <!-- CSSでコンテンツの横幅等を設定する-->
            <div class = "main-container">
                <p>メインコンテンツ</p>
            </div>
        </main>

        <!--footerにて、コピーライトや制作者への連絡先などを掲載-->
        <footer>
            <small class = "footer-Copyright">© Ogata's HTML template 2024</small>
        </footer>
    </body>
</html>

<head>タグはSEO的にも重要になる箇所のため、一つ一つきちんと設定することが大事です。さらに、CSSやJavaScriptはプラグインを上位に書くようにしましょう。なぜ上位に書くのかというと、プログラムは基本的に上から下にかけて読まれていきます。そして後から記載されたもので上書きされる特性があるんですね。このため、リセットCSSなど基礎となるモジュールは上位に書く必要があります。