htmlの基本的記述方法

htmlとは、いったい何なのか?・・・

一般的にHomepage呼ばれている、Homepageとは?・・・

正しくは、WEBページと、言います。

Homepageとは、Homeposition Pagesの略で、基盤となるページのことを言います。

つまり、WEBページのトップページ(index.html)のことを表します。

WWWとは、ワールド(World)、 ワイド(Wide)、 ウェブ(Web)の略であり、 htmlとは、 Hyper Text Markup Languageの略です。

htmlは、マークアップ言語です。 マークアップ言語とは、文字にリンクを貼る(HyperTextという)ことで、 その説明をすることなく、リンクしたページで、その説明が、参照できる便利な言語です。

あくまでマークアップ言語であり、プログラム言語ではありません。 そのため、ブラウザから直接プログラムを操作することは、脆弱性を生ずるため禁止されています。


htmlとの出会い

私が初めてhtmlに出会ったのは、今から約30数年前です。 時の、htmlのバージョンは、1.0でした。
html4.01仕様書が、1999-12-24に、W3Cより勧告され、現在のVersion5.1は、WHATWGW3Cにより開発され、2016-11-01に、W3Cによって勧告されました。
日本には、世界中に3か所あるW3C事務局の一つが、慶應義塾大学湘南キャンバスSFC内にあります。

よく似た言語に、従来の代表的なマークアップ技術であるSGMLがあります。 htmlが、固定的タグセットに対し、 XMLという自由にタグ定義を拡張できるものも誕生しました。
ただし、XML文章を変換して、 成形するXSLT(1999-11勧告)というファイルが必要になります。 その後、汎用的なXML用スタイルシート言語XSLの中でも、より重要なXML用の文書変換部分のみを切り出し、 XSL(2001-10勧告)は、 XSLT(1999-11)のほかに、 FOと呼ばれるスタイル指定の役割を担う仕様から構成されます。

ただし、XSL(2001-10勧告)(FO)を実装したブラウザは、 Microsoft社のIEのみでした。

htmlの、第一印象は、 プログラミングと比較して、ずいぶん簡単。

htmlは、マークアップ言語ですが、 記述は、ワープロの書式と同じで、ネスト構造ではないかと思ったことです。要素を入れ子にすればいい!

当時のhtml(1999-12勧告)1.0でしたが、 今ではずいぶん改良され5.1(2016-11勧告)にまでバージョンアップされました。


htmlは、マークアップ言語

htmlは、マークアップ言語ですから、記述は厳密でないと意味が分かりません!
マークアップ言語は、マークアップした要素を、人に理解しやすくすること表します。

けして、マシーン(PC)に、理解しやすく記述しているわけではありません!

この部分が理解できていない、プログラマーとか、著作者が、いい加減な説明をした本が、多く出回ています。

その証拠に、お気に入りのページを見つけたら、まずValidな記述が、 されっているかどうかを、W3Cまたは、WHATWGなどのチェッカーで、 文章構造を調べてみてください。

およそ、90%の、WEBページは、正しい文章構造で書かれていません。 これは、驚くばかりです。

指摘すると、記述方法は色々あると馬鹿な返答が返ってきます。

このような方は、仕様書を読んでいない方がほとんどです。
仕様書は、英文だから読んでいないなどと訳の分からないことをいう人までいます。
読めなければ、英語を、勉強しろ!としか言えない。
また、言語は、能動態・受動態など表現方法により、翻訳では意味が正しく理解できない場合もある。
よく例にされることですが、色を表現する場合、(RGBで指定する)、8Bit(color:#fff)で表現するか、16Bit(color:#ffffff)で表現するか?・・・
また、人によっては、カラーコードを色で指定(color:white)する場合もあります。
これらは、製作者の癖です。htmlなどのソースを理解するためには、この癖も読み取る必要があります。


一番多いのが、<br>は、改行です

一番多い間違いは、<br>は、改行です。という馬鹿
改行だったら<リターンまたはEnter>だろう

<br>、brake(ブレーキ)の略。

強制ストップという意味で、 ブラウザの仕様により、強制的に改行するだけのことです。 この説明すらできないのであれば、人に指導する価値はない!

単純に文章と文章の間に空間が欲しいのであれば、段落(<p>)のスタイルシートに、 padding-bottom:10px;というように、記述しましょう。


htmlタグと、呼ばれているものはなんなの?・・・

仕様書には、elementと書かれています。 つまり要素ということです。

要素<>で、囲まれた文章の部分を、人にわかりやすい意味付けをするということです。 要素は、<>文章で必ず囲まれています。

この、<>マークのことを、EMPTYマーク(エンプティ・マーク)と呼びます。
<>マークで、囲まれた、要素のことを、タグといいます。 EMPTYとは空・または虚無を表します。

htmlでは、一部例外もありますが、 <br><hr>など・・・

空要素(空タグ)は、ゆるされません!
必ず、閉じタグ</>が、必要です。


要素とは?・・・

要素には、ブロック要素インライン要素があります。

ブロック要素
中に、インライン要素を書けます
インライン要素
中に、ブロック要素は、書けません!

要素は分類して、覚えておく必要があります。

  1. bouder要素
  2. button要素
  3. box要素
  4. <q> <blockquote>要素
  5. セマンティック