HTMLの基本的な構造
SEO対策は含めていません。
<!DOCTYPE html><!-- どのバージョンのHTMLか宣言 -->
<html lang="ja"><!-- html文書の開始（属性で日本語を指定） -->
<!-- ◇---------------------------------------◇ -->
<!-- ↓ head:HTMLの前書き -->
<head>
<!-- 文字コード指定：文字化け防止 -->
<meta charset="UTF-8">
<!-- レスポンシブ対応：デバイスの幅を使うことを指定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- サイトのタイトル -->
<title>タイトルを入力</title>
<!-- 説明文とキーワード -->
<meta name="description" content="説明文を記述">
<meta name="keywords" content="検索ワードを記述">
<!-- リセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!-- 自作CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- インラインCSSはここに貼り付け -->
<!-- グーグルフォントを使用するならここに貼り付け -->
<!-- 指定のリンクをここに貼り付け -->
<!-- フォントオーサムを使用する場合 -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- ファビコン -->
<link rel="#" type="#" href="#">
</head>
<!-- ◇---------------------------------------◇ -->
<!-- ↓ body:HTML本文 -->
<body>
<header>
<!-- ロゴ -->
<h1><a href="index.html"><img src="#" alt="#"></a></h1>
<!-- ナビゲーション：右 -->
<nav>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</nav>
</header>
<!-- トップ画像 -->
<div id="main_image"><img src="" alt="メイン画像"></div>
<!-- ■ メイン -->
<main>
<article>
<section>
<h2>見出し</h2>
<p>記事<a href=""></a></p>
</section>
<section>
<h2>見出し</h2>
<p>記事<a href=""></a></p>
</section>
</article>
</main><!-- メイン終 -->
<!-- ■ サイドバー -->
<aside>
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">□□はこちら</a></li>
</ul>
</aside><!-- サイドバー終 -->
<!-- ■ フッター -->
<footer>
<small>© コピーライト表記</small>
</footer><!-- フッター終 -->
</body>
</html><!-- html文書の終了 -->