HTML02

HTMLは文章構造

• webサイトのデザインはまず文章構造の設定から。
• あとから手直ししようとすると全体を作り直すことになる。
• 仕事の現場では、クライアントからの原稿をweb用に組み直すことも必要。
• HTML5の一番の意義は、それまでのバージョンであいまいだったアウトライン構造（見出しの設定）を統一し、安定した運用ができるようになったこと。

firefoxアドオンの入手

• ブラウザ左上→アドオンから。
• 「HTML Validator」ソース表示でHTML記述のエラー確認。
• 「Web Developer」ツールバーからCSSの確認。
• 自宅用もぜひ。

タグ（文章構造）

• h1は繰り返し使えることにはなっているが、h2h3と変える。
• ul＝unordered list　過去分詞形のed付きで。
• ol＝ordered list
• dl＝definition list（definition＝定義）
• dt＝definition term（term＝用語）
• dd＝definition description（description＝記述）
• dlは更新情報などの記述で使える。
  • 文字の手直し程度は更新情報に載せない。
  • 「ニュースリリース」は株主向け情報。個人商店では使わない。
• web閲覧者は情報を選んで見るので、箇条書きは重要。
• ulをネストするならdlを。

タグ（テーブル）

• tr＝table rowで行を設定し、その中をtdで区切る。
• tableでborderを設定すると、tableの枠への指定がセルの枠にも継承される。
• セルを縦に結合するtd属性のrowspanは、行と行をまたがってつなぐから縦。
• セルを横に結合するtd属性のcolspanは、列と列をまたがってつなぐから横。
• tableはHTMLで使うケースは減ったが、PHPなどでこのやり方が必要となる。

タグ（リンク）

• メールリンクを使うなら盗まれてもいいアドレスで。
• a href="#"練習などでリンク先を設定しない場合はハッシュタグを使う（＝ヌルリンク）。リンク先を探しに行かない。
• aをpで挟む。pブロックレベル要素の中にaインライン要素。
• img属性でwidthとhightを適切に指定することで、データが重い場合に表示を早くすることができる。ブラウザで表示する際に、先に画像領域を確保してから画像を当てはめるため。画像のサイズはプロパティで確認する。
• target="_blank"新しいウィンドーを開くと音声読み上げ機能利用者には不便だったが、最近のブラウザは新しいタブを開くため解消された。

タグ（その他）

• summaryは音声読み上げ機能で何のテーブルか示すもの。いちいち項目を読み上げなくても、判断できるよう。
• addressは(c)につける慣習があったが、HTML５ではルール違反。
• 普段から文章見たらマークアップのイメージトレーニングを。

• 仕事で使うHTMLタグは以上。