メインコンテンツへスキップ

HTMLで出来る事

1.HTMLで出来る事

HTMLでは、
リンクの設定,
画像や音声の埋め込み,
文書構造や見た目の調整
などが可能です。

HTMLは、主にWebページの内容や構造を記述する為に使われる言語です。 「テキストの表示」をはじめとして、「文書同士を結び付けるハイパーリンクの設定」、「画像や音声などの埋め込み, マルチメディアの統合」、「文書の意味的な構造表現や表示の調整」などが可能です。HTMLファイルはテキストエディタなどで作成でき、Webブラウザで閲覧する事が出来ます。

HTMLは文書の表示(装飾)に関しては、スタイルシート言語にて記述して表示します。個々のHTMLの要素でもスタイルシートの既定値があります。スクリプト言語を用いて、動的に表現する事もできます。ユーザーからの情報をサーバー側で受け取る事が可能な為、意図しないデータの送信には注意が必要です。

HTMLが何かを理解することで、「どのように記述すれば意図した表現になるか」や「どんな場面で使うべきか」が分かります。 また、データの送信など、注意が必要な機能についても意識できるようになります。

テキストの表示
Top page

大見出し
小見出し
小見出し

イメージを別の要素を用いて描画しています。

実際には、section要素やh1, h2 などの見出し要素で、構造を表します。

表示の仕方

表
(テーブル)		 表示の
仕方
CSSで装飾

HTML要素にCSSが組み込まれて「装飾が可能」です。

補助技術との連携, 読み上げ対応など
スクリプトで
罫線を
動的に変更

HTML要素にJavaScriptが組み込まれて「動的な変化が可能」です。


受信用の
ページへ

受信用の
ページへ


受信用の
ページへ

ローカルファイルの選択と送信が可能。一応は制限もあります。

検索やSNS向けの情報付加, SEO対応など

2.テキストデータの表示

HTMLを用いると、
テキストデータの
表示等ができます。

HTMLを用いると、テキストデータの表示等ができます。目的がこれだけでしたら「プレーンテキスト」でも良いわけです。普通は、他のHTMLで出来る事と合わせて使われます。

表示等の中には、印刷も含まれます。音声ツールでの読み上げもあります。

テキストとは、文字コードだけで構成された文字列や文書のデータです。「テキストとは」で改めて記述しています。

HTMLを用いると、テキストデータの表示等ができます。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>サンプル</title>
  6. </head>
  7. <body>
  8. HTMLを用いると、テキストデータの表示等ができます。
  9. </body>
  10. </html>

HTMLの規則に合わせて、色々とタグを記述していますが、この例はテキストデータの表示等を目的としたHTMLの記述例です。
５行目の<title>要素以外は、省略も可能でありほぼ定型です。８行目の内容が、表示等がしたいテキストデータの記述となります。
実行例は、別のHTML要素を用いて表したイメージです。

  1. <div>
  2. 空白は 纏められる。
  3. </div>
空白は 纏められる。

HTMLは、文字の装飾の既定値として、連続する空白を纏めます。
<pre>要素などを用いたり、CSSで装飾に対して記述する事で、対応はできます。

「HTMLのホワイトスペース」で改めて記述しています。

3.ハイパーリンク

ハイパーリンクは、
文書を結び付ける
参照です。

ハイパーリンク とは、文書を結び付ける参照(レファレンス)です。
ここでいう参照(レファレンス)は、他の場所にあるデータを指している情報を含む小さなオブジェクトです。それ自身の中には、指しているデータ自体は含みません。

HTMLでは、<a>要素, <form>要素 などで、ハイパーリンクを表します。

ハイパーテキスト (Hypertext)とは、複数の文書を相互に結び付ける仕組みです。
直訳すると「超文書」ですが、意訳, 造語的には「結文書」かなと思います。

Top page
  1. <a href="./index.htm" title="Go to Top page.">Top page</a>
  2. <form action="./index.htm">
  3. <button title="Go to Top page.">Top page</button>
  4. </form>

上が<a>要素で、下が<form>要素です。
リンク先(クリックした時のページの遷移)は、このページの上位である「離珠のHTMLでしぃ!」で例示しました。ここの「HTMLで出来る事」という文書から、「離珠のHTMLでしぃ!」という文書を結び付けている例です。オブジェクトとは、"./index.htm"を "./text.htm" と置き換えても遷移先は変わっても遷移するという機能は変わらないという事です。

4.データの埋め込み

HTMLは、
他のデータファイルを
表示する(埋め込む)事が
出来ます。

