いちから始めるホームページ作成

HTML・CSSのことがよくわかる初心者から始めるホームページ制作

HTMLソースの記述方法

実際のHTMLソースは、以下のように記述します。

DOCTYPE宣言
<html>
<head>
head中身
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
<html>

DOCTYPEとhead部分は、HTML(XHTML)のバージョンによって記述が異なります。

HTML4.01の場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ページタイトル</title>
<meta name="description" content="ページの説明文">
<meta name="keywords" content="ページのキーワード(複数の場合は半角カンマで区切る)">
<link rel="stylesheet" type="text/css" href="外部化したCSSファイルへのパス">
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
</html>

XHTML1.0の場合

<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>ページのタイトル</title>
<meta name="Description" content="ページの説明文" />
<meta name="Keywords" content="ページのキーワード(複数の場合は半角カンマで区切る)" />
<link href="外部化したCSSファイルへのパス" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
</html>

※XHTML1.0の1行目に記述しているXML宣言はサーバーによってエラーになり、画面が白くなる場合があります。 その場合は、1行目を削除してアップロードしてください。

テキストエディタなどで、上記のソースを記述したら、任意の文字コードを指定し、拡張子を「.html」または「.htm」にして保存します(PHPを使う場合は拡張子を「.php」にしてください)

文字コード(shift-jis、utf-8など)を記述する部分は、必ずファイルの文字コードと同じにしてください。

utf-8で保存する場合、BOMを付けるとレイアウト崩れを起こすことがありますので、BOMは付けないようにしてください。

meta情報のDescriptionとKeywordsは省略しても構いません。

HTMLタグ
CSS
一口メモ
サンプルソース
用語集