今注目のニュース
【ラジオ】『ポートピア連続殺人事件』から始まる“ファミコン・アドベンチャーゲーム”愛から新作を作った人たち。『偽りの黒真珠』制作チーム登場の「電ファミラジオ(β)」6月28日に配信へ
なぜそこに穴をあけたのか... 素人には意味が全く分からない顔出しパネルが話題
【大阪】警察のバスが危険な幅寄せをしてくるドラレコ動画が公開され物議!ワザとなのか、完全に見えていないのか

HTML単語

エイチティーエムエル

掲示板をみる(80)
  • twitter
  • facebook
  • はてな
  • LINE

もしかして?

HTMLとは、「ひとみる」な形式である。Hotmailの略ではないのであしからず。

HyperText Markup Language の略で、ウェブページを記述するための言である。
ニコニコ大百科:HTMLタグ一覧 (ニコニコ大百科で使用できるHTMLタグ一覧)

概要

Markup Language」(マークアップランゲージマークアップ言語)とは、々が一般的に用いる自然について、コンピュータでもその文脈や意味などが理解できるように専用の文字列(タグ)を補記したものである。そして「HyperText」(ハイパーテキスト…「テキストえる」という意味)とは、ハイパーリンクによってお互いを関係付け、関係のある文書を辿っていけるようにした文書のことである。

これらを組み合わせたものがハイパーテキストマークアップランゲージ…すなわちHTMLである。

HTMLの仕様W3CWorld Wide Web Consortium)という団体が定めており、ほぼ全てのウェブページはHTML及びその生のXHTMLで記述されている。

もちろんこの記事もHTMLを用いて記述されている。要なブラウザなら「右クリックソースを表示」でこのページがどのようにHTMLで記述されているかが確認できる。

HTMLの簡単な説明

前述の通り、HTMLの「Markup Language」は、コンピュータでも文章の文脈や意味を判別できるようタグを補記する役割を持つ。

では、コンピュータに文脈や意味を判別させる、とはどういうことか?例えば、下記左のような文章があったとする。

表示サンプル ソースコード
今日の出来事
今日は以下のような出来事があった。
宝くじ300円当たった
飯にうどんを食べた
・友人と会った
<h1>今日の出来事</h1>
<p>今日は以下のような出来事があった。</p>
<ul>
<li>宝くじ300円当たった</li>
<li>飯にうどんを食べた</li>
<li>友人と会った</li>
</ul>

左の文章は、人間が見れば「今日の出来事」が文章のタイトルで、以下説明文と出来事が箇条書きで記述されているであろう、と文脈を推測できる。しかし、コンピュータが同様に文脈(見出し・段落・箇条書きなど)を判別することは非常に難しい。

そこで、HTMLでは上記右のようにタグを補記し、明示的に文脈を記述することによってコンピュータに判別させる。

タグ<hoge>…</hoge>で囲まれた部分がhoge要素になる。上のHTMLでは「今日の出来事」がh1要素、「今日は以下のような出来事があった」がp要素となっている(HTMLでは、h1要素が最上位の見出し、p要素が段落、ul要素が箇条書き、li要素が箇条書きの項を意味する)。

このようにして、当初の的である、コンピュータに文章の構成要素を伝えるということが達成できた。

インライン要素・ブロック要素

要素には大きく分けてインライン要素とブロック要素2種類がある。おおざっぱに言えば、行の中に詰め込める要素がインライン要素で、行を中に詰め込める要素がブロック要素である。

本文の書き方

原則として<p>と</p>の間に書く。この<p>は段落(パラグラフ)を意味する。

基本的にHTMLでは、ソース中の改行文字や連続したスペースは意味を持たない。また「<」「>」はタグで使用するので「&lt;」「&gt;」と記述する必要がある(そのまま記述できない文字は他にもある)。

なお、<br />による改行は非推奨とされている。 → <br />

よくある勘違い

HTMLはウェブページレイアウトを記述するための言ではなく、ウェブページの文書構造を記述するための言である。

例として、雑誌レイアウトのような段組みを再現すべく<table>タグを利用するケースなどが見られるが、同タグはあくまで表を作成するためのものであり、段組みを再現するために用意されたのではない(結果として画面上には段組みとして表示されるが、コンピュータはそれを「表」として認識している)。

このようにタグレイアウト用途に転用される事回避のため、CSSと呼ばれる装飾用の要素が用意されている。このCSSを使って記述した方がより柔軟・高度なレイアウトが実現できるうえ、HTMLを純に文脈用として記述できるためソースコードスッキリする利点がある。

1999年に策定されたHTML 4.0では、レイアウト用にCSSを利用することを強く推奨していたが、当初は対応ブラウザーが普及しておらず、多くのデザイナーは従来のデザイン方法をとっていたが、2000年代中頃より十分な普及が見られるようになってから、CSSを使ったデザインへと変化している。

このままXML親和性の高いXHTMLへと発展するかに思われたが、あまりにも厳格になりすぎて普及が遅れることとなった。

2004年に、実用からかけ離れつつあったW3Cの方針に反発したアップルMozillaOperaによってWHATWGが作られ、より実用的な言とする上で、従来のバージョンでの表記も許容し、プラグインなしでも音映像3Dグラフィック、ストレージや周辺機器との接続にも対応したHTML5を策定、2014年に勧告された。

バージョン

Ver. 時期 内容
HTML 1.0 1993年 ティムバーナーズ=リーが提案した、SGMLをベースにした記述方法を元に策定された。
HTML 2.0 1995年 このバージョンDTD(文書定義)の宣言が追加され、入フォームの定義もされた。
HTML 2.x 1997年 ここで正式に日本語などの他言への対応が明記されるようになった。
HTML 3.0 - 策定中に中止された。
HTML 3.2 1996年 スタイルシートCSS)が初めて登場するも、同時に表組、フレームなど、HTML側でレイアウトを決める要素などを明文化した。
HTML 4.0 1997年 HTMLをめて文書の構造のみを記述する形に整理され、レイアウトなどをCSSで設定するようめられた。
翌年にはいくつかの修正を行ったHTML 4.01が勧告され、長らくスタンダードとなった。ニコニコ大百科もHTML 4.01を使っている。
HTML5 2014年 2014年に勧告されたバージョン。これまで動画アニメなどを見る上ではプラグインを必要としていたが、これを使わずともHTML内で処理、実行できる環境Webブラウザーと連携して提供することを的にしている。

ついでの知識

日本においては、1992年東京理科大学教授(現・京都大学教授)が初めてHTMLを記述した。

その中身は…アクセスしてからのお楽しみexit

関連動画

関連商品

関連項目

掲示板

  • 78ななしのよっしん

    2016/11/09(水) 20:45:01 ID: y3JPuVMAsF

    あのー、消したいコメントNG方法とか分かる人いる?

  • 79ななしのよっしん

    2016/11/23(水) 03:20:58 ID: tok5o9IRkV

    わからんから公式に送っといた
    動画自体はなんか軽くなった気がする

  • 80ななしのよっしん

    2017/06/08(木) 20:10:14 ID: 1xJPYtCtUk

    HTML5もまたFlash同様時代の徒花となるか、これは時代を問わず通用するものになるのかだな。
    HTML5で作ったコンテンツ100年先のコンピュータで開いても動かせるという事は流石にないか?

急上昇ワード

最終更新:2019/06/26(水) 05:00

ほめられた記事

最終更新:2019/06/26(水) 05:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

       

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

TOP