HTML基礎編

基本タグと構造

基本タグを見てみよう

　HTML文書の内容は、もちろん作成するウェブページによって変わりますが、「基本タグ」の部分はほぼ同じです。「基本タグ」というのは、どんなウェブページでも書かなくてはならない共通のタグのこと。以下の画像を見て下さい。HTML文書というのは、このような共通の「基本タグ」があって、その中に各ページのタイトルや本文や表示する画像などを入れ込んでいくという「つくり」になっています。

　　

　この基本タグ。「準備編・ひな型ファイル」のところで作りました。ひな型ファイルとは、この基本タグを保存して、コピペして使えるようにするためのファイル、ということですが、このサイトではこの後ずっと使いますので、一緒に勉強していくなら、作っておいた方がベター。「ナニコレ？」とか「中身が違う！？」という人は戻って作っておいて下さい。

SPONSORED LINK

タグの意味

　ところで、この基本タグ、<●>～</●>とか、終了タグのない<●>といったタグでできています。それぞれのタグについて簡単に説明すると、以下のようになります。
  • <!DOCTYPE html>
    　ドックタイプ宣言。この文書はHTML文書で、バージョン5で書かれてますよ、という意味。バージョンが違うと書き方が違う。
  • <html lang="ja">～</html>
    この範囲がHTML文書ですよ。言語は日本語ですよ、という意味。
  • <head>～</head>
    HTML文書のヘッダー部分(タイトルや説明文、外部の設定ファイルなどの管理情報を記述した部分)ですよ、という意味。
  • <meta charset="UTF-8">
    メタタグ。このHTML文の文字コードはUTF-8ですよ、という意味。HTMLファイルの実際の文字コードと、ここに記載された文字コードがずれると文字化けする。文字化けが起きたときは、ここを修正するか、HTMLファイルの文字コードを変えて保存する。
  • <title>～</title>
    タイトルタグ。Webページのタイトルはこれですよ(この情報がブラウザのタイトルバーや検索結果などに表示される)、という意味。検索エンジンは、このタイトルタグの情報からウェブページの検索ワードを収集するため、タイトルタグに設定する情報は、検索されやすくするための検索エンジン対策(SEO)にとってきわめて重要。
  • <body>～</body>
    ボディタグ。HTML文書の本文はここですよ(コンテンツは通常この中に記載)、という意味。
　これを見て「覚えきれない」と思った人、安心して下さい。覚える必要はありません。これは基本タグですので、共通のタグ。先に作ったひな型ファイルに保存されています。覚えなければいけないことは、<title>～</title>タグにウェブページのタイトルを入れることと、<body>～</body>タグの中にウェブページのコンテンツを入れていくこと、それぐらいです。すぐに慣れます。
　それからタグは、基本的に、開始タグ<●>で始まり終了タグ</●>で終わります。ただ、<●>だけで、終了タグ</●>のないタイプもあります。基本タグの中で言うと、ドックタイプ宣言<!DOCTYPE html>や、メタタグ<meta charset="UTF-8">は、終了タグがありませんよね。ウェブページは、このようなタグでできている、ということだけ確認しておいて下さい。

半角文字と入れ子関係

　この基本タグを見て注意事項を2つ。
　一つは、HTMLのタグは基本的に半角文字を使うということ。基本タグのタグ「< >」の中をよく見て下さい。すべて半角の文字になってますよね。全角はダメです。例えば「ｈｔｍｌ」はダメで「html」と書きます。「＝”ＵＴＦ－８”」もアウト。「="UTF-8"」が正解。さらに「meta charset」の「meta」と「charset」の隙間も「半角」スペースです。全角スペースを入れるとおかしくなります。もちろんタグの「＜ ＞」も全角はダメ。半角で「< >」です(ここでの表示の違いはわずかですがプログラム的には大きな違いです)。
　もう一つは、タグ同士は入れ子構造にするということ。基本タグをよく見てみるとわかるように、<●>～</●>という開始タグと終了タグのセットが入れ子構造になっています。入れ子構造が交差するようなことはありません。以下のイメージで確認して下さい。

　　

　　タグの入れ子構造
ページのトップへ戻る
SPONSORED LINK