*

HTMLの思想って、おもしろい。

公開日: : 最終更新日:2013/05/14 徒然

私は、HTMLのことをあんまり知りません。しかし、HTMLの思想を本当にすごいと思うので、素人目線から、その思想のすごさを語ってみます。ピント外れだったら、ごめんなさい。

1. HTMLは文章を構造化する

HTMLは、”Hyper Text Markup Language”の略です。この名が示すとおり、HTMLとは、テキストを”markup”するための言語です。つまり、HTMLの役割は、文章に意味を付与して、文章を構造化することにあります。

HTMLでは、文書の一部を”<“と”>”で挟まれた「タグ」と呼ばれるもので囲うことで、文章に意味づけをしていきます。この意味づけを、”markup”というそうです。つまり、タグによって文章に意味づけをすることで、文章を構造化することが、HTMLの思想です。

2. 文章を構造化するための試行錯誤と、HTMLが示す解決策

(1) 文章を構造化する試みは、しばしば失敗する

文章によって他者に何かを伝えるためには、文章を構造化し、それを読み手に伝えることが有益です。「ここが問題設定だよ」「ここが理由だよ」「ここが結論だよ」「これは見出しだよ」「ここは引用だよ」などがはっきりしている文章は、わかりやすい文章だと思います。

ですから、文章の書き手は、どこが問題設定で、どこが結論でどこが理由なのか、あるいは、どこが見出しでどこが引用なのかを、読み手に伝えようとします。

普通の文章では、書き手は、レイアウトによって、文章の構造を伝えようとします。見出しであることを示すためには、フォントを変えたり、文字のポイントを大きくしたり、アンダーラインを引いたりします。段落を示すためには、頭の文字を一文字分下げたり、一行開けたりします。引用であることを示すためには、左側に線を引いたり、斜体にしたりします。

しかし、レイアウトでの意味づけの場合、読み手が、書き手の意図通りに意味内容を受け取ってくれるとは限りません。書き手としては、できる限り工夫をするわけですが、それでも伝わらないことも多いと思われます。

しかし、この試みは、しばしば失敗します。理由のつもりで書いたのに、結論だと捉えられてしまったり、自分の考えを強調して書いたつもりが、引用だと勘違いされたりします。

(2) HTMLが示す解決策

HTMLを使えば、この問題を、シンプルかつ大胆に解決することができます。HTMLは、タグによって文章の一部を囲うことで、その部分がどのような意味を持つ部分なのかを示すことができるからです。

3. 実例

たとえば、私が書いた以下の文章に、タグで意味づけをすると、以下のようになります。

伊坂幸太郎『終末のフール』の中の、私が好きな言葉たち【一部ネタバレあり】 « 単純作業に心を込めて

—以下、タグ付の例示—

<大きい見出し>3.好きな言葉いろいろ</大きい見出し>
<小さい見出し>(1)「明日死ぬとしたら、生き方が変わるんですか?」「あなたの今の生き方は、どれくらい生きるつもりの生き方なんですか?」</小さい見出し>
<引用元の表示>「鋼鉄のウール」より<ページ番号>(p.220~)</ページ番号></引用元の表示>

<段落>『終末のフール』の中で、私が一番好きな一節です。ちょっと長いけれど、引用します。苗場さんというキックボクシングのチャンピオン(ローキックと左フックが得意)と、ある映画俳優と(饒舌さが売りの、派手な俳優)の対談の場面。</段落>

<引用>

<台詞>「苗場君ってさ、明日死ぬって言われたらどうする?」</台詞><段落>俳優は脈絡もなく、そんな質問をしていた。</段落>

<台詞>「変わりませんよ」</台詞><段落>苗場さんの答えはそっけなかった。</段落>

<台詞>「変わらないって、どうするの?」</台詞>

<台詞>「ぼくにできるのは、ローキックと左フックしかないですから」</台詞>

<台詞>「それって、練習の話でしょ? というかさ、明日死ぬのに、そんなことするわけ」</台詞><段落>可笑しいなあ、と俳優は笑ったようだ。</段落>

<台詞>「明日死ぬとしたら、生き方が変わるんですか?」</台詞><段落>文字だから想像するほかないけれど、苗場さんの口調は丁寧だったに違いない。</段落><台詞>「あなたの今の生き方は、どれくらい生きるつもりの生き方なんですか?」</台詞>

<中略>

<段落>苗場さんがランニングをしている写真だ。深夜の公園を一人で、黙々と走る姿で、地味で動きのない構図だったけれど、その静寂と苗場さんから立ち昇る湯気のような熱気が、美しく捉えられている。恰好いい、と思うと同時に、「できることをやる」という言葉がまた甦った。黙々と、不器用に、でも、やることをやる。それしかないだろうに、と苗場さんが走っていた。他にどうするって言うんだ、と。自分でも気づかないうちに、涙を流し、写真を抱えたままゆっくりと横になり、眠っていた。</段落>

