More than 3 years have passed since last update.

HTMLの基本まとめ

HTML

Last updated at 2020-09-08Posted at 2020-09-08

HTMLの基本まとめ

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座の本を読んで、備忘録的にまとめていきます。
詳しくは本を読まれることをお勧めします。

HTMLのファイル名

フォルダも含めて、半角かつ英数字かつ小文字と記号（ハイフンとアンダースコア）のみOK。
拡張子は.html
ホームページ（URLにアクセスして一番初めに表示されるページ）はindex.htmlにする。

HTMLの必須なタグ

<!-- このページがどのバージョンのHTMLなのか示す。バージョン指定がなければ主流のHTML5のことを指す -->
<!DOCTYPE html>

<!-- 文字コードの指定 -->
<html lang="ja">

  <!-- ページの情報を記述する。ブラウザには表示されない。 -->
  <head>
    <!-- 文字コードの指定 -->
　  <meta charset="utf-8">

    <!-- ページタイトルを指定する。ブラウザーのタブやブックマーク字のタイトルになる。 -->
    <title>HTMLの基本まとめ</title>

    <!-- ページについての説明文を記述する。検索エンジンでタイトルと一緒に表示される。 -->
    <meta name="description" content="HTMLの基本をまとめてみた">
  </head>

  <!-- ブラウザに表示するコンテンツ -->
  <body>
  </body>
</html>

タグのルール

<head></head>のように、開始タグと終了タグがセットになっているものと、<meta>のように１つだけで使うものもある。
<a href="index.html"></a>のように、開始タグには属性を加えられる。

基本的なタグ

見出し、リンク、リスト、表、フォームのタグ使い方まとめです。

###見出し

<h1>見出し</h1>

###リンク（テキスト)

<a href="リンク先のURL">リンクテキスト</a>

###リンク（画像)

<a href="リンク先のURL">
<img src="画像の相対パス" alt="画像の説明">
</a>

###リンク(メアド)

<a href="mailto:送り先のメアド">リンクテキスト</a>

###リスト(番号なし)

<ul>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
</ul>

###リスト(番号あり)

<ol>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
</ol>

###表
下記の表はこんな感じで表示されます。
tableタグのborder属性の数字は枠の太さを表します。

<table border="1">
  <!-- 1行目 -->
  <tr>
    <th>1列目の見出し</th>
    <th>2列目の見出し</th>
  </tr>
  <!-- 2行目 -->
  <tr>
    <td>1列目のセル</td>
    <td>2列目のセル</td>
  </tr>
  <!-- 3行目 -->
  <tr>
    <td>1列目のセル</td>
    <td>2列目のセル</td>
  </tr>
</table>

フォーム

<form action="送信先のURL" method="データ送信方法(POSTかGET)" name="フォームの名前">
  <!-- 1行テキスト入力(テキスト) -->
  <!-- 属性値をサポートしているブラウザではフォーマットチェックしてくれる -->
　名前： <input type="text" placeholder="テキストエリアにデフォルト表示させるテキスト">

  <!-- 1行テキスト入力（メアド） -->
　メール： <input type="email" placeholder="テキストエリアにデフォルト表示させるテキスト">

  <!-- 1行テキスト入力（電話番号） -->
　電話： <input type="tel" placeholder="テキストエリアにデフォルト表示させるテキスト">

  <!-- ラジオボタン -->
　性別:
  <!-- checked属性をつけた選択肢がデフォルトで選択される -->
  <input type="radio" name="ラジオボタングループ名" value="送信する選択肢の値その1" checked>
  <input type="radio" name="ラジオボタングループ名" value="送信する選択肢の値その2">
  <input type="radio" name="ラジオボタングループ名" value="送信する選択肢の値その3">

  <!-- チェックボックス -->
　種類:
  <!-- checked属性をつけた選択肢がデフォルトで選択される -->
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その1" checked>
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その2">
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その3">

 <!-- チェックボックス(選択肢をラベルで表示) -->
　種類:
  <!-- checked属性をつけた選択肢がデフォルトで選択される -->
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その1" id ="選択肢1のID" checked>
  <label for="選択肢1のID">表示する選択肢その1</label>
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その2" id ="選択肢2のID">
  <label for="選択肢2のID">表示する選択肢その2</label>
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その3" id ="選択肢3のID">
  <label for="選択肢3のID">表示する選択肢その3</label>

  <!-- 送信ボタン(テキスト) -->
　<input type="submit" value="ボタンに表示するテキスト">

  <!-- 送信ボタン(画像) -->
　<input type="image" src="画像の相対パス" alt="画像の説明">

  <!-- プルダウン -->
　<select name="プルダウン名">
　　  <!-- selected属性をつけた選択肢がデフォルトで選択される -->
　　　<option value="送信する選択肢の値その1" selected>表示する選択肢テキスト</option>
     <option value="送信する選択肢の値その2">表示する選択肢テキスト</option>
     <option value="送信する選択肢の値その3">表示する選択肢テキスト</option>
     <option value="送信する選択肢の値その4">表示する選択肢テキスト</option>

  <!-- 複数行テキスト入力 -->
  <textarea name="テキストエリア名" placeholder="テキストエリアにデフォルト表示させるテキスト"></textarea>

</form>

##ブロック要素
CSSでデザインを設定しやすいようにブロック要素のタグを使ってグループ分けをします。

###ヘッダー(header)

<header>
  <h1>タイトルテキスト</h1>
　<p>テキスト文など</p>
</header>

ナビゲーション(nav)

header要素の中に入ることが多い

<header>
  <h1>タイトルテキスト</h1>
  <nav>
    <ul>
      <li><a href="リンク先のURL">メニュー1</a></li>
      <li><a href="リンク先のURL">メニュー2</a></li>
      <li><a href="リンク先のURL">メニュー3</a></li>
    </ul>
  </nav>
</header>

記事（article)

<article>
  <h2>タイトルテキスト</h2>
  <p>テキスト</p>
</article>

任意のテーマを持つグループ(section)

<section>
  <h2>タイトルテキスト</h2>
  <p>テキスト</p>
</section>

メインコンテンツをまとめる(main)

<main>
  <article>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
  </article>
  <section>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
  </section>
</main>

メインコンテンツ以外をまとめる(aside)

<aside>
  <article>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
  </article>
</aside>

フッター(footer)

<footer>
    <ul>
      <li><a href="リンク先のURL">メニュー1</a></li>
      <li><a href="リンク先のURL">メニュー2</a></li>
      <li><a href="リンク先のURL">メニュー3</a></li>
    </ul>
</footer>

その他のグループ分け(div)

<div>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
</div>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up