HTML単語

エイチティーエムエル
3.1千文字の記事
  • 23
  • 0pt
掲示板へ

もしかして?

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ブラウザーと連携して提供することを的にしている。
HTML Living Standard (2019年) HTML3.0以降を管理してきたW3Cとは別のWHATWGという団体が管理する標準。HTML5は実質的には当時のHTML Living StandardW3Cが手を加えたものとなっている。2004年から存在するが2019年W3C側が合流する形で標準となった。バージョン概念がなく日々更新される。

ついでの知識

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

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

関連動画

関連項目

関連記事

親記事

子記事

兄弟記事

【スポンサーリンク】

  • 23
  • 0pt
記事編集 編集履歴を閲覧

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

お絵カキコがありません

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

ピコカキコがありません

HTML

74 ななしのよっしん
2016/11/03(木) 02:08:47 ID: 6Dg3qHQ3zw
>>73
自分で作るか、プレじゃないならここへ依頼すればいいと思う
一般会員記事作成依頼スレ
👍
高評価
0
👎
低評価
0
75 ななしのよっしん
2016/11/03(木) 11:00:59 ID: 54CGMSOUpL
>>73
要望はここじゃなくて、下の公式アンケートにフィードバックしてくれ
https://secure.nicovideo.jp/form/entry/html5_watch_1025exit
👍
高評価
0
👎
低評価
0
76 ななしのよっしん
2016/11/03(木) 11:14:57 ID: JJKuNBT3Ch
>>69
既に死んで今はゾンビだよ
ニコニコの対応が遅すぎるだけ
👍
高評価
0
👎
低評価
0
77 ななしのよっしん
2016/11/05(土) 12:06:46 ID: Y9nMNOt661
👍
高評価
0
👎
低評価
0
78 ななしのよっしん
2016/11/09(水) 20:45:01 ID: y3JPuVMAsF
あのー、消したいコメントNG方法とか分かる人いる?
👍
高評価
0
👎
低評価
0
79 ななしのよっしん
2016/11/23(水) 03:20:58 ID: tok5o9IRkV
わからんから公式に送っといた
動画自体はなんか軽くなった気がする
👍
高評価
0
👎
低評価
0
80 ななしのよっしん
2017/06/08(木) 20:10:14 ID: 1xJPYtCtUk
HTML5もまたFlash同様時代の徒花となるか、これは時代を問わず通用するものになるのかだな。
HTML5で作ったコンテンツ100年先のコンピュータで開いても動かせるという事は流石にないか?
👍
高評価
0
👎
低評価
0
81 ななしのよっしん
2020/09/25(金) 07:56:31 ID: DJsoB1S7yw
モバイル版で掲示板の先頭と編集履歴404エラー起こしてる件
👍
高評価
1
👎
低評価
0
82 ななしのよっしん
2021/08/12(木) 09:10:44 ID: JJKuNBT3Ch
>>81
モバイル版だけじゃないよ
URLに特殊な文字(笑)が入り込んでるのが悪いのかな
👍
高評価
1
👎
低評価
0
83 ななしのよっしん
2023/12/05(火) 03:23:03 ID: sjcZkhln0+
初めて静画投稿した時タグの説明なかったから「何故かだけ改行できない」とキレそうだった

重いを上げて色々調べてやっと仕様を理解したけど絵だけ投稿したい勢がプログラム言語なんか知るかよと
使えるタグも限られてるしヘルプでちゃんと説明するべきだと思うんよね

因みにこれが有志によるヘルプ代わりの説明です
ありがたいことにコピペしてそのまま使えます
https://com.nicovideo.jp/community/co1269313exit_nicocommunity
👍
高評価
1
👎
低評価
0