初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTMLの役割と基本構造 3

明けましておめでとうございます。今年もよろしくお願い致します。
改めてHTMLやCSSに関する事を記事に書いていきます。

HTMLの記述の準備

さて去年の記事でも触れましたがHTMLを記述するにはテキストエディタが必要となります。
理由は下記になります。

  • 起動・動作が早い
  • 文字コード指定が出来る
  • コードのカラーリングなど、HTML入力に適している

OS別に使用出来るソフトをまとめました。

Windows

Mac

  • mi(無料)
  • CotEditor(無料)
  • Jedit X(有料)
  • CODA(有料)

HTMLを記述する

  1. テキストエディターを起動する
  2. 新規ファイル作成
  3. 所定の場所に保存する
  4. 拡張子は「.html」
  5. 記述を始める

DTD

  • Document Type Definition(定義)
  • 使用するHTMLのバージョンを宣言します
  • 2015年1月現在、HTML5が勧告されています
<!DOCTYPE html>

HTMLを記述する箱を用意する

  • <html>~</html> は、そのルールで記述するための「箱」
<!DOCTYPE html>
<html>

</html>

箱の中の必要な2つの要素を記述する

  • <head>~</head> ブラウザに内容のルールを伝える(ブラウザでは不可視)
  • <body>~</body> 閲覧者に内容の意味を伝える(ブラウザでは可視)
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

ここまではHTMLの「箱」を作る記述のため、表示する内容はありません(ブラウザでプレビューしても何も表示されません。) このあと必要な要素を記述していくことになります

HTMLの基本構造

  • DTD以外の基本構造(DTDは、HTML5で記述すること)

html要素

  • HTML文書のルート要素

head要素

  • UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視(非表示)

body要素

  • 閲覧者が内容を確認する部分
  • 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
  • 可視(表示)

ドキュメントツリー

  • ルート要素からの入れ子(ネスト)状態を表したもの
  • 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
  • 要素の意味づけを明示したものを「文書構造」と呼びます
topへ戻る