HTMLの基本を説明していきます。構成、タグの種類など。HTML5を基本として明記します。
HTMLの基本構成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
- DOCTYPEは宣言
-
<html></html>で囲む -
<head></head>はページ上に表示させない情報 -
<head></head>には最低meta charset="UTF-8", titleを書く -
<body></body>の中にページ上に表示させる情報を書く
タグ
<p>あいうえお</p>
- 情報、文字はタグで囲う
タグの種類
必ず使うタグ
HTMLファイル作成時に必要になります。
html
<html></html>
- すべてを囲う
head
<head></head>
- 情報を入れる
body
<body></body>
- ページ上に表示させる部分
よく使うタグ
ページを作っていく上で、使用頻度の高いタグです。
h1
<h1>見出し</h1>
- 見出しを囲う
- h1〜h6まである
p
<p>段落</p>
- 段落
ul > li
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
- リスト
dl > dt, dd
<dl>
<dt>定義されたもの</dt>
<dd>定義されたものの詳細・内容</dd>
<dd>定義されたものの詳細・内容</dd>
<dd>定義されたものの詳細・内容</dd>
</dl>
- 定義リスト
a
<a href="http://codershigh.jp">codershighのサイトを見る</a>
- リンク
- 囲まれた要素をクリックするとhrefに挿入されているURLに移動する
img
<img src="/img/example.jpg" alt="海">
- 画像の挿入
src="画像のパス"alt="画像の代替テキスト"
header
<header>
<a href="/"><img src="logo.png" alt="ロゴ"></a>
</header>
- ヘッダー部分を囲う
footer
<footer>
<ul>
<li><a href="info.html">お知らせ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="about.html">このサイトについて</a></li>
</ul>
</footer>
- フッター部分を囲う
section
<section>
<h1>見出し</h1>
<p>説明</p>
</section>
- 見出し > 説明などの構文を囲う
- hタグ（見出し）と内容（pタグに限らない）が必要
main
<main>
<section>
<h1>見出し</h1>
<p>説明</p>
<section>
<h2>見出し</h2>
<p>説明</p>
</section>
</section>
</main>
- メインコンテンツを囲う
div
<div>
<p>説明</p>
<p>説明</p>
<p>説明</p>
</div>
- 見出し > 説明などの構文にならないとき、ブロックを作るために使う
span
<p>今回の金額は<span class="price">1,000円</span>になります。</p>
- その箇所のスタイルを設定したいときに使うことが多い
table
<table>
<thead>
<tr>
<th>会場名</th>
<th>金額</th>
<th>人数</th>
<th>合計</th>
</tr>
</thead>
<tbody>
<tr>
<td>A会場</td>
<td>1,000円</td>
<td>20</td>
<td>20,000円</td>
<tr>
</tbody>
</table>
- 表の作成などに使う
-
thが種類名、tdが内容 -
trで一行になる
フォーム関連
フォームを使って情報を送るときなどに使用します。
form
<form action="xxx" method="post">
</form>
- 情報を送りたい部分全体を囲います。
input
<input type="text">
<input type="checkbox">
<input type="radio">
-
type="text"= テキスト入力部分の作成 -
type="checkbox"= チェックボックスの作成 -
type="radio"= ラジオボタンの作成 - 最新ではこれら以外にも色々な種類が使えます。
他、formでよく使う要素
<select>
<option value="1">1人</option>
<option value="2">2人</option>
<option value="3">3人</option>
</select>
- プルダウンの作成
- select > optionで構成する
<textarea></textarea>
- テキストエリアの作成
その他
small
<small>Copyright (C) 2015 ○○○○ All Rights Reserved. </small>
- コピーライトなどを囲う