最近仕事でPHPファイル内にHTMLを書くことが多かったので、改めて復習しました。
HTMLファイル基本構成
<!DOCTYPE> // DOCTYPE宣言
<html> // htmlタグ
<head> // headタグ
</head>
<body> //bodyタグ
</body>
</html>
DOCTYPE宣言
HTML文書がどんな仕様、バージョンで書かれているかをブラウザに伝えるために記載をする宣言。
HTML文書の先頭で宣言を行う。
※Document Type Definition
例
HTML4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML5以降のバージョン
<!DOCTYPE html>
htmlタグ
ドキュメントがHTML文書であることを示すタグ。
DOCTYPE宣言の後にhtml開始タグを記載し、文書の最後に終了タグを記述する。
headタグ
ブラウザに向けた情報を記述するタグで、htmlタグの直下に一つだけ記載することができる。
headタグ内ではtitleタグ、metaタグ、linkタグなどを使用する。
基本的にWebページ訪問者からは見えない情報が多くあるが、SEOの観点からもheadタグを適切に記載することは大切。
bodyタグ
Webページ訪問者から直接見える部分を記述する。
HTMLタグ一覧
headタグ内
| タグ名 | 内容 | 補足 |
|---|---|---|
| meta charset | 文字コードの指定 | 基本的に文字コードはutf-8を使用 |
| title | ページタイトル | 終了タグあり |
| meta name="description" | ページの説明 |
content=""で説明を記述 |
bodyタグ内
| タグ名 | 内容 | 補足 |
|---|---|---|
| h | 見出しの作成 | h1からh6まである |
| img | 画像の埋め込み | 終了タグがなく、src属性を付与して画像の場所を指定する |
| ul | リストを作成 | |
| li | リストの記述 | ulタグの中に1つずつ記述していく |
| br | 改行 | 終了タグなし |
| a | リンクの挿入 | 終了タグがなく、href属性を付与してURLを指定する |
| p | 段落の作成 | 終了タグ後はbrよりも行間が大きく取られる |
| table | 表の作成 | trタグ、thタグ、tdタグを使用して表を作成する |
| hr | 横線を引く |