Home » 初級ホームページ作成講座 » ホームページの構造｜HTMLについて

HTMLについて｜初級ホームページ作成講座

東北地方太平洋沖地震　義援金・ボランティア関連情報

HTMLとはHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、ウェブ上のドキュメントを記述するためのマークアップ言語です。マークアップは開始タグで始まり終了タグで閉じます。

一部、終了タグの省略が許される場合やタグ記述に際して、大文字と小文字の区別をしない規則(正確には、文書型宣言の指定によって、大文字と小文字を同じとみなす場合と区別する場合を明確にわけています。)がありますが、本サイトでは

  • タグは必ず閉じる
  • すべて小文字で記述する

としています。これは、将来的にXHTMLへの移行を踏まえている点と、CSS制御を確実に行う事を目的としています。

記述見本

<DIV>*****</DIV> ----- 大文字で記述
<Div>*****</Div> ----- 大文字と小文字で記述
<div>*****</div> ----- 小文字で記述

HTMLの基本ベース

<html>
<head>
<title>～</title>
</head>
<body>～</body>
</html>

これがホームページのすべての要素を取り払った必要最低限の骨組みになります。この時点でも<body>～</body>内にデータを記述すればブラウザで閲覧する事が可能です。

基本ベースについて

<html>

HTMLとは【HyperText Markup Language】の略でウェブページを記述するための言語です。

<head>

<head>～</head> の部分をヘッダと呼びます。ヘッダ部にはページタイトルや、またブラウザ上では表示されない情報（<meta>）などを記述します。

<meta>
  • <meta http-equiv="Content-Type" content="text/html　charset=Shift_JIS">
    • 文字化けを防ぐために文書の文字コードを宣言しています。
  • <meta http-equiv="Content-Style-Type" content="text/css">
    • スタイルシートの基準言語を指定します。
  • <meta name="ROBOTS" content="ALL">
    • 検索ロボットへのページを読み込ませる際の指示です。
  • <meta name="description" content="ホームページの説明文">
    • ページの説明分を書きますます。
  • <meta name="keywords" content="コンテンツのキーワード">
    • ページ内のキーワードを書きます。
<title>

<title>～</title> 部分にタイトルを書きます。このタイトルはブラウザのタイトルバーに表示され、また検索エンジンの検索結果として表示されるので必ず記入しましょう。

<body>

<body>～</body> の部分に本文を書きます。ブラウザに表示される部分です。

<meta>タグを加えた際のHTMLの基本図

<html>
<head>
<meta http-equiv="Content-Type" content="text/html　charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="ROBOTS" content="ALL">
<meta name="description" content="ホームページの説明文">
<meta name="keywords" content="コンテンツのキーワード">
<title>～</title>
</head>
<body>～</body>
</html>

文書構造の基本

<h>タグ

見出しタグで<h1>～<h6>まであります。<h1>が1番大きな見出しで順に小さくなります。検索エンジンのロボットは、この見出しタグを重要視します。また文章記入の基本は[見出し]→[文面]、[小見出し]→[文面]と書くのが正しい構造です。

<p>タグ

段落(Paragraph)を意味します。上記の[見出し]→[文面]、[小見出し]→[文面]はタグに置き換えると<h1>→<p>、<h2>→<p>となります。見出しタグも段落タグも<h1>見出し</h1>、<p>文章</p>というように各文面を<タグ>文面</タグ> とマークアップします。

記述見本

<h1>*****</h1> ----- 見出し
<p>*****</p> ----- 段落
<p>*****</p> ----- 段落
<h2>*****</h2> ----- 見出し
<p>*****</p> ----- 段落
<p>*****</p> ----- 段落
<br>タグ

改行タグです。段落内でどうしても改行の必要がある場合を除き、過度に使用するのはやめましょう。

使用例(よくない例)

<p>HTMLとはHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、ウェブ上のドキュメントを記述するためのマークアップ言語です。<br>
マークアップは開始タグで始まり終了タグで閉じます。<br>
一部、終了タグの省略が許される場合やタグ記述に際して、大文字と小文字の区別をしない規則(正確には、文書型宣言の指定によって、大文字と小文字を同じとみなす場合と区別する場合を明確にわけています。)がありますが、本サイトではタグは必ず閉じる、すべて小文字で記述するとしています。<br>
これは、将来的にXHTMLへの移行を踏まえている点と、CSS制御を確実に行う事を目的としています。</p>

HTMLの正しい記述としては<br>を段落目的で多用する事は望ましくないとしています。つまり上記の場合は

<p>HTMLとはHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、ウェブ上のドキュメントを記述するためのマークアップ言語です。</p>
<p>マークアップは開始タグで始まり終了タグで閉じます。</p>
<p>一部、終了タグの省略が許される場合やタグ記述に際して、大文字と小文字の区別をしない規則(正確には、文書型宣言の指定によって、大文字と小文字を同じとみなす場合と区別する場合を明確にわけています。)がありますが、本サイトではタグは必ず閉じる、すべて小文字で記述するとしています。</p>
<p>これは、将来的にXHTMLへの移行を踏まえている点と、CSS制御を確実に行う事を目的としています。</p>

とします。

リスト

順不同

<ul>
<li>データ</li>
<li>データ</li>
<li>データ</li>
</ul>

順序

<ol>
<li>データ</li>
<li>データ</li>
<li>データ</li>
</ol>

定義型

<dl>
<dt>リスト名</dt>
<dd>データ</dd>
<dt>リスト名</dt>
<dd>データ</dd>
<dt>リスト名</dt>
<dd>データ</dd>
</dl>

HTML文章の基本的な書き方

ではここでホームページ文章の基本的な書き方を説明します。文章の書き方に気を使っている方は少ないのですが、万一、何らかの不具合がありホームページのレイアウトやデザインが表示されなくても、基本を守って記述していればある程度ホームページの内容は訪問者に伝わります。

また、スタイルシートで背景色や文字色の指定をしていても、スペルミスを含んでタグが正しくマークアップされていなければ値は反映されません。

基本は簡単です。上記<h>タグのところで説明したように、<h>→<p>、<h>→<p>とすればいいのです。

<body>
<h1>HTML文章の基本</h1>
<p>HTML文章の基本的な記述についての説明です。</p>
<h2>各種タグについて</h2>
<p>正しい文章を記述する為のタグは決まりきっています。以下に最低限のものを紹介します。</p>
<h3>最低限必要なタグ</h3>
<ul>
<li>見出し</li>
<li>段落</li>
<li>リスト</li>
</ul>
</body>

→上記サンプル

→このページをCSSオフにしたサンプル

簡単なサンプルでしたが如何です。<h1>等のタグはデフォルト状態でフォントのサイズやマージン等が決まっているので、丁寧なマークアップをしていればある程度文章だけでも意味合いが通じますよね。

因みに、見栄えに拘る場合は<h>タグ等の設定をスタイルシートにて変更できます。

page top ボタン