HTMLの書き方！誰でも解る超基礎編

HTMLの書き方

投稿日 更新日

by Chiharu Morita

＊このページの解説は主にHTML4.01をもちいています。現在はHTML5.1が主流になりつつありますので、新規で学ぶ方はHTML5.1から始めることをお勧めします。しかし基本的な部分は同じですのでHTMLの概要理解に役立ちと思います。

このページを訪れた方は、HTMLの書き方を覚えて自分でホームページを作ってみたいと思っていらっしゃると思います。

HTML自体はとてもカンタンなものです。

webサイトの骨格となるものをHTMLといいます。マークアップ言語ともいいます。HTMLで作られた部分は単純な文字列です。

難しいことはありませんので、書き方を覚えれば修得出来ます。

目次

  1. HTMLについて
  2. HTMLの基本構造
  3. 要素と属性について
  4. ブロックレベルとインライン要素
  5. 文章型宣言について
  6. HTML記述時の注意点

HTMLについて

HTMLとは（Hyper Text Markup Language）ハイパーテキストマークアップランゲージの略称で、 ホームページを作成するための言語です。
マークアップランゲージとは、プログラムの一種で文書の構造(段落など)を指定するための言語で、 この指定をするための文字列をタグといいます。
下に記載した『HTMLの基本構造』を確認してください。<html>このような記述がありますね、この部分<>をタグといいます。
タグで囲まれた部分をブラウザが読み込むことによって、ホームページが表示されます。
HTMLは文章の骨格だと考えてください。

タグについて

タグには開始タグと終了タグがあります。
<html>—これを開始タグといいます。
</html>—これを終了タグといいます。
タグにはさまざまな意味を持つものがあります、これを組み合わせて記述することでホームページを作っていきます。

HTMLの基本構造

文章の骨格部分になります、このように書いていきます。
この部分は常に記述することになります。



～

～

htmlタグはhtmlで書かれていることを表します。最初と最後のタグで挟む用に書きます。

headタグはブラウザに表示されませんが、重要な事項です。ここではtitleタグがheadタグの中に書いてあります。

titleタグはこのページのタイトルを表示します。ブラウザの左上の枠の所に名前が表示されます。

bodyタグは骨格です。ここに内容を書いていきます。閉じタグも忘れずに書きましょう。

実際にHTMLを書いてみる！

ファイルをテキストエディタで開いて編集してみましょう！テキストエディタというのはWindowsではメモ帳・Macではテキストエディットというアプリケーションです。

※本来は専用のエディタを使います。少し本格的にホームページ作成をする場合は専用のテキストエディタを入手してください。（Windows：テラパッドなど、Mac：CotEditor・miなど）無料でダウンロード出来ます。
※必ず半角の小文字で記述し、スペースにも気をつけてください。



天気予報



今日の天気


晴れ

<html></html>の開始タグと終了タグを書く。

その中に<head></head>の開始タグと終了タグを書く。

その中に<title>天気予報</title>と書く、タイトルはブラウザの左上に表示される。

<body></body>の中に<h1>今日の天気</h1>と書く、「h1」は見出しを表す。

<body></body>の中に<p>晴れ</p>と書く、「p」は段落を表す。

ホームページの内容は<body></body>の中に記述していきます。

↓ブラウザで開くとこうなります。（保存したファイルをダブルクリック）
htmlブラウザで表示してみる

要素と属性について

要素について

例
<title>ホームページ作成</title>—開始タグと終了タグを含めた内容を要素といいます。全て合わせたものを一般的に要素と呼びます。

属性について

属性とは要素に何らかの設定を追加する文字列のことをいいます。（要素の機能に追加して機能を持たせるようなイメージです。）
<要素 属性名=”属性値”>
<img src=”photo.jpg”>
「img」は要素※「img」は画像を表す。
「src」は属性※「src」は画像ファイルを指定する。
「photo.jpg」は属性値※「photo.jpg」は画像ファイルです。
<a href=”http://youtukuru.com”></a>
「a」は要素※「a」はリンクを表す。
「href」は属性※「href」はリンク先ファイルを指定する。
「http://youtukuru.com」は属性値※「http://youtukuru.com」はリンク先URLです。
今はまだよく解らないかもしれませんが、大丈夫です。なんとなくこういうものがあった、 ことを覚えておいてください。理解するには慣れが必要です。※これが要素で、これが属性で…なんてことは覚えなくても大丈夫です。何回か書いていけば勝手に覚えていけますよ。