</引用>

<段落>この一節ばかり、もう何十回も読んでいます。なんでこの一節がこんなにも好きなのだろうかと考えてみた結果、「苗場さん」という人物の魅力もさることながら、「できることをやるしかない」という姿勢が好きなんだろうという結論に至りました。</段落>
<段落>自分にできることは、●●だけである。だから、●●をやるしかない。他にどうしようもないし、これでいい。</段落>

<段落>私は、この姿勢をかっこいいと思うのと同時に、とても有用なものだと考えています。自分にできることを把握して、それをやる。自分にできることをやるしかないし、それでいい。私がそうありたいと思っている姿勢は、まさにこれです。</段落>

<段落>「鋼鉄のウール」の中のこの一節は、私が理想とするこの姿勢を、「苗場さん」という魅力的な人物を描写することによって、ばっちり表現しています。</段落>

—タグ付の例示、ここまで—

このように、文章の各部分にタグを付ければ、文章の特定箇所が持つ意味を、誤解のない形で、はっきりと示すことができます。これがすごい。

4. まとめと参考文献・参考サイト

(1) 私がすごいと思うHTMLの思想 まとめ

HTMLは、文章が持つ意味構造を、ダイレクトに指定します。レイアウトに頼ることなく、文章のどこがどのような意味を持つのか、文章のどの部分が文章の構造の中で、どのような位置づけにあるのか、これを、直接かつシンプルに示します。

このことを、私は、とてもすごいと思います。

以上、私がすごいと思うHTMLの思想について語ってみました。HTMLの思想に共感する者として、自らHTMLを書く機会があれば、できる限り、意味づけを示すタグを使おうと思います。

(2) 参考書籍・参考サイト

なお、HTMLの思想については、神崎正英氏による、以下の書籍とサイトがとてもわかりやすいです。

Amazon.co.jp: ユニバーサルHTML/XHTML: 神崎 正英: 本

ユニバーサルHTML/XHTML

30分間(X)HTML入門 — ごく簡単なHTMLの説明

ごく簡単なHTMLの説明

スポンサードリンク

関連記事

no image

コンセントからUSBポートへ充電するためのアダプタを買いました。

1.コンセントからUSBポートへ充電したい 最近、急に、USBポートを利用して充電する機器が多くな

記事を読む

no image

好きが増えるにつれて増えるのはなんだろうってお話

1.好きが増えるにつれて、嫌いも増えるのか? この記事を読みました。 好き嫌いの少ない自分が嫌い

記事を読む

no image

人生で大切なことの多くは、ドラゴンクエストから学んだ

1.はじめに この冬、スマートフォン版のドラクエが登場します。今の自分の生活を振り返ると、ドラクエし

記事を読む

no image

トップダウン的アプローチとボトムアップ的アプローチ

1.物事を実行する2つのアプローチ 物事を実行するアプローチには、トップダウン的アプローチと、ボト

記事を読む

no image

歯のメンテナンスには、定期的な歯科検診と毎日のデンタルフロス

1.虫歯がなくても、歯のメンテナンスはした方がよい 私には、虫歯がほとんどありません。生まれつき、歯

記事を読む

no image

『7つの習慣』とGTD 〜スケジュール管理のトップダウンとボトムアップを考える〜

1.はじめに物事に対するのアプローチを、トップダウン的アプローチとボトムアップ的アプローチに分ける

記事を読む

no image

インプットとアウトプットの順番、深呼吸における「吸う」と「吐く」の順番

1.深呼吸のやり方 深呼吸における「吸う」と「吐く」の順番は、どちらが先でしょうか。 「吐く」が

記事を読む

no image

ScanSnap S1500を買って、Evernoteのプレミアムアカウント1年分をもらいました。

1.ScanSnap S1500購入 ScanSnap S1500を買いました。 ScanS

記事を読む

no image

スマートフォンからのエクスプレス予約には、「簡単アクセス」が便利

1.スマートフォンからエクスプレス予約 エクスプレス予約を便利に使っています。パソコンから予約をす

記事を読む

no image

疲れにくいメガネフレーム LineArt CHARMANT

1.JINS PCを作って実感した、LineArt CHARMANTのよさ (1)JINS PCの

記事を読む

スポンサードリンク

スポンサードリンク

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

no image
WorkFlowyを「書き上げる」ための道具として機能させるための、2つの条件・3つのイメージ

Tak.さんのTweetに触発されて。 WorkFlowyやOmniO

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のサラリーマンです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