<ul>の子要素は<li>というルールがある
だから<a>は<li>の中でマークアップする
<h1>にしても入れ子になるように
<h1><a>Healthem アナタの健康サポート</a></h1>
トップページでロゴを押したら自分自身に飛ぶようにしたい
<a href="index.html">
HOMEも同様に設定する
まだないページについてはダミーリンクを設定する
<a href="#">ABOUT</a>
これでヘッダー部分はおしまい
ロゴがあって、
ロゴに<h1><a>があり、
ナビがあって、
<nav><ul><li><a>
みたいな構造
あとは見た目の問題なのでCSSが担当
<main>のマークアップ
ただ単にグループにしたい時は<div>を使うといい
あとから<div>ごとに装飾することがわかっているなら、
idかclassを付けておく
<div class="main_visual">
こうすると後々divごとに装飾がつけられて扱いやすい
2つ以上の単語をclass名などにするやり方は
3種類ぐらいある
スネーク・シンタックス (アンダーバーでつなぐ)
main_visual
チェイン・シンタックス (ハイフンで)
main-visual
キャメル・シンタックス (次の単語の最初を大文字)
mainVisual
どれでもいいが、半角スペースで区切ると別の意味になるので
それはやめよう
次に大事そうな見出しを<h2>で囲う
その次の小さいのは<p>で囲う
改行があったら<br>を使う
ただし、WEBサイトでは横幅がどれだけになるかわからないから
基本的には改行は制御しない
どうしてもするときは<br>タグを入れる
なお、<br>は2回連続でいれてはいけない
行あけとか余白のために<br>は使ってはいけない
それはCSSの仕事
<br>はおしりでも冒頭につけてもいい
画像の上に重なっているテキストについて
どうしてもWEBででないフォントで表現したいとかいう場合には
テキストが入っている合成画像という形にするが、
通常、テキストはテキストで（文字の一部にリンクをもたせたいとかいろいろできるから）
保持している
これは状況とデザインにもよる
次の<p>は<p class="description">
ディスクリプション(description)(要約)とかにしてもいい
