HTMLタグの基本説明とページの設定 - 個人サイトのためのHTML LS講座

HTMLの書き方についての導入説明です。

HTMLタグの使い方 / ブロックレベル要素とインライン要素 / タグによるページ設定 / メモ書きの挿入方法 / ソースコードをそのまま表示させる方法

HTMLタグの使い方

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

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

▲ページの先頭へ

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

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

◆ブロックレベル要素: ブロックレベル要素は、見出し・段落・表といった文書を構成する基本となる要素で、一つのかたまりとして扱われます。基本的に前後に改行が入って表示されます。
ブロックレベル要素には、たとえば以下のものがあります。
<div>、<h1>-<h6>、<p>、<table>、<ol>、<ul>、<dl>、<hr>、<pre>、<address>

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

ブロックレベル要素の中には、他のブロックレベル要素・インライン要素・文字データを配置します。インライン要素の中には、他のインライン要素・文字データを配置します。
したがって、インライン要素の中にブロックレベル要素を配置することはできません。

▲ページの先頭へ

タグによるページ設定

以下の内容が、ウェブページの作成に必要となる基本的な要素になります。

<!DOCTYPE html>: 文書がHTMLで作成されたものであることを宣言するタグです。DOCTYPE宣言が無いと、制作者の意図しないページレイアウトになってしまう場合があります。

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">: 検索エンジンやブラウザにウェブページの情報を伝えるためのmeta（メタ）要素とよばれるタグの1つで、そのページがどの文字コードで書かれているかを指定します。文字コードを指定しないと文字化けすることがあります。
HTML Living Standardでは「utf-8」が使われているため、かならず「utf-8」で指定します。なお、その際サーバーの管理画面上の文字コード指定も「UTF-8」に設定します。

<meta name="viewport" content="width=device-width">: 表示画面をパソコン・タブレット・スマートフォン・ガラケーなど、利用者のさまざまな媒体の画面サイズに適応させるため、必要であればこのmeta要素も記載します。

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

<head>・・・</head>: このタグの中にmeta要素やタイトルなどの基本的なページの情報を書きます。

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

これらのタグを以下のような形式で書きます。


<!DOCTYPE html>

<html lang="ja">



<head>

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

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

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

 </head>



 <body oncontextmenu="return false">

  ここに内容となる文書を書く

 </body>



</html>

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

▲ページの先頭へ

メモ書きの挿入方法

のように、 で囲んだ部分はメモ書きとして扱われ、ブラウザには表示されません。ソース内のどこに書いてもOKで、メモ書きを複数行にすることも可能です。

▲ページの先頭へ

ソースコードをそのまま表示させる方法

この解説ページのようにソースコードをそのまま表示させたい場合、< を < 、> を > と表記すれば、タグとして認識されずにそのまま文書として表示されます。
なお、< と > をそのまま表示させるためには、& の部分を & と表記します。

▲ページの先頭へ

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