HTMLについて

記事「HTMLについて」。ShitTakaBullのカテゴリー「HTML」、「web制作関連」の記事です。私はHTMLを始めるにあたって、いろいろとHTMLとは？というページを見て回っても今一ピンと来ませんで...。

HTMLについて

作成日
2013/08/27
更新日
2013年8月27日

私はHTMLを始めるにあたって、いろいろとHTMLとは？というページを見て回っても今一ピンと来ませんでした。それはサイトの仕組みというものを全く知らず、その理数系なイメージから、説明にでてくる様々なカタカナや英字に対し拒否反応を起こしていたからかもしれません。
しかしweb制作にあたってHTMLというものは非常に大事なものであり、ウェブサイトのほとんどが利用しています。HTMLの基礎を学んでおけば非常にすんなりステップアップしていくことができると思います。ある程度のものだけ覚えればサイトは思うように表示されますが、基礎が分からないままコピペや覚えたタグだけで制作していくと、変なところで躓いたり時間がかかってしまうことがあります。私はそのパターンでした。
このページではHTMLとは何か、もう一度復習する意味もこめて時間を掛けて作成していきたいと思います。
webサイトを作成にするにあたってHTMLの勉強が必要らしいと分かった段階の人向けであり、これはほんとのほんとに何も知らない初心者向けの入門書になればと思います。

HTMLとは

簡単に言ってしまえば、見出しや参照など様々な文章構造を指定するものです。これだけでは見えてこないので、まずは「HTML」という言葉がどういった意味なのかを略語を崩してみてみます。
HTMLはHyperText Markup Languageとなるのですが、この中に大きな意味があります。

  • Hyper・・・・・・・ハイパー
  • Text・・・・・・・テキスト
  • Markup・・・・・・・マークアップ
  • Language・・・・・・・言語

ハイパーテキスト

ほとんどカタカナにしただけですが、まずはハイパーとテキストから。
ハイパーとテキストを分けてしまいましたが、HTMLはハイパーテキストであることを示します。なんとなくで読むとズバ抜けたテキストと読めますが、何がズバ抜けているのかというと、テキストから他の文書（ページ）に飛ぶことができる点です。サイトを見ていると当たり前のように「リンク」をクリックして次のページへと飛びますが、このページからページへと超えるというのは普通の本や雑誌ではできません。また、画像を読み込んだりできるのもハイパーテキストだからできることです。
この文書を「超える」という点から「ハイパーテキスト」と名付けられたらしいです。ちなみに、文書と文書を結びつけるリンクを「ハイパーリンク」と言います。

マークアップ言語

次にマークアップと言語に移ります。
HTMLは一つの言語だということを覚えておかなくてはなりません。この場合の言語とはコンピュータ言語のことで、分かりやすく言えばコンピュータに読み取ってもらうための言語です。iPhoneのSiriは「今日の天気は？」と聞けば「○○の今日の天気です。」と私達の言語に反応してくれますが、内部的にはコンピュータ言語で書かれたプログラムによって動作しています。いろんな偉い人が様々なコンピュータ言語をつくり、それを利用して書かれたものをコンピュータが読み取って動作するわけです。
そして、HTMLは数あるコンピュータ言語の中でもマークアップ言語といわれるものに属するわけです。これはただの言葉の定義に過ぎませんが、頭の片隅にでも置いておくといいかもしれません。
では、そのマークアップ言語とはどんな意味でしょうか。
文章には、段落や見出し、箇条書き、画像など様々な要素があるかと思います。HTMLではそういった要素を指定するために文章に印をつけます。タイトルのこの部分は見出しで、この部分は箇条書きにする、といったように印をつけることで、文章構造を作成していくわけです。その印のことをタグと呼び、印(タグ)をつけることをマークアップと呼ぶのですが、マークアップ言語とは、タグにより文章構造を指定する言語と考えてもらっていいと思います。

まとめると

HTMLとは、文書を飛ぶことが可能な、タグを利用して文書構造を指定する言語です。InternetExplorerなどブラウザはこの言語で書かれた文章構造を読み取り、指定された表示をするわけです。

HTMLの作成

前項で、HTMLを利用すれば文章構造を指定できたり、リンクをつけられることが分かったと思います。では実際にHTMLを作成するにはどうするのかへ移ります。

テキストエディタの利用

