HTML5のテンプレートひな形

最小のHTML5

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>タイトル</title>
</head>
<body>
</body>
</html>

スタイル、JavaScript、構造があるHTML

<!DOCTYPE html>
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>タイトル</title>
    <link rel="stylesheet" href="example.css" />
    <style></style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section></section>
        </article>
    </main>
    <footer>
    </footer>
    <script src="example.js"></script>
    <script></script>
</body>
</html>

OGP(Open Graph Protocol)用のメタタグ

<head>
    <meta property="og:locale" content="ja_JP" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="ページのURL" />
    <meta property="og:title" content="ページのタイトル" />
    <meta property="og:description" content="ページの説明" />
    <meta property="og:site_name" content="サイトの説明" />
    <meta property="og:image" content="画像のURL" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="ページのタイトル" />
    <meta name="twitter:description" content="ページの説明" />
    <meta name="twitter:image" content="画像のURL" />
</head>

よく使うlink要素

<head>
    <link rel="alternate" type="application/rss+xml" href="RSSファイルのパス" />
    <link rel="alternate" type="application/atom+xml" href="Atomファイルのパス" />
    <link rel="apple-touch-icon" href="モバイルデバイス用のアイコン" />
    <link rel="apple-touch-icon-precomposed" href="モバイルデバイス用のアイコン" />
    <link rel="author" href="作者ページへのハイパーリンクやメールアドレス" />
    <link rel="amphtml" href="AMP対応ページのURL" />
    <link rel="canonical" href="重複コンテンツの正規・推奨ページのURL" />
    <link rel="help" href="ヘルプのURL" />
    <link rel="icon" href="アイコン画像のURL" sizes="192x192" />
    <link rel="license" href="ライセンス情報へのハイパーリンク" />
    <link rel="next" href="現在のページが属する一連のリソース内の次のリソースへのリンク" />
    <link rel="pingback" href="コメントや説明を行う際のPing送信先" />
    <link rel="prefetch" href="事前にリンク先のリソースを読み込む場合の提案" />
    <link rel="prev" href="現在のページが属する一連のリソース内の前のリソースへのリンク" />
    <link rel="search" href="検索ページのURL" />
    <link rel="start" href="サイトアドレス" title="タイトル" />
    <link rel="stylesheet" href="CSS・スタイルシートのURL" />
</head>