- 追加された行はこの色です。
- 削除された行はこの色です。
- HTML へ行く。
#author("2020-02-01T23:10:06+09:00;2019-12-25T23:39:09+09:00","default:inoue.ko","inoue.ko")
*Hyper Text Markup Language
[[HTML]]｜[[HTML/Tags]]｜[[HTML/Sample]]｜[[HTML/Tips]]
~
***はじめに
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）とは、ウェブ文書を記述するためのマークアップ言語で、文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
HTMLファイルは、ごく普通のテキストファイル（文字が並んだだけのもの）なので、テキストエディタ（メモ帳のようなもの）で書いて、保存するだけで完成します。
~
***MENU
#contents2_1
~
**HTMLの基本構造
ひとつのHTMLファイル、すなわちひとつのWebページは、
おおよそ以下のような構造のソースコードで記述されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "UTF-8">
<title>Sample Page</title>
</head>
<body>
<h1>見出し</h1>
<p>
本文
</p>
</body>
</html>
~
***＜!DOCTYPE html＞
ドキュメントタイプ宣言。標準準拠モード(Standard Mode)のHTML5文書であることを意味します。
~
***＜html＞ ～ ＜/html＞
HTML文書の最上位階層(ルート)要素です。ページ全体は<html>に始まって、</html>で終ります。開始タグには上の例のように主要言語を lang 属性で記述します。この情報は音声ツールや翻訳ツール等に利用されます。
この中に head と body の２つが入りますが、head も body も、かならず一つずつ。また、その隙間に何かを書いてはいけません。
~
***＜head＞ ～ ＜/head＞
ページに関する付加情報(メタデータ)を記述する部分です。ページのエンコード、キーワード等を示す meta、ページタイトルを示す title などが入ります。この部分は、デフォルトのスタイルシートで display: none; となっているため、画面上には表示されません。
~
***＜body＞ ～ ＜/body＞
ページのコンテンツです。ブラウザに表示されるすべての要素がこの中に記述されます。
~
~
**タグと属性
***開始タグと終了タグ
HTMLの記述では、文章（文字列）要素を「開始タグ」と「終了タグ」で囲むかたちで構造上の地位を与えます。
<要素名>文章</要素名>
''参考''：HTML5で閉じタグを書かないもの一覧
br,img,hr,meta,input,embed,area,base,col,keygen,link,param,source
~
***属性情報
タグには、属性情報（複数可）を与えることができます。
<要素名 属性名 =値 属性名 =値 ・・>文章</要素名>
~
~
**グローバル属性
属性はタグによって使えるものが異なりますが、すべての要素に共通に使うことができる''グローバル属性''というものがあります。以下、主なものです。
~
***id ="名前"
ページ上で唯一の要素にを指す固有名で、CSSのセレクタになります。
id名は、以下のようにしてページ内リンクに使うことができます。
<div id="pageTop"> </div>
:
<a href="#pageTop">ページの先頭へ</a>
~
***class ="名前"
ページ上で複数の要素に適用できる分類名で、CSSのセレクタになります。半角スペースで区切ることで、複数のclass指定ができるます。
~
***style ="スタイル記述"
CSSを直接書き込む場合に使用 例：<p style="color:red;">文章</p>
~
***title ="表題"
表題や説明フレーズが入ります
~
***lang ="言語コード"
日本語のページであれば、言語コードは ja 例：＜html lang="ja"＞
~
~
**HTMLタグ
ページを独立させました ＞ [[HTML/Tags]]
~
-[[GoogleImage:HTML5 コンテンツモデル]]
-[[GoogleImage:HTML5 Semantic]]
~
~