HTMLを作成するには、テキストエディタを利用します。
Windowsなら「メモ帳」、Macなら「テキストエディット」を利用します。これらはテキストエディタといって書いた文章をテキストファイルとして保存できるものですが、パソコンに初期から入っているこのようなソフトでもHTMLファイルを作成することができます。他にもHTMLを作成･編集するソフトとして色々便利なものがありますが、それについては違う記事で書こうと思います。

ここで、HTMLはテキストでできていると予想できると思います。実際にホームページを見ていると画像なども入っていますが、そこがハイパーテキストなるもので、テキストの記述(マークアップ)によって画像を参照することが出来るのです。

HTMLファイルの記述

それでは早速テキストエディタを開いて、HTMLファイルを書いてみましょう。
まずこの文書がHTMLであることを教えてあげます。

この「<html>」と「</html>」が「タグ」にあたるわけですが、見て分かるようにタグは「<」や「>」で成り立つ普通のテキストのため、「<html>」をテキストとして表示するのか、それともHTMLタグとして認識するのか判別させなくてはなりません。そのため、これはHTMLであることを宣言する必要があるのです。
タグの種類やルールなどについては後述しようと思います。

次に、間に自由に文章を書いてみて下さい。

これで一応完成です。HTMLには最低限のルールがあり、それらを無視している状態ですが、宣言により一応HTMLとして判別してくれます。

HTMLファイル名と拡張子

ファイルを保存する前に、ファイルと拡張子について触れておきます。

ファイルは「ファイル名.拡張子」で出来ていることはご存知でしょうか。ファイル名はそのままファイルの名前ですが、拡張子はそのファイルが何のファイルであるかを示すものです。コンピュータのシステムは、このファイルは画像なのかテキストなのか、ファイルの種類を「.」(ドット)以降を読み取り識別します。画像で有名なのは、「.jpg」や「.gif」でしょうか。コンピュータのシステムが識別するためのものなので必須ではないですが、HTMLの場合状況によってはHTMLとして読み取ってもらえない場合があるのできちんと書いた方がいいでしょう。人間にも優しいです。
HTMLの拡張子は、「.html」となります。たまに「.htm」もあるらしいですが、これは昔のパソコンが拡張子を3文字までしか読み取れなかったかららしいです。特別な理由がなければ「.html」を利用しましょう。

HTMLファイルの保存

実際に保存してみます。大抵は「ファイル」→「保存」で出来るかと思います。
ここでファイル名を決めることが出来ますが、ついでにあまりファイル名としてふさわしくないものも覚えておきましょう。

ファイル名に「.」(ドット)は利用しないようにする
拡張子にドットを使うため、コンピュータの識別が間違う可能性があります。
半角英数字を使う
「&」や「/」など記号は、コンピュータが他のものに利用している場合があるのでやめます。
また、日本語はファイル名が文字化けしてしまう可能性があるのでやめます。特にHTMLの場合、サーバにあげたりするとファイルを読み取るシステムが変わるので、文字化けする可能性が高いです。

ファイル名を決めたら、末尾に｢.html｣をつけて保存します。
例：mypage.html

HTMLの表示

次に、作成したHTMLファイルをどのようにして表示するかを書きます。

ブラウザとHTML

それではやっとHTMLを表示する段階に入るわけですが、少しだけブラウザについて書きます。
サイトを閲覧する時、WindowsならInternetExplorerだったり、MacだったらSafariと、アプリケーションを開いて見るかと思います。Google ChromeやFireFox、もしかしたらOperaを利用している人もいるかもしれません。これらはブラウザといい、文書に書かれたHTMLタグやプログラムを指示通りに表示します。
基本的には表示するためのものなので、ネットに接続できなくてもパソコン上のファイル(ローカルファイル)を見ることだってできるのです。

HTMLを開く

では、いつものようにお使いのブラウザを開いてみて下さい。というか今ブラウザで見ていると思いますが。
次に作成したHTMLファイルを開きます。大抵のブラウザなら、以下でファイルを参照できると思います。

  • Windowsの場合は、「Ctrl」を押しながら「O」キー
  • Macの場合は、「⌘」(コマンドキー)を押しながら「O」キー

先ほど作成したHTMLファイルを選択し、「開く」を押して開いてみます。
「<html>」や「</html>」が表示されず、間に記述したテキストだけ表示されていれば成功です。
このように、ブラウザではHTMLタグは表示しません。タグに文章構成の役割もたせ、指示通りに中身だけを表示しているのです。

