HTMLの基本

基本

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

要素とタグ、属性

開始タグと終了タグに囲まれた範囲のことを「要素」と呼ぶ。

<p>は開始タグ。</p>は終了タグ。

<p>初めてのHTML</p>　←これの<p></p>まで含めた全体が要素

属性（アトリビュート）について。

<a href="https://www.yahoo.co.jp/">ヤフージャパン</a>

緑部分が「属性名」。オレンジ部分が「属性値」。
緑＋オレンジが「属性（Attribute）」。

HTML5&CSS3 標準デザイン講座　P14

ひな形

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>

HTML5&CSS3 標準デザイン講座 P15

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のグループ版と思えば良い。