homepage-navi＞ホームページ作成＞html基本構造
ホームページ作成
ｈｔｍｌ基本構造
ここではｈｔｍｌの基本的な構造を説明していきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>〜</title>
</head>
<body>
</body>
</html>
|
上記がホームページのすべての要素を取り払った必要最低限の骨組みになっています。
DOCTYPE宣言
ドキュメントタイプ、又はドクタイプと読みます。DOCTYPE宣言が記述された文書の HTML が、どのバージョン（規格）で記述されているかを宣言します。
詳細
html 要素
HTMLとは【HyperText Markup Language】の略でウェブページを記述するための言語です。
HTML文章の宣言。
<html>〜 </html>の部分です。
lang属性は、言語を文書の言語を指定しています（省略可能）。
<html lang="ja">と記述し、様々なブラウザに対応する為に言語を指示する事があります。jaは日本語。
head 要素
ヘッダ。
ページの様々な情報を記述します。原則的にはブラウザ上では表示されない部分です。
<head>〜</head> の部分をヘッダと呼びます。ヘッダ部にはページタイトルや、またブラウザ上では表示されない情報（<meta>）などを記述します。
<meta>タグ詳細
title 要素
<title>〜</title> 部分にサイトや、ページのタイトルを記述します。
このタイトルはブラウザのタイトルバーに表示されます。また検索エンジンの検索結果として表示されるので 必ず記入しましょう。ブラウザ画面上部に表示されたり、お気に入りに追加した時の登録文字にもなります。通常は、サイトのタイトルを入れます。
ブラウザ左上部の表示や、お気に入り、ブックマークの表示を
させるだけでなく、今後インターネットへ公開する上で、サーチエンジンを意識したタイトルをつける事も重要です。
たとえば、 自動車教習所のサイトのタイトルなら山原自動車教習所ですが、これを入校案内/山原自動車教習所、
と、記述することで、訪問者にとって、山原自動車教習所が、そのホームページで何を説明しているのか分りやすくなります。
また、titleタグに記述された単語は、すべてキーワードになりロボット型検索エンジンで重要視されるポイントです。
ただし、あまりに説明が長いと、訪問者がお気に入りやブックマークをしてくれた場合に、逆にそのサイトが見つけにくくなりますので、その場合は、サイト名を先に持ってくるのもテクニックの１つだと思います。
body 要素
<body>〜</body> の部分に本文を書きます。
実際に私達が見ているのは、この部分でブラウザに表示される部分です。 <body> は、<html>〜</html> の間に一度だけ記述します。
文書構造
<h>タグ -
見出しタグで<h1>〜<h6>まであります。
<h1>が1番大きな見出しで順に小さくなります。検索エンジンのロボットは、この見出しタグを重要視します。
また文章記入の基本は[見出し]→[文面]、[小見出し]→[文面]と書くのが正しい構造です。
これは見出しを指定するタグであり、これを解釈して目次を表示する機能をもったブラウザも存在します。単にフォントの大きさを変更する目的であれば、<font size=...>、<big>、やスタイルシートなどを利用しましょう。
<p>タグ -
段落を意味します。
上記の[見出し]→[文面]、[小見出し]→[文面]はタグに置き換えると<h1>→<p>、<h2>→<p>となります。
見出しタグも段落タグも<h1>見出し</h1>、<p>文章</p>というように各文面を<タグ>文面</タグ> とマークアップします。
<br>タグ -
br は BReak（改行）の略でテキストをこの<br>の位置で改行します。
HTML文書中の改行は無視されるか、1文字分のスペースとして扱われるため、文章を明示的に改行するためには <br> を用います。
リスト リストは、リストを作成するタグの事です。
いくつか種類があり、用途によって使い分ける事ができます。下記はリスト記述例です
-
・順不同
| 表示 |
タグ |
|
|
<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>
|
↑上記htmlサンプル
簡単なサンプルでしたが、いかがでしょうか？
<h1>等のタグはデフォルト状態でフォントのサイズとかが決まっているので、ある程度文章だけでも意味合いが通じますよね。
ちなみに、見栄えも重要視する場合は<h>タグ等の設定をスタイルシートにて変更できます。
スタイルシートについてへ
ページTOPに戻る
|
