HTMLの基礎（PDF 素材）

<p class="c_title">form<span>（入力フォーム ブロック要素）</span></p>
<div id="div1" class="style_div" title="ブロック要素です" >
<h1>見出しです。</h1>
<p>文章を表示しています。<br />
<span class="span_style">２行目</span>です。</p>
</div>
<div></div>　ブロック要素

id="div1"　属性　属性同士は必ず半角で空ける。
（構文）属性名 = “属性値"
<h1>見出しです。</h1>　見出し要素（ブロック）
<p>文章を表示しています。・・・・・・・</p>　段落要素（ブロック）
<span class="span_style"></span>　インライン要素
<br />　改行要素

ブロック要素　ブロックとして表される要素（見出し、段落、リスト、フォームなど）

【div】【form】【h1】〜【h6】【dl】【ol】【ul】【p】【hr】【address】【blockquote】

インライン要素　文章の一部としてブロック要素の中で使用。

【span】【a】【abbr】【br】【img】【input】【button】【label】【em】【select】【object】【code】【q】

非推奨要素　使ってはいけない

【applet】【basefont】【center】【dir】【font】【frame】【frameset】【iflame】【isindex】【menu】【noflames】【s】【u】【b】【big】【i】【small】【tt】

html（最上位要素　DOCTYPE宣言後に配置）

head（文書情報 ブラウザでは通常見えない）

title（文書タイトル　お気に入りやブックマーク、ウィンドウのタイトルバーで使用）

タグ記述

開始タグ：<html>
終了タグ：</html>

属性

【lang】ja（日本語）en（英語）
【dir】
【xml:lang】

blockquote（引用文ブロック　cite属性で関連URL指定　ブロック要素）

q（引用文インライン　ブラウザによって引用符が付く　cite属性で関連URL指定　インライン要素）

cite（出典・参照先　インライン要素）

em（強調　インライン要素）

strong（より強い強調　インライン要素）

abbr（略語 title属性で正式名称の説明　インライン要素）

タグ記述

開始タグ：<blockquote>
終了タグ：</blockquote>

属性

【id】【class】【lang】【title】【style】【dir】【xml:lang】

body（文書全体）

div（汎用ブロックレベル要素　ブロック要素）

span（汎用インライン要素　インライン要素）

h1 h2 h3 h4 h5 h6（見出し　ブロック要素）

p（段落＜パラグラフ＞　ブロック要素）

タグ記述

開始タグ：<body>
終了タグ：</body>

属性

【id】固有の名前　複数使用できない　スタイルシート・スクリプト・リンクで使用
【class】分類名　複数使用の場合はこっち　スタイルシートのみ
【lang】言語コード　HTML用　互換のために、xml:langと一緒に使う
【title】補足情報　マウスカーソルのポップアップ
【style】CSS直接指定。XHTML1.0までしか使えない。
【dir】文字表記の方向　ltr（左から右）rtl（右から左）
【xml:lang】言語コード　XHTML用

br（改行）

タグ記述

タグ：<br />

属性

【id】【class】【title】【style】

meta（メタ情報　head内のみ使用可能）

タグ記述

タグ：<meta />

属性

【name】プロパティ名

  • author　オーナー情報
  • keywords　検索キーワード
  • description　詳しい説明文
  • robots　ロボット型検索エンジンへの有効無効
【http-equiv】name属性の代わり。HTTPヘッダとしてサーバーから送信したい場合
  • Content-Type　文字コード
  • Content-Style-Type　デフォルト言語の指定
  • refresh
【content】nameやhttp-equivに対する値
  • authorに対して→　梅田　貴裕
  • keywordsに対して→　キーワード,検索,HTML
  • descriptionに対して→　HTMLの内容に関する詳しい説明文
  • robotsに対して→　noindex　all　など
  • Content-Type に対して→　text/html; charset=UTF-8
  • Content-Style-Typeに対して→　text/css もしくは、text/javascript
  • refresh に対して→　10; URL=aaa.html
【scheme】補助情報。(例)4-3-10の値に対して、Month-Day-Yearと指定。4月3日10年

【lang】【dir】【xml:lang】

Today's Tips

ブロック要素は、インライン要素内では使用できない。

optgroupとoptionは、選択肢グループ化でselect内で一緒に使用する。

fieldsetとlegendは、部品グループ化で一緒に使用する。