そもそもHTMLとは？
HTMLの正式名称は、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）と言います。
フルネームで見ると、とても意味がわかりやすくテキストをマークアップ（意味付け）する為の言語となります。
この意味付けは、webサイトを見る人の為ではなく、主に検索エンジンに向けたものだと考えてください。
正しく、webページのタイトルや見出し、文章、画像の意味することで、検索エンジン（Google）が、ページのタイトルや見出し、本文を認識して「あなたが検索したい情報は、これ？」と検索結果を表示してくれるのです。
いくら素晴らしいデザインのサイトであっても、このHTMLの記述が適正なものでないと、サイトとしての価値は無くなってしまいます。
正しいHTMLの記述方法とは？
HTMLの記述で大事なのは、文章として成立しているか。ということです。
通常のwebサイトではHTMLで文章をマークアップし、CSSでレイアウトや装飾、javaScript等にて動きに関する設定を行います。
完成されたwebサイトには、CSSが適用されて表示上は、見出しや要素が上に見えていても、検索エンジンやwebブラウザは、記述されたHTMLを上から順に読み込んで行きます。
その為、確認を行うには一度、確認したいwebページにて、webブラウザの機能を使用し、CSSの読み込みを停止させてみましょう。
CSSの読み込みを停止させた状態で、上から順にテキストを読んでみて小説のようにwebページの内容が読み取れるようであれば記述的に問題ないでしょう。
上から順にテキストを読んでいき、成立する文章になったら次はHTMLを使用したマークアップです。
北海道の天気
今日
午前
晴れ
午後
曇り
明日
午前
曇り
午後
晴れ見出し、本文、リストなどとHTMLには、たくさんの意味を表すためのタグが準備されているので、適切にマークアップしていきます。
また、マークアップの際にはインデントを付けてあげることで視認性が上がります。
<h1>北海道の天気</h1>
<h2>今日</h2>
<h3>午前</h3>
<p>晴れ</p>
<h3>午後</h3>
<p>曇り</p>
<h2>明日</h2>
<h3>午前</h3>
<p>曇り</p>
<h3>午後</h3>
<p>晴れ</p>正しくマークアップすることで、検索エンジンが情報を取得しやすくなるので、SEO効果も格段に期待できます。
HTMLでコーディングをする際には、全ての作業が完了した時にCSSを切って上から読んでみてください。
検索エンジン目線で、自分のサイトを見ることができます。