(8/31まで)高価なキッチン用品が30日間試せる

HTMLの基本

基本

HTML5ではタグの種類によっては終了タグを省略出来る。
しかし初心者の間はつけて学習したほうが無難。
(省略するには直後に、空行、コメントがあったらNG、などルールがタグ毎に違う)

ひな形

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
<meta name="description" content="サイトの概要">
<meta name="keywords" content="キーワードA,キーワードB">
</head>

<body>

<!-- ヘッダー -->
<header></header>

<!-- 本文 -->
<div id="wrap"></div>

<!-- フッター -->
<footer></footer>

</body>
</html>

DOCTYPE宣言

どのバージョンのHTMLで作成されているかを明示するのがDOCTYPE宣言
現在の主流はHTML5(2018/01/18)

HTML5
<!DOCTYPE html>

HTML4(Strict)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4(Transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0(Strict)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0(Transitional)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html> </html>

HTML文書の最上位の要素。
DOCTYPE宣言の下に記述する。
lang属性に文書の言語コードを記述する。(ja=日本語)
<html lang="ja">

html要素の中に<head>、<body>が内包される

<id>と<class>

<id>は要素に対して固有の名前を割り当てる
<class>は要素に対して分類を割り当てる。

<id>

  • 同ページ内でidが被ってはいけない
  • CSSで直接指定で装飾が出来る。(影響範囲がハッキリしている)
  • ページ内リンク(ジャンプ)として使用できる

<class>

  • 複数の要素で共通のclass名を使える
  • CSSで同じclass属性に対して一括で装飾が出来る
  • ひとつの要素に複数のクラス属性をつけられる(半角スペースで区切る)
  • オブジェクト思考言語のclassとは関係がない。idのグループ版と思えば良い。