１-２ HTMLの構成

  1. DOCTYPE
  2. header
  3. body

1 DOCTYPE宣言

HTMLのタイプ（XHTML1.0やHTML5）や使用する言語を指定する

2 ヘッダーの役割

文字コードやタイトル、リンクタイプを指定する。
一部を除き画面には表示されない。

3 ボディの役割

画面に表示するコンテンツを組み立てる。



基本中の基本のタグを使いコードを記述しました。
この様にセマンティックコーディングで文書構造として
構成するのが現在推奨されている形になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="discription" content="内容">
<meta name="keywords" content="内容">
<title>WWW | HHH</title>
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div id="container">
<div id="head">
<h1>大見出し</h1>
</div><!-- /#head -->
<div id="content">
<h2>小見出し</h2>
<p>本文</p>
<a href="http://www.dummy.com">リンク</a>
<img src="images/001.jpg" alt="android画像">
</div><!-- /#content -->
<div id="sidebar">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div><!-- /#sidebar -->
<div id="footer">
<address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

上記コードをブラウザーで表示したものがこちらです。




この他にも様々なタグがあり、実際にサイトを制作するには
それらを使いこなす必要があります。
また、この時点では文書構造のままになっているので
HTML以外にも画面を装飾する為のCSSを使い
デザインされた画面へと作り上げます。

次回はこのHTMLにそのCSSを施して
セマンティックコーディングの
デザイン部分を組み立てようと思います。