"XML"とは？～だいたい伝わるIT用語解説
you-tnb-298 Grow Knowledge
“HTML”とは？～だいたい伝わるIT用語解説
you-tnb-298
インターネットやウェブサイトについて学ぼうとすると、必ずと言っていいほどHTMLという言葉が出てきます。
ウェブデザインやウェブシステムに携わるならば避けては通れない、HTMLについて解説します。
Contents
“HTML”は言語の一種
“HTML”は「Hyper Text Markup Language」の略で、意味としては「ハイパーテキストを記述するためのマーク付け言語」となります。
マーク付け言語についてはこちら
“XML”とは？～だいたい伝わるIT用語解説
ここで更に謎の単語が出てきました。ハイパーテキストとは何でしょうか？早速解説してきます。
“ハイパーテキスト”とは？
“ハイパーテキスト”は、「文章（テキスト）を超える（ハイパー）もの」という由来のとおり「単独に存在する文章を相互に結び付ける仕組み」のことで、ウェブサイトにある”ハイパーリンク（Hyperlink）“がイメージしやすいのではないでしょうか。
文章の色が変わっていたり画像にマウスをあてると指の形になったりして、そこをクリックすると別のウェブサイトに飛んでいく、あの「リンク」のことです。
ハイパーリンクによって、ある文章から別の文章への参照が可能となっています。
インターネット上にある様々なサイトがハイパーリンクによって結びついた現代のウェブ環境は、このハイパーテキストあってこそ、ということですね。
＞＞こういうの（筆者プロフィール）です
ウェブサイトを記述するための言語
さて、上記を踏まえて改めて「ハイパーテキストを記述するためのマーク付け言語」という言葉を解釈すると、つまりは「ウェブサイトを記述するための言語」と言えます。
今あなたが見ているこのページを含め、すべてのウェブサイトはHTMLという言語で書かれています。
Microsoft Edge・Google Chrome・Mozilla Firefox・Apple safariといった様々なブラウザアプリが”HTML”を読み込んで、皆さんが見ているようなウェブサイトが表示されているのです。
もちろん、タイトルや文章・画像といったコンテンツはウェブサイトの制作者が用意しているものですが、HTMLはブラウザアプリに「このページはこういう内容ですよ」「これは見出しですよ」「ここの範囲が一纏まりになっていますよ」といった文章の構成や指示をしてくれています。
そういった指示とデザイン（CSS）を組み合わせることで、見出しを大きく表示したり文章のまとまり毎に見やすいレイアウトにしたり、画像を表示したりリンクを配置したり、といった様々な表現を実現しています。
HTMLの構成
HTMLは基本的に下記のような構成になっています。実際は、HTMLバージョンによって省略の可否が変わってきたりしますが、概ねこのようなものであると思ってください。「<」～「>」で囲まれたものは”タグ”と呼ばれ、タグで囲まれたものを要素と呼びます。
1<!DOCTYPE >
2<html lang="ja">
3 <head>
4 <title>ヘッダー情報</title>
5 </head>
6 <body>
7 <h2>見出し</h2>
8 <p>コンテンツ情報</p>
9 <ul><li>内容１</li><li>内容２</li>
10 </body>
11</html>大まかに分解して解説します。
<!DOCTYPE html>
ドキュメントタイプ宣言というもので、HTML文章の先頭に記述し、バージョンを宣言しています。上記の場合はHTML5であることを宣言しています。なお表記は似ていますがタグではありません。
htmlタグ
この文章がHTMLであることを示すルート要素です。子要素として、一つのheadタグと一つのbodyタグを持ちます。lang属性を記述することで、ブラウザが言語に応じた表示を行うことがあります。
headタグ
htmlタグを親要素に持ち、主にはtitleタグなど、文章のヘッダ情報を記述します。省略は可能ですが、記載しておいたほうが文章の構成が分かりやすいと思います。
実際のページではscriptタグやmetaタグなどで、あまり表には出てこない様々な情報が記述されています。
bodyタグ
（headタグ同様）htmlタグを親要素に持ち、文章のコンテンツそのものを記載します。
皆さんがウェブページで見ている内容は、このbodyタグの中に記載された情報です。（別ファイルのインポートなどもありますが、ブラウザはそれも含めてbodyタグの中にあるものと解釈しているでしょう）
実際、このページを右クリックして「ソースを表示」すると、上記の構成であることが分かります。
bodyタグの中に記述できるタグは多岐に亘っていて、
- <a>:アンカー
- <p>:段落
- <table>:テーブル
- <div>:ブロック
- <span>:インライン
- <img>:画像埋め込み
- <br>:改行
- <hr>:水平線区切り
- <h1>～<h6>:見出し
と枚挙に遑がありません。
まだまだ沢山のタグがありますのでここでは割愛しますが、実際にHTMLを作成する際は、最適なタグを用いて要素を記述していく必要があります。
基本的なタグはある程度限られるので、実際に作成しながら少しずつ覚えていくのが良いでしょう。
簡単なHTMLの作成
試しに、次の手順でHTMLファイルを作成してブラウザで表示してみましょう。
ファイル作成
新しいテキストファイルに、上記サンプルHTMLの内容をコピー＆ペースして上書保存
拡張子変更
ファイル名を「sample.html」に変更
ブラウザ表示
ファイルのアイコンがブラウザに変わるので、ダブルクリック
普段使っているブラウザが立ち上がって、ものすごくシンプルなページが表示されたと思います。
HTMLはデザインを含まない
HTMLはコンテンツの内容や構造を記述しますが、デザインは含まれていません。「見出しなら大きく」や「リストは黒丸をつけて」は、ブラウザ側がタグに合わせて表示を行っているだけです。
細かな文字サイズ・色の指定やページデザイン・レイアウト、また、カーソルを当てたときに色やデザインが変わったり画像をモーダルウィンドウで表示したり、といった様々な表現は別の言語（代表的なものは、先にも出てきたCSS=Cascading Style Sheets）で記述しています。
ウェブサイトの開発になると、どこまでがデザイナーさんのお仕事になるか、というようにキチンと作業を切り分けなければいけません。
仕事である以上は作業量によって費用も変わってくるので、当然、切り分けも必要になりますね。
もちろんデザインはタグに関連付けられることもあり、検討段階では必ずしも完全に切り離されるわけではないですが、あくまでもHTMLはコンテンツの内容・構造・構成を記述するものであり、デザインやレイアウトを直接表現するものではないことを理解しておきましょう。
ウェブサイトはHTMLで記述されている
どれほど巨大な建造物でも、分解すれば大小さまざまな部品からできているように、どんなに巨大なウェブサイトもHTMLによって記述されています。
複雑な構成であれば当然、記述内容も増えてしまいますが、それをキチンと構造化して記述できるように作られたものがHTMLという技術なのです。
HTMLは手書きでも記述できますが、コーディングに特化したエディターもあります。
記述するべきタグを自動保管してくれたり記述ミスをチェックしてくれたり、またアウトライン表示で全体構成を確認したり、とコーディング作業の効率向上が見込めます。
コーディングの際はツールの活用も検討しましょう。
ABOUT ME
理系大学卒業後、音楽の専門学校へ。ギター・ドラムでの音楽活動を経て、30歳手前でプログラマーへ転身。
ウェブシステム・スマホアプリ・マクロツールなど様々な受託開発を経験した後、メーカー企業で業務アプリケーションの開発に携わる。45歳を過ぎて独立、グローナレッジ設立。
応用情報処理技術者、ウェブデザイン技能検定3級、色彩検定2級、日商簿記2級。登山は富士山経験あり、マラソンはハーフ1h58m。
ウェブシステム・スマホアプリ・マクロツールなど様々な受託開発を経験した後、メーカー企業で業務アプリケーションの開発に携わる。45歳を過ぎて独立、グローナレッジ設立。
応用情報処理技術者、ウェブデザイン技能検定3級、色彩検定2級、日商簿記2級。登山は富士山経験あり、マラソンはハーフ1h58m。