ブロックレベル要素とインライン要素

HTML5ではブロックレベル要素・インライン要素という概念はなくなりました。しかし、下記のタグで囲われた要素は改行されますので、その事だけ覚えておきましょう。

要素にはブロックレベル要素とインライン要素があります。

ブロックレベル要素はひとまとまりとして扱われその前後で改行されます。

インライン要素はブロックレベル要素の中に記述し、文字列を強調したり、画像を表示したりします。
例

私のペットのポチです。


かわいいでしょう。

↓ブラウザ(IE,googleクローム,FireFoxなど)での表示例

私のペットのポチです。
犬イラスト白い犬のイラストかわいいでしょう。
  1. 「p」はブロックレベル要素で段落を表します。
  2. 「em」はインライン要素で強調(斜体)を表します。
  3. 「img」はインライン要素で画像の表示を表します。

ブロックレベル要素の「p」中にインライン要素「em」「img」が入っているのが解りますね。

※ブロックレベル要素の中にブロックレベル要素を記述することはありますが、インライン要素の中にブロックレベル要素を記述することはありません。

ブロックレベルとインラインの一覧表

ブロックレベル h,p,ul,ol,div,hr,tableなど
インライン a,b,em,img,br,span,input,textarea,strong,u,sなど

文章型宣言について

<html>の前に記述します
HTMLのバージョンについて記述します。これからはHTML5が一般的になってくるでしょう。
まずはStrict DTD(厳密型)かTransitional DTD(移行型)を記述しておきましょう。

Strict DTD(厳密型)

推奨されている要素や属性を使用する場合に使用する。
注：改行せずに記述する‐コピーして貼り付けてください。

Transitional DTD(移行型)

推奨されていない要素や属性を使用する場合に使用する。
注：改行せずに記述する‐コピーして貼り付けてください。

Frameset DTD(フレーム設定型)

フレームというタグを使用する場合に記述する。現在フレームは非推奨の技術です。使わないようにしましょう。
注：改行せずに記述する‐コピーして貼り付けてください。

HTML5の場合

HTML5はとても簡単です。しかし、古いブラウザ(IE6/7/8他)は未対応です。対応させるにはJavaScriptなどのプログラムが必要になります。これからはHTML5を利用するのが主流になります。
注：改行せずに記述する‐コピーして貼り付けてください。

記述例：文章型宣言は一番初めに記述します。




天気予報



今日の天気


晴れ

次はこれらの内容をふまえた、HTMLのを記述する際の注意点を解説します。

HTML記述時の注意点

HTMLは半角で記述します。
HTMLやCSSは半角で記述する癖をつけてください。特にHTMLは日本語の記述もしますので、半角と全角の変換には注意してください。 HTMLの開始タグの中などに全角でスペースを入力した場合、文字として認識されてしまいブラウザでの表示がうまくいかなくなります。

例

↑「a」と「href」の間に半角スペース入っていますが、全角スペースを入れてしまうと何も反映されません。ちなみに、半角スペースで正しく記述するとリンクの指定になります。

「a」が要素で「href」が属性です、要素と属性の間は半角スペースが入ります。

HTMLの閉じタグの書き忘れに注意

閉じタグを書き忘れた場合、以降の内容全てに開始タグの内容が反映されてしまいます。
たとえば、上の例で閉じタグ</a>を書き忘れると以降の内容全てに リンクの指定が反映されます。

リンクの指定とは、マウスでポイントすると色が変わり、クリックすると他のページにジャンプする指定のことです。

これを回避するには、開始タグと同時に閉じタグを記述したほうがいいでしょう。

HTMLの正しい記述をしよう

ブロックレベル要素の中にインライン要素を記述する
ブロックレベル要素一覧
h1～h6、p、dl、ul、ol、hr、pre、table、form、address、div など
インライン要素一覧
img、a、tt、span、strong、br、em など

☆　例
正しい

今日の天気は晴れ

誤り

今日の天気は晴れ

ブロックライン要素である「p」の中にインライン要素の「em」を入れましょう。
これで基本的なことは終わりです。ご自分のホームページを作りながら練習しましょう。

カテゴリー ホームページ作成の基本知識