HTMLの基本構造

janbocloudHTML

HTMLファイルを作成する上で必ず書かなくてはいけないコードについて勉強していきましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <script></script>
  </head>
  <body>
  <body>
</html>

HTMLバージョンの宣言

<!DOCTYPE html>

HTMLは現在　HTML5　が主流で使われています。１行目に必ず書きましょう。
宣言方法は決まってるので、なぜこんな書き方なのかは気にせず書きましょう。

ただし、大文字小文字に関しては特に制約はありませんが、下のソースコードの１行目２行目がよく使われています。

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype htML>

HTML文書の宣言

 <html>　～　</html>

『ここから～ここまでがHTML文書ですよ』と宣言するタグで、開始タグ～終了タグで囲むように記述必要があります。
ほぼ全てに該当するため、バージョンの宣言後に開始タグ、コードの最後に終了タグを記述します。

ヘッダ情報の記述

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

ページで最初に読み込まれる必要のある情報を記述します。

文字コードの宣言

<meta charset="utf-8">

ブラウザによっては宣言しなくても自動で識別してくれるものもありますが、識別できない場合『文字化け』を起こしてしまうので宣言しておく方が良いでしょう。
よく使われる文字コードは
・utf-8 (推奨)
・shift-jis

タイトルの宣言

<title>タイトル</title>

ブラウザのタブ部分に表示するタイトルを記述します。

CSSの読み込み

<link rel="stylesheet" href="読み込むCSSファイルの保存場所">

これも書き方は決まっていて、href=””のダブルクォーテーション内にファイルパス記述します。記述する方法は相対パスまたは絶対パスです。
相対パス：編集中のhtmlファイルから見てcssファイルがどこにあるかを示すファイルパスのことです。
絶対パス：編集中のhtmlファイルがどこにあるかに関わらず、変わらないファイルパスのことです。

まずは相対パスについての例です。
[ex]フォルダの中に[index.html]ファイルを配置し、[index.html]ファイルを編集中だとする。

この場合の記述方法は”stylesheet.css”
もし明示的に記述したい場合は”./stylesheet.css”
意味は『このフォルダのcssファイル』

この場合の記述方法は”css/stylesheet.css”
意味は『[css]フォルダの中の[stylesheet.css]ファイル』

この場合の記述方法は”../css/stylesheet.css”
意味は『ひとつ上の階層に戻り、[css]フォルダの中の[stylesheet.css]ファイル』

続いて絶対パスについての例です。
Cドライブに[ex]フォルダがあり、その中に[css]フォルダあり、その中にcssファイルがある場合は”file:///C:/ex/css/stylesheet.css”

ただし、通常Webサイトを公開する際はサーバーにアップしますので、
“http://ドメイン名/css/stylesheet.css”といったようになる。

他にも記述方法はあるが、今回はこのぐらいにしておこう。

スクリプトの記述

<script></script>

これは必ず記述するとは言い切れないが、javascript等を使用する際に使用される。一応javascriptの記述方法を記載しておくが、詳しいことはまた今度。

<script type="text/javascript" src="javascriptの保存場所"></script>

ページ本文

<body>　～　</body>

実際にページに表示される部分です。

最後に

このコードは毎回書かなければいけないため、ベースファイルとして作っておいて、新しいページを作成する際はコピーして使うのもいいかもしれませんね。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  </head>
  <body>
  <body>
</html>

コメントを残す