HTMLは、画像ファイルなど他のデータファイルを、表示する(埋め込む)事が出来ます。ハイパーリンクなどの他の機能と組み合わせる事で、そのデータファイルにリンクなどの機能を付加したりもできます。

埋め込みに関わる要素については、「エンベデッドコンテンツ」で記述しています。

  1. <img src="../Img/G00/demo.gif">

<img>要素で、gif画像を表示している例です。

5.文書の論理構造

HTMLは、
要素の種類，配置で
論理構造を表します。

HTMLは、要素の種類，配置で、論理構造を表します。

この論理的な構造については、「HTMLの区分化」で記述しています。

大見出し
小見出し記事１
小見出し記事２
  1. <body>
  2. <h1>大見出し</h1>
  3. <h2>小見出し</h2>
  4. <p>記事１</p>
  5. <h2>小見出し</h2>
  6. <p>記事２</p>
  7. </body>

この例では、<body>要素の直下に物理的に同じ階層に<h1>要素, <h2>要素, <p>要素があります。それを論理的に<h1>要素が示すまとまりの中に、<h2>要素があるとしている例です。

6.文書の表示の仕方

HTMLでは、
文書をレンダリングする為の
一連の提案がされています。

HTMLでは仕様の提示と共に文書をレンダリングする為の一連の提案がされています。「必須」ではなく期待される「提案」です。ユーザーエージェントの違いにより、レンダリングの結果が異なる事もあるので、注意が必要です。
「HTMLのレンダリング」にて記述しています。

  1. 赤
  2. 黄
  3. 青
  1. <ol>
  2. <li>赤</li>
  3. <li>黄</li>
  4. <li>青</li>
  5. </ol>

この例では、順序付き一覧表(リスト)のソースコードとそのデモを提示しています。

赤 止まれ
黄 注意して進む
青 進んでも良い
  1. <table>
  2. <tbody>
  3. <tr>
  4. <td>赤</td>
  5. <td>止まれ</td>
  6. </tr>
  7. <tr>
  8. <td>黄</td>
  9. <td>注意して進む</td>
  10. </tr>
  11. <tr>
  12. <td>青</td>
  13. <td>進んでも良い</td>
  14. </tr>
  15. </tbody>
  16. </table>

この例では、表(テーブル)のソースコードとそのデモを提示しています。

7.スタイルシート

スタイルシートは、
文書の見栄えに関する
情報を記録等した
データやファイル等の事です。

スタイルシート (Style Sheets)とは、文書の見栄えに関する情報を記録等したデータやファイル等の事です。
Webページの記述に関して言えば、HTMLなどで記述された文書の、体裁や見栄えを表現する為の情報や記録等の事です。
一般的には CSS と呼ばれるスタイルシート言語が用いられる事が多くて、スタイルシートと言えば CSS の事を指す事があります。
スタイルを直訳すると文体が意味的に近いかな。シートも直訳すると書かと思います。 文体 ( スタイル ) 書 ( シート ) が造語的には合うのかなと思います。

CSSに関しては、「離珠のCSSでしぃ！」で記述しています。

下線

  1. <p style="text-decoration: underline;">下線</p>

この例では、「下線」というテキストに CSS で下線を装飾しています。

赤
止まれ
黄
注意して進む
青
進んでも良い
赤
止まれ
黄
注意して進む
青
進んでも良い
赤
止まれ
黄
注意して進む
青
進んでも良い
  1. <div class="XHSample11701">
  2. <dl>
  3. <div>
  4. <dt>赤</dt>
  5. <dd>止まれ</dd>
  6. </div>
  7. <div>
  8. <dt>黄</dt>
  9. <dd>注意して進む</dd>
  10. </div>
  11. <div>
  12. <dt>青</dt>
  13. <dd>進んでも良い</dd>
  14. </div>
  15. </dl>
  16. </div>
  1. .XHSample11701 {
  2. display: table;
  3. border-collapse: separate;
  4. border-spacing: 2px;
  5. }
  6. .XHSample11701 div {
  7. display: table-row;
  8. }
  9. .XHSample11701 dt, .XHSample11701 dd {
  10. display: table-cell;
  11. border: solid 1px #000000;
  12. }
  1. .XHSample11702 dt {
  2. margin-top: 0.5em;
  3. margin-bottom: 0.5em;
  4. margin-left: 0.125em;
  5. padding: 0.2em 0.8em 0.1em 0.5em;
  6. border-width: 0 0 0.07em 0.5em;
  7. border-style: solid double;
  8. border-color: #99f;
  9. border-radius: 0 0.8em 0.8em 0.8em;
  10. font: bold 1.5em/1.2 'Noto Sans JP', serif;
  11. color: inherit;
  12. background-color: #fff;
  13. box-shadow: 0.25em 0.25em 0.25em 0.05em #fcf;
  14. }
  15. .XHSample11702 dd {
  16. margin-left: 0;
  17. }