閲覧環境による違い

このように、テキストエディタで書いたHTMLをブラウザで表示することによってウェブサイトも見ることが出来るのですが、使用しているブラウザが人によって違うことに注意をおかなくてはなりません。HTMLタグは一つの文章構造を構成するものですが、ブラウザの種類やバージョンによってその解釈が異なるからです。文字サイズや間隔などの初期設定は変更できるのでまだいいですが、新しいタグに対応していなかったり、一つのブラウザのために特別な記述をしなければならないケースも出てきます。
もちろんタグの意味などに基準はあるのですが、特にInternetExplorerなどのブラウザは独自の解釈を進めてきた歴史があります。先ほど作成したHTMLはほとんどタグを利用せずHTMLを組んだとはまだいえない状態ですが、この問題は実際にこれからHTMLでページを作成していく上で必ずぶち当たる壁でしょう。さらに言うなら、Webサイトで見るほとんどがHTMLだけで構成しているわけではありません。今後利用するであろうHTMLをサポートするCSSやJavascriptにも同じことが言えます。
また、問題はブラウザだけではありません。見る人がMacなのかWindowsなのか、PCなのかスマートフォンなのかガラケーなのかなど、閲覧環境によって同じHTMLでも違いが出てくるのです。全て同じ表示というのは簡単なものなら可能かもしれませんが、作業量もそれだけ増えるため、どこまで対応させるのかもwebサイトを作るうえで重要な項目の一つです。
ちなみにこのサイトはWindowsのFireFoxとiphoneのsafariでしか確認していないため崩れているところも多いかと思います。徐々に直そうと尾は思うのですが。。。

このような問題に対しては、まずは基本通りに書き、問題(バグなど)が出てきた場合に対応策を調べ、問題のあるケースとして知識を蓄積していく方法がベターなのかと思います。このような形で蓄積した知識は、記述ミスなのかバグなのかを判断できるようになるため、新たな問題に対しての解決スピードにも繋がります。そして、出来ないことだけを覚えて避けるよりは、チャレンジして解決した方が覚える知識が広がるようにも思いますし、その時はイラつくかもしれませんが解決の喜びも味わえるかと思います。

HTMLの構造

テキストエディタで作成したHTMLファイルをブラウザで表示する流れを書きました。この項目ではもう少し踏み込んで、HTMLの基本的な構造について触れていきたいと思います。
前回「<html>」と「</html>」を利用して、これはHTMLですというタグを書きました。他にもページ構成をする上で、重要なタグがいくつか存在します。

body

本文がどこなのかを示すものです。中身はここからここまでですよと教える役目があります。
HTML文書の中の中身ということになるので、「<html>」と「</html>」の間に記述します。

head

本文以外にもHTMLでは様々な文書のメタ情報などを記載することができます。例えば、文書のタイトルや説明、著者、そのページと関連する文書などの情報です。これは「<body>」の前に記述します。

!DOCTYPE

最後に、ドキュメントタイプについて。
ブラウザについて書いたときバージョンについて触れましたが、HTMLにもバージョンがあります。バージョンによって使用できるタグやルールなどが異なるため、ブラウザにそれを知らせる必要があります。どのバージョンを利用して記述するのか選んで書きます。この情報は<html>の前、つまり一番最初に書きます。
この部分については詳しい理解はないので、以下の参考サイトより参照させてもらいます。
参考サイト：http://www.htmq.com/html/doctype.shtml

HTML4.01(Strict DTD)

非推奨要素や属性、またフレームを使用することができません。 要素の配置についても厳しい制限があります。 HTML4.01の本来の仕様に従った最も厳密で正確なDTDです。

HTML4.01(Transitional DTD)

非推奨要素や属性は使用できますが、フレームを使用することができません。 要素の配置については比較的制限が緩やかになっています。

HTML4.01(Frameset DTD)

上記のTransitional DTDとほぼ同じですが、フレームが使用できます。

HTML5

HTML5の文書は、現在色々なサイトで利用されてきていますが、まだ非対応のブラウザも存在している状態です。

HTMLの構造まとめ

これに「<html>」タグを入れたものをまとめると以下のようになります。必要に応じてドキュメントタイプを変更してください。
（HTML4.01：Transitional DTDの場合）

