コンテンツにスキップ

Topic:HTML

リンクを追加
提供：ウィキバーシティ
Wikipedia
Wikipedia
ウィキペディアにHTMLに関する記事があります。
Wikibooks
Wikibooks
フリー教科書ウィキブックスにHTMLの教科書があります。

HTML

[編集]

HTML( HyperText Markup Language )は、ウェブページをマークアップするマークアップ言語です。

かつて、SGMLに基づいて規格が標準化されれていた名残で[1]、階層構造を持つ要素を、<と> で囲んだタグ( Tag )という表現を用います。

単純なHTML文書の例
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset='utf-8'>
    <title>単純なHTML文書の例</title>
  </head>
  <body>
    <h1>はじめに</h1>
    <p>この文書は、単純なHTML文書の例です。</p>
  </body>
</html>
  1. 最初の行は、ドキュメントタイプです。
    HTML4.01 では、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">とDTDが宣言されていたので SGML でしたが、HTML5 以降は DTD がなく、SGML ではありません。また、HTML5以降ではバージョンによる分岐は行なわれません。
  2. HTMLドキュメントのルート要素は、HTML要素です。
    ここでは、属性 lang に値 ja をあたえ「日本語の文章である」事をユーザーエージェント（ UA: ウェブブラウザーや検索エンジンのクローラー）に教えています。
  3. HTMLの１番目の要素は、HEAD要素です。
    HEAD要素の内容は直接レンダリングされませんが、文書の特徴を示す情報を記述します。
  4. META要素は、ページのメタデータを記述します。
    この場合は、charset に値 utf-8 が用いられていることを UA に教えています。
  5. TITLE要素は、文書の表題を示します。
    UAが表題をどう扱うかは決められていませんが、クローラーなら検索結果の見出しに、ウェブブラウザーならタブに表示するなどの使われかたをします。
  6. HEAD要素の様に内容を持つ要素は、内容を開始タグ <要素名 属性１=値１ 属性２=値２> と終了タグ </要素名> で囲みます。
    この場合は、</head> が終了タグです。
  7. HTMLの２番目にして最後の要素は、BODY要素です。
    名前通り「本体」でレンダリングされる（目に見える）要素は全てBODY要素の子要素・孫要素・子孫要素です。
  8. H1要素は、Header（見出し）を表現するブロック要素です。
    HTML5には、HEAD, H1, H2, .. H6, HEADER とHeaderを名乗る要素が多いのですが、それぞれ意味と用途が違います。
  9. P要素は、Paragraph（段落）を表現するブロック要素で、P要素の前後で改行されます。
[編集]

タグ？要素？

よく口語的に「HEADタグ」「Pタグ」などと言ってしまいますが、タグは本文で説明したとおりSGMLに由来する<と> で囲まれた要素の表現方法のことです。 多くの場合、「要素」を「タグ」といっても意味が通じますが、

HGROUPタグは0個以上のPタグを内容に持つことができる。

のような文章は、Pタグが<p>なのか<p>内容</p>なのか曖昧なので

HGROUP要素は0個以上のP要素を内容に持つことができる。

とすべきです。

<p>は、P要素の開始タグ

の様に開始タグ（終了タグ）に限ってタグという用語をつかうことで、曖昧さをなくすことができます。

P要素

[編集]

要素はエレメントです。デベロッパー ツールでエレメントをコピーすると終了タグまでコピーできます。

P要素は、パラグラフ（段落）とよばれ、他の要素と同じく onXXX 属性（Ex: onclick）を指定してスクリプトの起動のきっかけになることができます。 ただし、onXXXのハンドラで変更できる対象はトップレベルのインスタンスに限られるので、ウェブアプリケーションのような「状態」を保つ必要がある場合は、アプリケーションがDOM操作によりによりイベントハンドラを動的に変更する必要がでるので、属性を起点としたスクリプトハンドリングは「イベントが届いていることの確認」に留めるべきです。

例えばの実験

[編集]
  1. グーグルクロムで 「右上端の縦三点アイコン」→「新しいシークレットウィンドウ」、で、シークレットウィンドウを開く。
  2. 「右上端の縦三点アイコン」→「その他のツール」→「デベロッパツール」、右側上段が、このページのソース。
  3. <body>行に行反転があるはず、無ければその最初の<body>行をクリックして、マウス右クリックメニューからEdit As HTML を選ぶ。
  4. <p onclick="this.innerHTML='<b>押されたよ。</b>'">押す。</p>、を最初のP要素の次、<div id="bulletpoints-wrapper">の前に張り付ける。
  5. デベロッパツールを閉じると、「リーディング リストは通常どおり保存されます。 詳細」の下に「押す。」という文字が現れこれを押すと…
  6. 「押されたよ。」と表示される…
  7. 基本的にこのスクリプトはこれまで、これ以降は変化しないけど…
  8. ある人が云うにはこのボタンの動き、操作をループさせたければどうしたらいい??

ここで勉強するための、参考

[編集]

Google Chrome や Microsoft Edge などのウェブブラウザーで、ページにフォーカスが当たっている状態で、Ctrl+Shift+I　を押すとデベロッパー ツールが開きます。

タッチパネルに対応したディバイスでは、ページ上の要素を長押しするとポップアップメニューが出るので、メニューの「検証(Inspect)」を選ぶと、デベロッパー ツールが開き押した要素のソースコードを見ることができます。

参考

[編集]
  1. Wikibooksに、HTMLの本があります。
    2022年10月現在、HTML4.01とHTML L.S. の内容が混在しています。
  2. Wikibooksに、デベロッパー ツールの解説があります。
  3. Wikibooksに、DOMの解説があります。

脚註

[編集]
  1. ↑ 2022年10現在の最新のHTML標準は、HTML Living Standardで、HTML 4.01までのようにSGMLに基づいていません。

外部リンク

[編集]
「https://ja.wikiversity.org/w/index.php?title=Topic:HTML&oldid=18006」から取得