2022-12-12

Pって何?

人生で初めてにHTMLに触れてからン十年たちました。

h1 とか p とかのかんたんなタグで囲むと文書ができて、FTPするとそれがいっきに全世界から見られる! のが不思議でおもしろかった...。

そこで使った要素名の p とか h1 とかは頻繁に使うので覚えやすかったですが、ul と ol のちがいとか、dl, dt, dd の組み合わせとかはいつも使うわけではないので覚えられず困りました。

そこで当時いろいろと要素名の元になった英単語を調べました。

きょうはその中から10パターンほど紹介します(最近コーディングしないのでうろ覚え)。

何かの役に立つのだろうか...。

※ まちがいやあいまいな部分があると思います。


1. <!doctype html> は「文書型宣言」なので、doctype は document type だなぁというのはわかりやすいです。


2. <meta charset="utf-8"> の meta は、「~の後の」「~を超えた」「一段階上の」っていう意味があり、たとえば、メタバース(metaverse)は universe(宇宙・この世界)を「超えた世界」っていう感じ。

metaタグは、作成中のHTML文書「についての」情報ってことです。


3. h1, h2...(見出し)の h は heading (見出し)の h。

headerにも「見出し」っていう意味があるけど、どっちの h なのか...。


4. p は paragraph(段落)の p。

pで囲むと、ブラウザが上下に一行空けるのは、段落の塊(かたまり)を示すため。


5. 段落内での改行の br は?

ワープロソフトとかで文字列を途中で改行すること(=強制改行)こと line break といいます。

br は break (折る)、つまり文字列をそこで折り返すっていうことらしい。

ブレイクダンス(Break Dance)の break か。


6. hr

いまはあまり使われていないと思う(たぶん)hr は、CSSがないころ、横線(横罫線)を表示するためによく使っていました。

※ いまは CSS の borderプロパティで線引けますから。

Horizontal Rule (ホラゾンタル・ルール)の略です。Horizontal は「水平の」、Rule は「罫線」。

中学のとき使っていた教科書が New Horizon (ニュー・ホライズン)。 Horizon は「地平線・水平線」なので「新しい地平線」って意味だったのか。

そういえば水平線の見える夕陽の風景がその教科書の表示だったような。

(まだ、ニュー・ホライズンって教科書あるみたいです。)

あと、高校時代に舞台ちょっとやってて、舞台用語で「ホリゾント」っていうのがあったけどこれも同じ語源でしょう。


7. table関係。

「一覧表」を英語で table。

行を作る tr は table row(ロウ)。 row は「行」、横に一列に並んだもののこと。

セルを作る td は、table data。

th は table heading かな (table header?)。

それからセルを横に複数セル分結合するときの属性 colspan は column span。

column はもともとは「柱」。表でいうと「列」、つまり縦一列のこと(”柱” っぽい)。

span は「幅」なので、colspan は「列?個分」の横幅を指定ってこと。 

セルを縦に結合するのは rowspan、つまり「行?個分」かを指定。


8. リスト関係。

箇条書き(番号の付かないリスト)は ul、連番(番号の付くリスト)は ol。

覚えにくい...。

調べてみたら、ul は unordered list、 ol は ordered list だという。

order は「命令する」「注文する」の他に、「並べる」「順序づける」って意味がある。

ordered は ”過去分詞” で、受け身の意味になって「順序づけられた」って考えると、ordered list は「順序付けられたリスト」(=順番のついたリスト)。


unordered list の un は unhappy の un、つまり「否定」の意。

「アン・アン・アン、とっても大好き...」は「とっても大好き」を否定していたのか...。

で、unorderd list : 順序のないリスト。


リストの項目を指定する li は list item (リストの項目)です。


9. 定義リスト dl, dt, dd

最大の難敵...。 丸暗記では覚えられない(んじゃないかな)。

そもそも「定義リスト」っていう日本語もよくわからない。

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>

って書くと

HTML
    HyperText Markup Language

みたいに表示される。

つまり、「HTML」っていうのは「HyperText Markup Lanuguage」のことだよ、って感じです。

HTMLが「説明を受ける用語(=定義される用語)」で、HyperText Markup Language が、その用語("HMLT")の説明(=定義)になっている、ということ。

というのが「定義リスト」です。「用語」と「その説明」です。


全体を dl で囲みます。

dl は definition list。 definition が「定義」。

定義される用語を dt で囲みます。 

dt は definition term。 term は「用語」。

その用語の説明(定義)を dd で。

definition description、「定義の記述」。


というのを知ってから dl, dt, dd を間違えなくなりました!

まあ、必要になったらググればいいか。


10.  a href

リンクの a href。

a は anchor(アンカー)。

anchor は「(船の)錨(いかり)」です。


href は、hypertext reference(ハイパーテキスト・リファレンス)。

hypertext は従来の(紙の)文書(text)を「超えた」(hyper)な文書のこと。

一つの文書を「超えて」別の文書へとつながっていく文書。

つまりWebページ(HTML文書)のこと。

reference は「参照文献」「紹介先」。


a href で、その箇所に「錨」を置いて、そこから参照文献(リンク先のページなど)を指定する、という感じ。


11. その他

div: division「区画」。

src: source 「元になるもの」。 <img src="..."> の src。

alt  : alternative(オルターナティブ)。「別の選択肢」「代案」。画像の alt 属性。

...


(ここまで)