(続き)
<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)(要約)とかにしてもいい。いまはしないけど。