このように、HTMLの構造は大きく分けて3つあり、ドキュメントのタイプを宣言する部分、ヘッダ情報、中身を入れる部分となる訳です。中身で使用するタグなどを「<head>」内には入れてはいけません。逆に「<body>」内にはできるだけヘッダ情報を入れないようにしましょう。

タグについて

基本的な構造をベースにマークアップをしていく訳ですが、その前にタグについて触れておきます。すでにいくつかタグを紹介しましたが、この項目ではタグの書き方や種類など基本的なところを書きたいと思います。
これもHTMLバージョンによって推奨される書き方に違いがあります。

内容を持つタグ

ここからここまではこの内容ですといったように、内容をもっている場合は内容を「<開始タグ名>」と「<終了タグ>」で挟みます。先程の「<html>」や「<head>」などです。
終了タグは省略していい場合もありますが、レイアウトの崩れなどをなるべく無くすためには、できるだけ書いた方がいいでしょう。

内容を持たないタグ

内容は持たず、終了タグを必要としない要素です。空要素と言われるものでそのタグだけで完結します。
「<br>」は改行を意味するタグで、これ自体で完結しています。
「<br />」のように「スペース」と「/」を入れているのも見たことあるかもしれません。これはXHTMLといってHTMLとはまた違う言語です。XHTMLでは終了タグを必要とするため、空要素も閉じなくてはいけません。
HTMLと似ている部分も多く混乱してしまいますが、違いについては以下のサイトが参考になるかもしれません。自分の中でも微妙なところではあるため、勉強しようと思います。
参考サイト：http://www.atmarkit.co.jp/fxml/askxmlexpert/022xhtml/22xhtml.html

属性の指定

タグには属性をつけることができます。つけれる属性はタグによって異なりますが、基本的には以下のように書きます。

タグ名を入れた後にスペースを入れ、「属性名=””」の「”」と「”」の間に値を入れることで、その属性に対し値を指定します。指定できる属性はタグによって決まっており、値は任意のものだったり定義されていたりと属性によって異なります。
では、段落を意味するタグ「<p>」を例に見てみます。

「<p>」と「</p>」で挟めばその部分は段落を意味することになりますが、この段落は「英語」だと指定したいとします。言語を指定する属性は「lang」となり、英語の値の記述方法は「en」となるので、記述は以下のようになります。

このようにして、より高度な文章構造を指定することが可能になります。

コメント

本文やメタ情報だけではなく、コメントを入れたい場合があります。長くなってしまったHTMLに分かりやすく説明をつけたり、タグ自体を隠しておきたいときなどです。コメントは以下のように記述します。

この「<!–」と「–>」で挟まれた部分はブラウザに表示されません。また、この中にタグが入っていたとしても、それはHTMLタグとして認識されずに無視されます。ブラウザには表示されませんが、ソースを見ることはできるため、パスワードなどの知られたくない重要な情報は書いてはいけません。
環境によって、コメント内に「–」を入れるとコメント解除ととられてしまう可能性があります。

head内のタグ

それでは実際にタグを記述していきます。head内には、そのページのめた情報など、ヘッダ情報を記述すると書きました。どのようなものがあるか見てみます。
タグはタグで個別に記事を一つずつ書いていこうと思うので、詳しくは書きませんが、主要なものは大体以下になります。

メタ情報

以下は文字コードを指定するものになります。文字化けなどを防ぐため、記述した方がいいと思います。
HTML4で「utf-8」を指定する場合

HTML5で「utf-8」を指定する場合

「charset=」の後に指定されているUTF-8の他に、「Shift-JIS」や「euc-jp」などがあります。今後管理などしていく上では統一した方がいいのですが、UTF-8をお進めします。
この「meta」タグはメタ情報を追加するもので、他にもページの説明や著者情報など様々な種類があります。

タイトルの指定

ページのタイトルを指定します。中身をまとめたものなので、長過ぎたり、関係ない単語を入れようとするのはよくないと思います。

関連する文書の指定

次のページはこちらですなど、文書と文書の関係を定義します。

他にも、外部CSSを読み込む際にもこのタグを利用します。CSSはHTMLと親密な関係にあり、HTMLの文字サイズやレイアウトなどの指示をするものです。

属性「href」でファイルの場所を指定しています。

    コメントを残す

    メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

Category

Archive