この例では、定義一覧(dl)というリストを、スタイルシートで表(テーブル)のように装飾しています。

上がユーザーエージェントによる装飾で、下２つがスタイルシートで装飾したものです。 クラス指定のないもの, クラス指定が 'XHSample11701' のもの, クラス指定が 'XHSample11702' のものの３通りです。

この例示から察して頂きたい事は、スタイルシートで見た目は何とかなるという事です。 要素を選択する時に、見た目で選ぶのではなく意味で選ぶべきという事です。

8.スクリプト言語

スクリプト言語は、
簡易的な
プログラミング言語の
一種です。

HTMLはスクリプト言語を用いて、プログラムを記述する事ができます。スクリプト言語はプログラミング言語であり、コンピュータプログラムを記述する為の言語です。コンピュータプログラムとは、コンピュータに対する命令（処理）を記述したものです。
HTMLおよびDOM APIは、スクリプトが他のスクリプトの同時実行を検出できないように設計されています。(この一般的な設計原則の例外は、JavaScriptSharedArrayBufferクラスです。)

ユーザーの操作を特に意図した要素を、インタラクティブコンテンツと呼びます。「インタラクティブコンテンツ (HTMLでの操作)」で改めて記述しています。

スクリプトで
罫線を
動的に変更
  1. <div id="JDV11801" style="padding: 0.3em; height: 5.0em;">スクリプトで<br>罫線を<br>動的に変更</div>
  2. <form>
  3. <select onchange="

    てすと えらー

    document.getElementById('JDV11801').style['border'] = this.value;">
  4. <option label="線なし" value="none" selected="">
  5. <option label="一本線" value="solid 1px">
  6. <option label="二本線" value="double 5px">
  7. </select>
  8. </form>

JavaScriptというスクリプト言語を用いての、境界線を書き換える例です。

ユーザーの操作を特に意図した要素を用いて、スクリプト言語に情報を与えています。

9.フォームを送信

イベントの発生に伴い、
サーバーへフォームを
送信します。

HTMLはイベントの発生に伴い、サーバーへフォームを送信します。例えば<input>要素の type属性の値が submit の時に、その要素の clickイベントが発生したときに、ユーザーエージェントはサーバーへフォームを送信しようとします。

フォームに関わる要素については、「フォーム」で改めて記述しています。


受信用の
ページへ
  1. <form action="./fmreceive.htm">
  2. <input name="nipInput" value="abc" style="max-width: 95%;">
  3. <button name="nbtSender" value="./cando.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

<input>要素でデータ入力を行い、<button>要素で送信の契機としている例です。
この例での送信先は、当サイトで送受信の例示用に用意しているページです。

10.注意点

送信やスクリプト,
埋め込みに注意すれば、
とりあえず表示(実行)する事で
危険な事はないと思います。

<form>要素などのフォームに関わる要素で、イベントの発生に伴い、サーバーへフォームを送信します。 用いる時には、送信先の記述に注意しましょう。特にコピペでソースを使う時には要注意です。

スクリプト言語が<script>要素を用いて記述できます。このスクリプトにより、サーバーへデータを送信する事が出来ます。スクリプトの内容は読む(理解する)のも難しいので、扱いには注意しましょう。 自作のスクリプトであっても、間違いはあるので、検証にもご注意を。 (ネットから安易にスクリプトを拾って使わないように)

エンベデッドコンテンツを用いると他のデータファイルを埋め込める訳ですが、その中身に注意が必要です。 それがhtmlファイルでフォームに関わる要素があったら、 そこにサーバーへデータを送信するスクリプトがあったら等々 いろいろ注意すべき点があります。

上記の、主に送信について注意すれば、 自作のhtmlファイルを表示(実行)する上で 危険な事はないと思います。 尚、これはhtml文書を作成, 検証する上での注意点であり よそのWebサイトは安易に表示しない方が安全です。

一般的な注意点は、サーバーへアップロードした場合は、それは世間に公開したという事なので誰にでも閲覧可能という考えでいる事が大事です。 その上で、そのデータは複製が容易です。データ自体の取扱いにも、注意が必要です。