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>の中にページ上に表示させる情報を書く

タグの種類

必ず使うタグ

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>

コピーライトなどを囲う