単語記事: HTML

編集

もしかして?

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を記述した。

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

関連動画

関連商品

関連項目


【スポンサーリンク】

携帯版URL:
http://dic.nicomoba.jp/k/a/html
ページ番号: 386791 リビジョン番号: 2430812
読み:エイチティーエムエル
初版作成日: 08/07/23 12:25 ◆ 最終更新日: 16/11/23 06:37
編集内容についての説明/コメント: 冒頭の変更
記事編集 / 編集履歴を閲覧

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

HTMLについて語るスレ

70 : ななしのよっしん :2016/11/02(水) 17:57:45 ID: ThOpaTiEz2
html5版試してみたけど
実際はえーな
71 : ななしのよっしん :2016/11/02(水) 22:55:59 ID: 4UUG0O4CsY
html5版、確かにFlashより快適だけど稀に再生中、勝手に巻き戻るんだが同じ症状の人いる?
72 : ななしのよっしん :2016/11/03(木) 01:02:57 ID: TeZ93vt0gV
>>71
ようやく同じ症状の人に出会えた
違うパソコン三台で試して全部で巻き戻り現に遭遇したけど、特にも話題にしてない気がする
73 : ななしのよっしん :2016/11/03(木) 02:00:51 ID: 5Ed1wH4T+J
お試しhtml5のやつって専用の大百科記事はないのか?
コメの流れる速度が何か不安定で文字の表示自体も暗い、曇って見える
上に映像が巻き戻るとあるけど、それとはちょっと違って前の映像が一フラッシュバックする現が何度かあった
フルスクリーンにするとコメの入フォームが消えるの何で?
これらはおま環の可性もあるので何ともだけど
あとシークバーとかの操作欄はの外に出してくれ、一部でも画面と被るのは嫌
74 : ななしのよっしん :2016/11/03(木) 02:08:47 ID: 6Dg3qHQ3zw
>>73
自分で作るか、プレじゃないならここへ依頼すればいいと思う
一般会員記事作成依頼スレ
75 : ななしのよっしん :2016/11/03(木) 11:00:59 ID: 54CGMSOUpL
>>73
要望はここじゃなくて、下の公式アンケートにフィードバックしてくれ
https://secure.nicovideo.jp/form/entry/html5_watch_1025
76 : ななしのよっしん :2016/11/03(木) 11:14:57 ID: JJKuNBT3Ch
>>69
既に死んで今はゾンビだよ
ニコニコの対応が遅すぎるだけ
77 : ななしのよっしん :2016/11/05(土) 12:06:46 ID: Y9nMNOt661
>>73
情報スッカスカだけど作った
HTML5プレーヤー
http://dic.nicovideo.jp/a/html5%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC
78 : ななしのよっしん :2016/11/09(水) 20:45:01 ID: y3JPuVMAsF
あのー、消したいコメントNG方法とか分かる人いる?
79 : ななしのよっしん :2016/11/23(水) 03:20:58 ID: tok5o9IRkV
わからんから公式に送っといた
動画自体はなんか軽くなった気がする
  JASRAC許諾番号: 9011622001Y31015