本文を書くための必要最低限。HTMLのメインコンテンツは文章である。
前回
前回、HTML文書はつくれた。今回はいよいよメインコンテンツを作る。最低限の要素のみ。
ヘッディング
見出しをつくる要素。
<h1><h2><h3><h4><h5><h6>
これをみて「バカじゃないの？」と思う。<h>見出し</h>でよくね？ だってHTMLは木構造なんだし、その木構造の階層位置によって何レベルの見出しであるか算出すべきなんじゃないの？ と思った。でも、WHATWGとW3Cで主張が異なる。WHATWGは<h1>だけ使ってレベルは階層の深さで読み取るものだという。けれどW3Cは階層の深さに関係なくレベルにあったタグを使えという。一体どっちだよ！
現在、HTMLはWHATWGが管理することになったので、WHATWGの主張を聞けばよいはず。だが、昔のブラウザに対応することを考えた場合、同じコードで同じように表示するためには、結局、レベルを使い分けるしかないと思われる。
よく考えてみれば、どちらの場合もそれぞれ長所と短所がある。<h1>だけ使う方はレベルの深さをタグでハードコーディングせずに済む。レベルの使い分けは、セクションの階層を作らずともレベル分けできる。どちらも楽に書くことにつながる。なので両方の書き方どちらも解釈してくれるのが一番うれしい。
階層構造とか見出しや本文など、あれこれごちゃまぜになっている。だからHTML文書はぐちゃぐちゃで可読性が最悪。Markdownなどの軽量マークアップ言語で書きたくなるのは当然の帰結。
ヘッディングでレベルづけ
<h1>この文書の見出し</h1> <h2>大見出し</h2> <h3>中見出し</h3> <h4>小見出し</h4> <h5>細見出し</h5> <h6>微見出し</h6>
ネストせずに済む。でもレベルを数値で指定せねばならない。
セクショニングでレベルづけ
<section> <h1>この文書の見出し</h1> <section> <h1>大見出し</h1> <section> <h1>中見出し</h1> <section> <h1>小見出し</h1> <section> <h1>細見出し</h1> <section> <h1>微見出し</h1> </section> </section> </section> </section> </section> </section>
ネストせねばならない。でもレベルを数値で指定せずに済む。
<hgroup>は使わない
hgroupは使わない。見出しのh1〜h6をグループ化する要素なのだが、解析に問題が生じうる。MDN参照。
段落
文書は見出しと段落でできており、段落には本文がある。段落とは文章の単位だ。ひとつの話題について書かれた文章を、ひとつの段落としてマークアップする。
本文こそ、まさに文書におけるメインコンテンツだ。<p>要素はHTML文書の雛形であり王様とよぶべき要素である。
<p>本文。</p>
<p>はその要約である<h1>とともに<section>要素に含まれるはず。以下のように。
<section> <h1>見出し１</h1> <p>本文。</p> </section> <section> <h1>見出し２</h1> <p>本文２。</p> </section>
段落とは、複数の文章でできている。実用文ならパラグラフ・ライティングで書かれる。つまり段落のはじめの文は要約文であり、それ以降の文は要約をくわしく説明した詳細文になる。
<p>要約文。詳細文。詳細文。...</p>
話題がかわると次の段落へうつる。
<p>話題１。要約。詳細。</p> <p>話題２。要約。詳細。</p>
文章とは、一つ以上の文である。文とは、日本語なら句点までの文字列だ。文法や品詞のような概念がある。もはやHTMLとは直接関係ないので割愛する。
水平線
段落レベルでの区切りをあらわす。たとえば物語の場面変化や、参考書のセクション内で別の話題に移行するなど。
<p>放課後、山田は教室を後にした。</p> <hr> <p>自宅に帰ると早速ゲームした。</p>
閉じタグ不要。以下だけで使える。
<hr>
改行
なんと、HTMLファイルでは改行するために専用のタグを書かねばならない。
<p> 一行目。<br> 二行目。 </p>
もし<br>がなければ連続して表示される。面倒くさすぎる。だからMarkdownなどの軽量マークアップ言語がある。もっとも、それでもスペース2個という、プレーンテキストと異なる見た目になってしまう。もっとプレーンテキストと同じような見た目で読み書きできる書式はないものか……。
指定位置で改行されることは必ずしも最適とはかぎらない。改行にはもう一種類あって「折り返し」がある。画面の端まで到達すると自動的に次の行に改行する機能だ。これと組合せたとき、折り返された直後に改行<br>があると空行になってしまう。とはいえ、それを考慮してあらゆる条件下において最適に表示することなど不可能。なので諦めるしかない。
折り返し地点の指定
<wbr>
My <wbr>name <wbr>is <wbr>ytyaru.
おもに英語圏で使う。英語は複数のアルファベットを組合せた単語でひとつの意味をなす。もし単語の途中で改行されてしまうと、別の単語になったり、意味がわからなくなってしまう。そこで単語単位で折り返しされるようマークアップするのが<wbr>だ。
日本語は１文字で意味がわかる漢字を使っている。もちろん二字熟語などもあるが、その途中で折り返しされたところでそこまで違和感はない。
というか、単語ごとに囲わねばならないのは苦痛すぎる。そんな事やってられないと思うのだが、実際どうなの？ まあ日本人の私には関係ないよね？
整形済みテキスト
<pre> 一行目 二行目 </pre>
これで<br>を書かずとも、改行コードのとおりに改行されたテキストが表示される。ふつうこのタグにはソースコードなどを入れる。メインコンテンツである本文を書いたりはしない。本文は<p>タグで書く。なのでやっぱり<br>とは無縁でいられないのだった。
コード
<code> console.log('Hello JavaScript !!'); </code>
ソースコードであることを示す。よく<pre>と併用される。
<pre> <code> console.log('Hello JavaScript !!'); alert('Hello JavaScript !!'); </code> </pre>
文章の構造化
文章を構造化するとき、各要素は以下のような包含関係になる。
<article><section>,<h1><hr><p><br>- 要約文
- 詳細文
<hr>だけは他の要素を内に入れたりしないので注意。
段落のなかで改行したいときは<br>を使う。ふつう段落はパラグラフ・ライティングで書かれる。そのとき段落の最初にくる文は要約文である。つぎにその詳細文がくる。ひとつの話題につき、ひとつの段落をつかうのが基本。ただし同じ話題でも細かい描写でありながら、視点がかわるときは改行を入れたくなるだろう。行はじめの字下げは全角スペースでやればいい。
所感
これで単純なテキストだけは書けるようになったはず。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
