1. HTML5の基礎

ここでは、極力、基礎的なことだけに限定して話をする。しかし、詳しい解説はネット検索すればすぐに見つかるので、必要最小限の解説にとどめておこうと思う。ここで想定される読者は、昔HTMLを少しかじったが、今はだいぶ忘れたという人であり、わからなければネット検索で確認できる人である。

結局のところ、私自身のために、後で読み返して思い出すためのメモのようなものでもある。

1.1 HTMLの基本構造

HTMLの基本構造は、

<html>
   <head>
      ここに、文書のタイトルや基準となるURL、
      制作者の情報や文書に関する
      各種情報などの head要素をここに記述する。

      <title>タイトル名</title>
       （タイトル名なブラウザ表示における必須項目。）
   </head>
   <body>
      ここに、本文を記述する。
   </body>
</html>

のようになっている。これは基本中の基本。マークアップ言語であるが、タグ言語とも呼ばれ、始まりと終わりを表す開始タグ <tag> と終了タグ</tag>で文章や命令セットを挟んで使用する。

html言語初期の頃の文書は、改行 <br>を多用して段落処理をしていたが、最近は <p>と </p>で一つの段落を囲むやり方が主流のようである。これをパラグラフ（paragraph)と言い、日本語の段落に相当する。英語圏で一般的に利用されるようになり、日本語サイトでも使われるようになった。パラグラフとパラグラフの間に一行空白行が挿入される。

【雑談】

たまに、翻訳しますか？とgoogle chrome表示の時にメッセージがでる。

に修正、または、

を追加のどちらかをすると、メッセージが出なくなる。

googleではlang="ja"は見ていないので使わなくてもよい、などの発言がWeb上にあり、混乱していた。全く困ったものだが、メッセージが出ないことも多いので特に問題はないだろうが、常に上記のどれかを記述しておくのも一つの方策である。

おそらく、googleが関わらないソフトのところで見ているのかもしれない。しかし、私が使っているhtmlテキストエディタ―では初期設定のままだとlang="ja"が付かなかったが、テンプレート設定を変更して、新規htmlファイルには常に書き込まれるようにした。

1.2 HTML5 標準の書き方

HTML5ではHTML構文とXHTML(XML)構文の2種類の文書形式がある。 XHTMLは十分なサポートがされていないブラウザも存在しているかもしれないということで、ここではHTMLのみに限定する。以下に、この例を示す。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>sample title</title>
   </head>
   <body>
      <h2>sampleのホームページへようこそ!!</h2>
      <p>お粗末なホームページですが、・・・・</p>
         ・・・・・・・
         ・・・・・・・
   </body>
</html>

近年はユニコードが一般的になってきた。UTF-8は日本語対応のユニコードで一般的に使用されているものである。 head要素として<meta charset="UTF-8">を記述する。昔に比べて記述方法はかなり簡略化された。簡単に覚えやすくなった！！

1.3 HTML5で強化された数式とグラフィックス

HTML5では、数式とグラフィックス機能が強化された。 MathML(Mathematical Markup Language)とSVG(Scalable Vector Graphics)だ。簡単な数式や簡単な図形はこれで対応できそうだが、複雑な数式や複雑なグラフィックスは果たしてどうか？数式はTex利用が一般的。グラフィックスは様々なツールが存在し、一長一短がある。果たしてSVGの利用価値は？いろいろと疑問のあるところだが、実際に利用しながらその是非を考えてみることにする。

MathML に対応しているブラウザは Firefox / Safari / iOS Safari のみなので、一般的にはMathJaxのサポート*が必要である。

数式例1

\sqrt{x} + \sqrt{2}

MathMLコード


  <math>
    <msqrt>
     <mi>x</mi>
    </msqrt>
    <mo>+</mo>
    <msqrt>
     <mn>2</mn>
    </msqrt>
  </math>

$\sqrt{x} + \sqrt{2}$

数式例2

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

MathMLコード


<math>
 <mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
   <mrow>
    <mrow>
     <mo>-</mo>
     <mi>b</mi>
    </mrow>
    <mo>&PlusMinus;</mo>
    <msqrt>
     <mrow>
      <msup>
       <mi>b</mi>
       <mn>2</mn>
      </msup>
      <mo>-</mo>
      <mrow>
       <mn>4</mn>
       <mo>&InvisibleTimes;</mo>
       <mi>a</mi>
       <mo>&InvisibleTimes;</mo>
       <mi>c</mi>
      </mrow>
     </mrow>
    </msqrt>
   </mrow>
   <mrow>
    <mn>2</mn>
    <mo>&InvisibleTimes;</mo>
    <mi>a</mi>
   </mrow>
  </mfrac>
 </mrow>
</math>

$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$

これに対応するTexコードは、

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

であるから、Texの方が断然良い。 TexをHTML上に表示するツールはあるので、MathMLの利用価値はあまりないように思える。しかし、「本来コンピュータによる数式の意味認識において有利となるよう設計されたものであり、人間がMathMLを直接書いたり編集したりすることは意図していない。」のだそうだ。
まあ、簡単な数式程度ならば、Texから変換するより簡単かもしれない。

*通常MathMLはサポート対象外のブラウザが多いので、
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
をheadかbodyのどちらかに記述すると、認識されるようになる。

上記の設定でもよいが、2024年10月に確認したところ、以下の設定を<head>タグ内に記述するとよい。

