こんにちは、フロントエンドエンジニアのまさにょんです。
今回は「HTMLとは何か？」に答えていきます。
また、その中ででてくるKeyWordであるハイパーテキストとハイパーリンクの意味と、
マークアップとマークダウンの違いについても解説していきます。
目次
HTMLとは何か？
まずは、HTMLの公式ドキュメントであるMDNから引用します。
HTML (HyperText Markup Language) は、ウェブページ構造を指定する記述言語です。
【 概念と構文 】
HTML 文書は、要素によって構造化されたプレーンテキストです。
要素は、始まりと終わりで対応するタグで囲まれます。
それぞれのタグは山括弧 (< >) で始まり、< / > で終わります。
ただし、imgタグのように、どのようなテキストも囲めない、空タグがいくつかあります。
HTML タグは、どのようにブラウザーが要素を解釈するかに影響する追加情報を属性で拡張することができます。
HTML ファイルは、通常は
MDN: HTML.htmまたは.htmlという拡張子で保存され、ウェブサーバーによって提供され、どのウェブブラウザーでも表示することができます。
上記に記載のとおり、HTMLとは「 HyperText Markup Language 」の略で、
Webページを作成するために開発された Markup言語の1つです。
マークアップ言語の中でもHTMLは、Webブラウザのレンダリング・エンジン(Web画面を作るエンジン)に「文章構造」を伝えるための言語です。
ハイパーテキスト(HyperText)とマークアップ(Mark up)に関する説明は、後ほど詳しく説明します。
HTMLの記述ルール①: タグで囲む
HTMLでは、基本的に「開始タグ」(< >)と「終了タグ」( < / > )で領域を決めて、その中に情報を記述していきます。
ただし、imgタグ(画像タグ)など一部のHTMLタグには終了タグがないので注意が必要です。
HTMLの記述ルール②:コメントは、<!– と –> で囲んで記述する
HTML内で、Web画面に反映させない情報(コメントなど)は、<!– と –> で囲んで記述します。
このように、通常の処理をさせないようにプログラムに認識させなくすることをコメントアウトと言います。
HTMLのSampleファイルを確認する
HTMLの拡張子は、「 .html 」または「 .htm 」です。
基本的に「 .html 」の拡張子で作成することがほとんどです。
次の文章が、Sampleで用意したHTMLファイルです。
<!-- htmlタグ Ver. 開始タグ -->
<html lang="ja">
<!-- これは、コメントです -->
<!-- htmlタグの中に、HTMLの構造を記述していきます！ -->
<!-- HTMLの記述ルール①: タグで囲む -->
<!-- 基本的に「開始タグ」と「終了タグ」で領域を決めて、その中に情報を記述していきます -->
<!-- headタグ Ver.開始 -->
<head>
<meta charset="UTF-8">
<title>HTML-基礎講座🔥</title>
</head>
<!-- headタグ Ver.終了 -->
<!-- bodyタグ Ver.開始 -->
<body>
<h1>HTML-基礎講座を受講するロボ玉🔥</h1>
<!-- imgタグ(画像タグ)に、終了タグはない！ -->
<img src="robotama.png" alt="robotama">
</body>
<!-- bodyタグ Ver.終了 -->
</html>
<!-- htmlタグ Ver.終了 -->ハイパーテキスト(HyperText)とハイパーリンク(HyperLink)の意味とは？
HTMLとは「 HyperText Markup Language 」でしたね。
それでは、HyperTextとは何でしょうか？
まずはMDNで定義を確認していきます。
Hypertext (ハイパーテキスト)
ハイパーテキストは、ほかのテキストへのリンクを含むテキストであり、小説のように単一で線形の流れのものとは対照的なものです。
引用元： MDN: Hypertext (ハイパーテキスト)
なるほど、Linkを含んだTextのことを「HyperText」と言うようです。
また「小説のように単一で線形の流れのものとは対照的なものです」と記述されています。
たしかに、紙媒体の小説ではWebページのようにLinkをたどって、自動で他のページに移動することはできないです。
ただ、もう少し詳しい解説を見ていきましょう。
ハイパーテキスト 【hypertext】
ハイパーテキストとは、コンピュータを利用した文書作成・閲覧システムの一つで、
文書内の任意の位置や要素に、
他の文書への参照（所在情報や識別情報）を埋め込み、複数の文書を相互に結びつけたもの。
そのような他の文書への参照情報を「ハイパーリンク」（hyperlink）あるいは単にリンクという。
ハイパーテキストを拡張し、文書に留まらず画像や図表、音声、動画、3次元グラフィックスなど
様々な情報資源間で相互に関連付けや参照などが行えるようにしたものを
「ハイパーメディア」（hypermedia）という。
ハイパーテキストシステムは電子辞書や百科事典ソフトのように
一つのソフトウェアやコンピュータの内部で完結しているものと、
通信ネットワークなどを介して複数のコンピュータに分散する文書データにまたがって構築されるものがある。
その最も有名な応用例は、インターネット上に分散する膨大な文書群を
ハイパーリンクによって結んだ世界規模の開放型ハイパーテキストシステムである
「Web」（ウェブ、WWW：World Wide Web）である。
【 ハイパーメディア (hypermedia) 】
米国の学者テッド・ネルソン（Theodor Holm Nelson）氏が著書「Computer Lib」において1974年に提言した情報表現方法で、
文字情報主体のハイパーテキストを画像や音声などを含めたマルチメディアに拡張した概念。
ハイパーテキストは互いに関連する情報を含んだ文書同士を相互に関連付ける（リンクする）ことで、
読者が関連する情報を次々に辿っていけるようにしたシステムだが、
ハイパーメディアでは、文字情報に加えて画像、音声、動画などを含む様々な種類の情報を扱う機能を追加し、
これらを相互に対応付けた情報の集合体を表現するシステムである。
「マルチメディア」という概念に近く、
実際、マルチメディアシステムはハイパーメディア的な仕組みを内包している場合が多いが、
ハイパーメディアという語は、メディアを複合するという意味よりも、
文書や情報が相互に関連付けられアクセスが容易になっているという点に力点が置かれている。
発表された当時は、コンピュータで文字以外のメディアを扱うことは処理性能やデータ量の点から難しく、
未来的な空想上の概念でしかなかったが、
現在では、HTMLやHTTPなどの技術を組み合わせて、
Web（WWW）として世界規模のハイパーメディアシステムが構築されている。
また、企業の情報システムやパッケージメディアも、
ハイパーメディアとして構成されることが当たり前になってきた。
引用元： ハイパーテキストとは – 意味をわかりやすく – IT用語辞典 e-Words
上記の引用でかなり意味が、はっきりとわかってきました。
HyperText (ハイパーテキスト)は、他のWebリソースへの参照情報を埋め込み(HyperLink)、複数のWebリソースを相互に結びつけたものです。
つまり、ハイパーテキスト(HyperText)は、ハイパーリンク(HyperLink)を埋め込むことができる高機能なテキストなのです。
ちなみに、このWebページでも見かける青く光っているLinkはもちろん「HyperLink」です。
このようにWeb上のページには「HyperLink」(Link)が埋め込まれて、Web上のリソース同士が相互に繋がっています(Linkされています)。
こうしてWebは、ハイパーテキストとハイパーリンクによってネットワーク上になって繋がるようになったわけです。
今でこそ、いろいろなことがWeb上でできるようになっていますが、
最初の頃のWeb(Web1.0)は、マークアップ言語で作られた文章によるやり取りだけでした。
今は、Web上で動作する「プログラミング言語」である「JavaScript」やServer側のスペックやネットワークのスペックなどが進化して、Web上でできることが広がっています。
文章、画像、音声、動画など、さまざまな情報がWeb上で配信されるようになっています。
1990年代と違い、Webは進化して「ハイパーメディア (HyperMedia)」になっていますね。
また、『IT用語辞典』の「HyperLink」の内容も参考になったので、掲載しておきます。
ハイパーリンク 【hyperlink】
ハイパーリンクとは、文書データなどの情報資源の中に埋め込まれた、他の情報資源に対する参照情報。
また、そのような参照が設定された、文字や画像など文書内の要素のこと。
単に「リンク」（link）と略して呼ぶことが多い。
ハイパーリンクは参照先の識別情報や所在情報などを特定の記法で記述したもので、
コンピュータシステムによって参照先を容易に呼び出したり照会したりできるようになっている。
このようなハイパーリンクの仕組みによって様々な文書などの情報資源を相互に結びつけた情報メディアを
「ハイパーテキスト」（hypertext）あるいは「ハイパーメディア」（hypermedia）という。
現代において最も身近で最も普及しているハイパーテキストシステムは、
インターネット上に構築されたWeb（ウェブ、WWW：World Wide Web）であり、
単にハイパーリンクといった場合はWebページなどWeb上の様々な情報を相互に結びつけるリンクのことを指すことが多い。
【 Web/HTMLのハイパーリンク 】
Webページでは文書の構造化に用いるHTMLの記法に従って、
ページ内の構成要素から他のWebページなどインターネット上の情報資源へハイパーリンクを設けることができる。
HTMLではa要素（アンカータグ）で文字や画像などにリンクを設定でき、
例えば、<a href=“リンク先URL”>リンクテキスト</a> のように記述すると、
リンクテキストで示された文字列がハイパーリンクとなり、
飛び先としてhref属性で記述したリンク先URLが設定される。
【 Webページ以外のハイパーリンク 】
WebページやWebブラウザ以外にも、
文書内などにWeb上の資源へハイパーリンクを設け、参照可能にしているソフトウェアやシステムなどがある。
例えば、Microsoft ExcelなどMicrosoft Office製品の多くは、
文書内の要素にハイパーリンクを作成し、Webページなどを指し示すことができるようになっている。
引用元： ハイパーリンクとは – 意味をわかりやすく – IT用語辞典 e-Words
マークアップ言語(Markup Language)とは？
WebサイトやWebアプリの基本構造は「HTML」(マークアップ言語の1つ)によって作られています。
それでは、そのマークアップ言語の定義を確認していきましょう。
HTMLやCSS、JavaScriptのドキュメントであるMDNから引用します。
マークアップ言語は、テキストを定義し提示するために設計された言語です。
HTML (HyperText Markup Language) は、マークアップ言語の一例です。
HTML ファイルなどのテキストファイル内で、
要素はコンテンツのその部分の目的を説明するタグを使用してマークアップされます。
【 意味マークアップ 】
文書の区間をプログラムがどのように扱うべきかでラベル付けします。
例えば、 HTML の
引用元： MDN: markup (マークアップ)<td>は HTML の表でセルを定義します。
MDNに記述のあるとおり、マークアップ言語は「テキストを定義し提示するための言語」です。
例えば、マークアップ言語の中でもHTMLは、Webブラウザのレンダリング・エンジン(Web画面を作るエンジン)に「文章構造」を伝えるための言語です。
マークアップ(Mark up)とは、英単語で「印をつける」と言う意味です。
HTMLではタグ(< > や < / >)を使って「印を付ける」,「意味を付ける」ように記述します。
マークアップ言語の種類
マークアップ言語には次のような種類があります。
- HTML
- XML
- XHTML
- SGML
興味があったら調べてみてください。
XMLあたりは、実務で使うこともその内でてくるかもしれません。
マークアップ言語とプログラミング言語の違いとは？
WebサイトやWebアプリで考えると、
HTMLはマークアップ言語ですが、JavaScriptはプログラミング言語です。
マークアップ言語は文章の意味合いの分類、そして文章の構造化に使われます。
プログラミング言語のような計算処理は行われず、書かれた内容をそのままコンピューターが読み込むのがポイントです。
そのため、動きのない静的な言語になっています。
動きのある処理(動的な処理)とは、ユーザーのアクションによって、配信されるHTMLの記述内容が変化するような処理をすることです。
わかりやすいように、Amazonでのショッピングを考えてみましょう。
- ユーザーの新規登録やログイン処理をする
- ユーザーがカートに入れた商品データを使って、カート内の金額を自動で計算する
- ユーザーが購入したデータやお気に入り登録したデータをデータベースに保存するための通信処理をする
などなど、これらはユーザーの入力情報によって、動的にWebページをUpdateしたり、バックエンドにあるServerやDatabaseとやり取りをしたりします。
上記のようなマークアップ言語では実現できない「動的な処理」を実装できるのがプログラミング言語です。
テキスト情報をブラウザなどのシステムに伝えるために定義できるようにしている「静的な言語」が「マークアップ言語」であり、
複雑な計算処理や通信処理など「動的な処理」をする言語が「プログラミング言語」だと理解しておくといいと思います。
マークアップ言語だけでも静的なWebサイトは作れますが、モダンなWebサイトやWebアプリを開発するためには動的なプログラミング言語が必要です。
マークアップ言語とマークダウン言語の違いとは？
「マークアップ言語」をより簡単に記述できるようにした「マークダウン言語」というものがあります。
「マークダウン言語」は「マークアップ言語」より記述がシンプルになるように設計されています。
例えば、、、
- 最初に # を記述すると見出しになる
- 半角スペースを2個入力で改行する
といったように、マークアップ言語よりシンプルな記述で文章に意味合いを持たせられるようになっているのがポイントです。
ただ「マークダウン言語」で記載した言語は構文変換されて、最終的に「マークアップ言語」の記述に変換されて読み込まれています。
そのため、マークアップ言語との併用も可能で、必要な部分はマークアップ言語を混ぜて記述を行うといった操作も可能です。
Webページの構成要素(HTML, CSS, JavaScript)
Webページはたいていの場合、次の3つで作られています。
- HTML: コンピュータが解読するための文章構造
- CSS: 人間がわかりやすいような見た目を作る
- JavaScript: Webページに動きを与える(動的な処理を実装)
HTMLとCSSは「本」で例えられるたりします。
HTMLは、タイトル, 目次, 見出し, 段落などの文章構造を定義する言語であり、
CSSは、表紙のデザインや中身の文章の配置(レイアウト)などの見た目を調整する・整える言語という関係性があります。
HTMLの実行準備・環境構築をする
HTMLを閲覧するもの(ブラウザ)
作ったHTMLを確認するためには、ブラウザが必要です。
ブラウザは、Edge, Safari, Google Chrome, Fire Foxなどがあります。
お好きなものを準備してください。
個人的には、Google Chromeが一番好きです。
エディター(HTMLを書くもの)
HTMLを記述するには、エディターが必要です。
Visual Studio Code、サクラエディタ、Atom、メモ帳、などエディターはいろいろありますが、
使いやすく、拡張機能も充実しているVSCodeが一番のおすすめです。
こちらの記事で、HTMLの実行方法・画面プレビューについてまとめています。
HTMLの開発で困ったら、まずは「MDN」
MDN がHTMLやCSS、JavaScriptの公式リファレンスとなります。
HTMLの開発で困ったときは、MDNを見たり、Google検索で情報を調べて解決策を見つけみましょう。
おすすめ書籍(HTML&CSS編)
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
参考・引用
- MDN: HTML
- MDN: Hypertext (ハイパーテキスト)
- ハイパーテキストとは – 意味をわかりやすく – IT用語辞典 e-Words
- ハイパーリンクとは – 意味をわかりやすく – IT用語辞典 e-Words
- MDN: markup (マークアップ)
- マークアップ言語とは？プログラミング言語との違いやマークダウン言語も解説
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
