HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language)とは

HTMLとは(Hyper Text Markup Language)の略称で、
直訳すると『ハイパーテキストに目印をつける言語』となります。
プログラム言語とは違い、WEBページを作成するために開発されたマークアップ言語と言われるコンテンツの構造を決めるもので、後述するタグと呼ばれる要素の集まりで構成されます。
WEBページを形成する骨組みであり、世界中で公開されている
ほとんどのWEBページは、HTMLで作成されています。

HTMLの役割

タグと呼ばれる半角英数字で構成される文章コードで、ハイパーリンクの設置、画像や動画ファイルの埋め込み、文章の論理構造化などができます。
また、ある程度構成に自由度があり、様々な表現が可能となっています。
テキストの各部に目印をつけ、その部分がどんな要素なのかを明確にすることで、コンピュータにその文書の構造を理解してもらうのが目的です。
具体的には

  • 検索エンジンがWEBページの構造を把握して解析
  • ブラウザがWEBページ内の各要素の意味を理解して閲覧を容易にする

などが目的です。
このようにコンピュータに理解できるように文書の構造を定義することこそが、HTMLの最も重要な役割と言えます。
そのテキストの各部に目印をつけるための言語がHTMLタグです。
また、ハイパーリンクとは、WEBページで下線の付いたテキストなどから
別ページへ移動する、いわゆるリンクと呼称されるものです。

HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、
情報を整理するという特徴があります。

ハイパーテキストとハイパーリンク

ハイパーテキストとは、例として以下のようなことを行うために用いる言語のことを指します。

  • WEBページから別のページにリンクを張る
  • 画像<img>、動画<video>、音声<audio>などのデータファイルを埋め込むことが可能

また、ハイパーリンクとは、WEBページで下線の付いたテキストなどから別ページへ移動する、いわゆるリンクと呼称されるものです。
HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。

HTMLの基本要素

HTMLを形成するタグにはブロックレベル要素インライン要素に分別されます。それぞれにタグの記入をする際のルールがあります。

【ブロックレベル要素の基本形】

ブロックレベル要素は見出しや段落など文書を構成する基本要素で、開始タグと終了タグで囲むことで一つの塊と認識されます。
以下のようなものがブロックレベル要素になります。

  • <p>
  • <address>
  • <center>
  • <div>
  • <dl>
  • <ol>
  • <ul>
  • <h1~h6>
  • <form>
  • <table>

■ブロックレベル要素のみで構成される例

  <p>  This is a pen.  </p>
(開始タグ) (コンテンツ)  (終了タグ)

【インライン要素の基本形】

インライン要素は、文章の一部として扱われ、通常はブロックレベル要素の
中に用いられる要素
です。
そのため、ブロックレベル要素に分類されるタグの外側に記載することはできません。
以下のようなものがインライン要素として用いられます。

  • <a>
  • <b>
  • <br>
  • <font>
  • <i>
  • <img>
  • <imput>
  • <q>
  • <s>
  • <small>
  • <span>
  • <u>

インライン要素を含めた構成例

  <p>   <img src="car.jpg" alt="愛車の写真">   </p>
(ブロック要素)     (インライン要素)     (ブロック要素)
 開始タグ      今回はイメージタグ      終了タグ

HTMLの発祥~改変

HTMLは1989年、ティム・バーナーズ・リーが提案し、開発されました。
ただし、当時のHTMLはメニューや一覧機能を備えた高機能な文章作成ツールとして開発されました。
その後、言語として定義されたのは、1990年代以降になり、1993年にHTML1.0が発表され、その後97年に4.0、99年に4.01、2014年にHTML5、
そして2016年にHTML5.1が勧告され、現在に至ります。

HTMLへの認知度は、まだまだ低い

企業のWEBへの関心は年々高まっていますが、HTMLに関しては、
裏方的立ち位置であり注目されにくい為、関心はあまり高くありません。
そのため、担当者に依存されやすく、理解が及ばないことも多々あります。
ある程度自由度があるHTMLは、クオリティの低い状態でも公開できてしまいますが、その状態のままではSEO・表示速度・更新の簡易さなどに悪影響を与えてしまいます。
コスト重視で作成された質の低いHTMLでは、サイトへの流入率などが低くなってしまい、結果的にWEBサイトの運営コストを圧迫しかねませんので、構成の際には一定の運営コストを確保する必要があります。

WEBデザインもできる

HTMLはWEBデザインの最も基本でもあります。
HTMLを理解し、WEBページを作成することができれば、WEBサイトや
ブログのデザインを変更したり、装飾することもできるようになります。
そのためにはHTMLの基本的な構成やタグなど、しっかりと理解しておくことが必要となります。
ただし、HTMLのみですべて作り上げてしまうと、構造が分かりにくくなってしまったり、内容や意味にそぐわないHTMLタグを使用することになり、文書構造が分かりにくくなってしまう問題が起こってしまいます。
そのため、HTMLではページをタグで構造化することに限り、CSSで装飾を施すことが理想的です。

みやあじよのSNSアカウントをぜひフォローしてください