<script id="MathJax-script" async
   	 src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

1.3.1 HTMLにおける数式の取り扱い

HTML上で数式をどのようにして表現させるかは、２つの方法がある。
　　1つ目は、Texで作成した数式をHTML上で表示。
　　2つ目は、MathMLで作成した数式をHTML上で表示。
両者とも、MathJaxを利用するとできる。

今後、MathJaxのサポートがどのようになるのかは不明なので、 Tex⇒MathMLの変換ツールが必要になるかもしれない。

このことについては、以下のリンクで議論する。

「Tex数式をHTMLに表示する」へ

1.3.2 SVGについて

古くからSVGファイルは存在していたので、SVGそのものはあまり目新しいものではない。しかし、Canvasにお絵描きする以外で、Web上に絵を書く方法を提供できるようになった。これをインラインSVGと言う。以下のコードを直接HTML上に記述すると、

下図のように表示される。

SVGを使ったアニメーションの例だが、詳しい解説は後述する予定。

1.4 文書作成の基本

基本と思われるもののみを項目別に以下に列挙する。

1.4.1 <p>...</p> paragraph（段落）

パラグラフの概念は日本語文章の段落とほぼ同じであるが、自動的に一行の空白行が入るので、単なる改行とは異なる。

例

HTMLコード

<p>パラグラフとは、読者が理解しやすいように段落を区切るものである。しかし、一つの文を意味するものではなく、複数の文を集めて一つのパラグラフとすることができる。</p>
<p>パラグラフ間には一行空白行が入る。</p>

ブラウザ表示

パラグラフとは、読者が理解しやすいように段落を区切るものである。しかし、一つの文を意味するものではなく、複数の文を集めて一つのパラグラフとすることができる。

パラグラフ間には一行空白行が入る。

1.4.2 <br> 改行

強制的に改行するためによく利用されるが、最近ではパラグラフを使うよう勧告されている。しかし、パラグラフだけでは間延びしたようになってしまうので、強制改行も上手く活用することが得策。

1.4.3 <h★>...</h★>　★=1～6 　見出し

見出し１

見出し２

見出し３

見出し４

上図のように、文字の大きさを指定して見出しを表示する。

これを使うと、暗黙的にセクションと見なされる。

1.4.4 汎用タグ <div>...</div>、<span>...</span>

汎用タグとしてよく使われるものに、<div>タグと<span>タグがある。

<div>は、ブロックレベル要素の一つであり、ひとかたまりの範囲を示し、特別な意味を持たない。そのため、グループ単位でCSSを適用する場合によく多用される。

<span>は、インライン要素の汎用タグであり、文章中のある単語や文に特別な装飾を施す場合によく使われる。

1.4.5 <section>～</section> セクション、など

sectionは、章や節といった役割になる。

<section>
<h3>セクション１</h3>
<p> セクション１の内容です。</p>
</section>

表示→

セクション１

セクション１の内容です。

表示上、セクションがあってもなくても表示は変わらない。セクション以外に、<nav>～</nav>ナビゲーション、 <article>～</article>、<aside>～</aside>などがある。これらの利用法は漠然としていて、今のところ、よくわからん。この部分については後述するとして、とにかく次に進もう。

sectionタグは、MDN Web Docsの「開発者ガイド>HTMLのセクションとアウトラインの使用」に詳しい解説があるが、私自身いまだに今一つピンと来ていない。

sectionそのものは、どちらかと言うと、divタグに近く、かなり汎用的な使い方が認められているようである。しかし、汎用タグdivとは異なり、どちらかと言うと、意味を持たせることに重点があり、h1からh6タグなどの見出しを内部に入れるよう推奨されている。つまるところ、かなりあいまいではあるが、汎用divタグに全体の文脈におけるある特定の役割を演ずる意味を持たせたものがsectionなのかなあ～。 h1～h6の見出しタグで章や節に割り振るという考えもあるので、書物における章や節に該当すると考えてもよいだろう。他の使用例を参考にしながら、理解を深めるしかないようだ。

1.4.6 その他のタグ

リスト表示や図・表、太字やイタリックなど、重要なタグがたくさんあるが、他のネット上で公開されている有用な解説がたくさんあるので、ここでの解説は割愛する。

1.5 frameの廃止とiframe

従来のframeは廃止され、HTML5ではiframeが使用されることになった。そこで、iframeの使い方について勉強する。

とりあえず、簡単なフレーム文書を取り込んでみる。

サンプルコードは、
<iframe src="iexample1.html"></iframe>

表示例

のようになる。

iframeタグでもフレーム分割は可能であるが、<div>タグでも可能である？
どちらを推奨すべきかは今のところよくわからんが、時と場合により使い分けるのが正しいのかな？

追い追い、例題をしながら理解していくことにするかな。ふー、先が長そう。

iframeはインラインフレームのことで、文章中に埋め込むという意味合いだ。昔、画面分割に使っていたframeとは全く意味合いが異なる。ブロック要素の意味合いを持つセクション類で画面分割を考えることが一般的になっているらしい。

2021/05/18 今ではフレーム分割という概念が消失してしまったが、上記の文書を書いている当時は画面分割＝フレーム分割と思い込んでいたため、かなり混乱していた。近年はブロック要素の概念が定着し、どこにでも配置できるようになったため、画面分割＝ブロック要素の配置となっている。

次は、section類による画面分割について

back next