HTMLタグの基本説明とページの設定

HTMLの導入説明です。

HTMLは、タグとよばれるものを使って書いていきます。 < と > で囲まれたものをタグと言い、 <タグ名> のように書きます。
タグは基本的に開始タグと終了タグに分かれています。開始タグは <タグ名> のように書き、終了タグは </タグ名> のように、/(スラッシュ)を入れて書きます。開始タグと終了タグで文書を囲む形で書き、これで1セットとなります。
なお、タグは <> と </> も含め、かならず半角文字および小文字で書きます。

<タグ名>この囲まれた部分に文書を書きます。</タグ名>

HTMLタグには、「ブロックレベル要素」と「インライン要素」があります。

◆ブロックレベル要素

ブロックレベル要素は、見出し・段落・表といった文書を構成する基本となる要素で、一つのかたまりとして扱われます。基本的に前後に改行が入って表示されます。
ブロックレベル要素には、たとえば以下のものがあります。

<div>、<h1>-<h6>、<p>、<table>、<ol>、<ul>、<dl>、<hr>、<pre>、<address>

◆インライン要素

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文書の中の一部分に使います。基本的に前後に改行は入らず、文書の一部として表示されます。
インライン要素には、たとえば以下のものがあります。

<span>、<a>、<b>、<img>、<br>、<code>、<small>

ブロックレベル要素の中には、他のブロックレベル要素・インライン要素・文字データを配置します。インライン要素の中には、他のインライン要素・文字データを配置します。
したがって、インライン要素の中にブロックレベル要素を配置することはできません。
ウェブページの作成に必要となる基本的な6つのタグについて説明します。

<html>・・・</html>

「これはHTML文書である」と宣言するタグです。
文書が日本語であることを指定するために、開始タグは <html lang="ja"> と書きます。

<head>・・・</head>

このタグの中に基本的なページの情報を書きます。

<title>・・・</title>

ページのタイトルを指定するタグです。ここで指定した内容はブラウザのタイトルバーに表示されます。

<body>・・・</body>

このタグの中にブラウザに表示させる内容を書きます。
なお、閲覧者による画像の保存や文書のコピペを禁止したい場合、開始タグは <body oncontextmenu="return false"> と書きます。

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

検索エンジンやブラウザにウェブページの情報を伝えるためのmeta(メタ)要素とよばれるタグの1つで、そのページがどの文字コードで書かれているかを指定します。文字コードを指定しないと文字化けすることがあります。
一般的に「Shift_JIS」が使われているため、このように指定します。これをhtmlの開始タグとheadの開始タグの間に書きます。

<meta name="viewport" content="width=device-width">

表示画面をパソコン・iPad・スマートフォン・ガラケー等のどの媒体にも適応させるため、必要であればこのmeta要素もhtmlの開始タグとheadの開始タグの間に書きます。

これらのタグを以下のような形式で書きます。
<html lang="ja">

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="viewport" content="width=device-width">

<head>
<title>ここにタイトルを書く</title>
</head>

<body oncontextmenu="return false">
ここに内容となる文書を書く
</body>

</html>
なお、「lang="ja"」のように、=(イコール)の後に指定する内容が ""(引用符)で囲まれていますが、これは必須となります。

<!-- メモ書き -->

のように、<!-- と --> で囲んだ部分はメモ書きとして扱われ、ブラウザには表示されません。ソース内のどこに書いてもOKで、メモ書きを複数行にすることも可能です。
この解説ページのようにソースコードをそのまま表示する必要がある場合、< を &lt; 、> を &gt; と表記すれば、タグとして認識されずにそのまま文書として表示されます。
なお、&lt; と &gt; をそのまま表示するためには、& の部分を &amp; と表記します。

>>HTML講座メニューへ戻る