読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【復習】HTMLって何?

HTMLとは、HyperText Markup Languageの頭文字をとったものです。

Wikipediaによると、

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、 略記・略称:HTML(エイチティーエムエル)とは、ウェブ上のドキュメントを記述するためのマークアップ言語である。

Web作成基本プログラミング用語であり、C言語のようなプログラミングとは違い、 文章の中に記述するとこでさまざまな機能を記述設定することができる。

また、JavascriptCSSなどを直接書き込まなくても、別ファイルからの呼び出しも可能である。

ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントは ほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。

W3Cは、XMLベースの規格であるXHTMLの勧告も行っている。 また2009年10月現在、HTML 5も策定中である。

これまた難しい内容になってますw

これらの概念は作っていくうちに理解してくると思いますので、 今はふーんという感じで見ていただければと思います。

何はともあれ、実践あるのみ!

ということで、詳しく見て行きましょう。

まずは覚えておきたい「ブロック要素」と「インライン要素」

いきなりですが、「ブロック要素」と「インライン要素」って聞いたことありますか?

「ブロック要素」というのは、簡単に言うと、改行を伴う要素です。 さらには、文書全体の構造の基となる要素になります。

逆に「インライン要素」は、改行を伴わない要素になります。 「インライン要素」は常にブロック要素に含まれなければなりません。 つまり「インライン要素」の中に「ブロック要素」を含める事は出来ないのです。

今回、みなさんに覚えておいて欲しいのがコレ。

★ポイント その1

ブロック要素とインライン要素の違いを理解することが、HTML習得への第一歩

頭に入れておいてくださいね。

それでは、具体的に見ていきましょう。

【ブロック要素】

  • p
  • div
  • table
  • dl
  • ul
  • ol
  • form
  • address
  • blockquote
  • h1 h2 h3 h4 h5 h6
  • fieldset
  • hr
  • pre

【インライン要素】

  • a
  • abbr
  • acronym
  • b
  • bdo
  • big
  • cite
  • code
  • dfn
  • em
  • i
  • kbd
  • label
  • q
  • samp
  • small
  • span
  • strong
  • sub
  • sup
  • tt
  • var
  • button
  • img
  • input
  • object
  • select

みなさんが、普段目にしている要素ですね。

これらの2つの要素(インライン要素、ブロック要素)を理解すると、 より正しいHTMLを記述することができます。

★ポイント その2

基本的にインライン要素の中にブロック要素は入れられない

ということです。
HTML5になって概念が少し変わりましたが、この原則は覚えておくと良いでしょう。

このあたりの入れ子関係もW3C仕様書に載っていますので、そちらをご確認いただければと思います。
http://www.w3.org/TR/html4/sgml/dtd.html ※見方がわからない方は調べてみてください。

DTDが理解することが、HTMLを習得する一番の近道ですね。
すべてが載っています。
※これを詳しく説明しろって話ですねw検討しますw

入れ子関係の話は、神崎先生のサイトでよくまとめられてますので、ご覧ください。
http://www.kanzaki.com/docs/html/all-elements.html

まとめ

★ポイント その1

ブロック要素とインライン要素の違いを理解することが、HTML習得への第一歩

★ポイント その2

基本的にインライン要素の中にブロック要素は入れられない

今回は、この2点を覚えておいてください。
今まで自分で作った作品を見なおしてみると面白いかもしれません。

お試しあれ!

それでは、楽しいコーディングライフを!

※HTML4.01をベースにお話をしています。

追伸:メルマガご購読の方には、無料で「HTMLの教科書 初級編 Vol.1」をプレゼント中!

www.mag2.com

f:id:sitk:20150528231412p:plain
ただいま無料で「HTMLの教科書 初級編 Vol.1」をプレゼント中ですー。
プレゼントは、毎回メルマガで告知してますので、届くのを楽しみに待っていてください!

この機会にぜひ!
目指せWeb業界!就職・転職・起業なら、学校では教えてくれないWeb制作の現場