僕は僕でだれかじゃない

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

MENU

【HTMLのお勉強】HTMLって何?

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

なんのこっちゃわかりませんよねw

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

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ということです。

このあたりの入れ子関係も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をベースにお話をしています。