HTMLの文法 これからHTMLをはじめる人のために

Web/ブログ
2021.03.21

HTMLの基礎の基礎についてまとめました。
CSS,PHPとの連携については、改めて別記事で整理します。

html文書の基本

タグ

htmlを用いることで、文章に対して付加的な情報を付け加えた文書を作成することができます。下記に示すように、開始タグと終了タグを用いて、コンテンツ内容に対して情報を付加します。

<開始タグ> コンテンツ内容 <終了タグ＞

基本的にタグ名の書き方に大文字と小文字の区別はありませんが、バージョンによっては小文字で記述する必要があるものもあるので、小文字で統一するのが望ましいです。

複数のタグをつける場合、タグは入れ子状になるようにつけていきます。

下記の例だと、先頭から\<p>タグ、\<strong>タグの順にタグをつけているので、先に\タグでstrong要素を閉じて、その後、\タグでp要素を閉じるのが正しい書き方ですが、誤った書き方では、閉じる順番が逆転しています。

<!-- 正しい書き方 -->
<p>吾輩は<strong>ねこである？</strong></p>

<!-- 誤った書き方 -->
<p>吾輩は<strong>たぶんねこである？</p></strong>

属性

開始タグの中に付加情報を書くことがあります。この情報のことを属性といい、属性に対して値を設定できます。値はダブルクォーテーションで囲んで記述します。

下記の例ではaタグにhref属性を追加しており、その値は「about.html」です（後で出てきますが、aタグはリンクを作成する要素です）。

  <a href="about.html">Aboutページ</a>

(出力)

Aboutページ

超基本の要素

見出し

<h1>〜<h6>タグで見出しをつけられます。<h1>タグは1つのWebページに1つが望ましいです。
<h1>,<h2>,…と順番に階層構造を保つように使います。文字の大きさが望み通りだからといって、順番を飛ばすような使い方は望ましくありません。

<h1>見出し1</h1> 
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

(出力)

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

段落

<p>タグで文章の段落を表すことができます。

  <p>吾輩は猫である。名前はまだ無い。</p>
  <p>どこで生まれたかとんと見当がつかぬ。
  何でも薄暗いじめじめした所で
  ニャーニャー泣いていたことだけは記憶している。
  吾輩はここで始めて人間というものを見た。
  </p>

(出力)

吾輩は猫である。名前はまだ無い。

どこで生まれたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていたことだけは記憶している。 吾輩はここで始めて人間というものを見た。

htmlコードの上では、「〜検討がつかぬ。」「〜所で」「記憶している。」の箇所で改行していますが、出力される文章では、<p>タグの括りで段落が作成されています。

コメントアウト

「<!–」と「–>」で囲うことでコメントアウトできます

<p>吾輩はねこである？</p>
<!-- ここはコメント。最後にクエスチョンマークがついているのは、吾輩はほんとうはねこではないから -->

<p>名前はまだない<p>

(出力)

吾輩はねこである？

名前はまだない

 

コメントの部分はブラウザには出力されません。

基本の要素

画像

<img>タグで画像を表示することができます。src属性（パス＆ファイル名）、alt属性が必須（画像が表示できないときの代替文字列）になります。<img>タグは<h1>タグや<p>タグと異なり、終了タグはありません。

<img src="cat.jpg" alt="猫の写真">

（出力）

猫の写真

リンク

<a>タグででリンクを貼ることができます。リンク先の情報はhref属性で与えます。リンクさせたい部分を<a href=”リンク先url”>と</a>でで挟むことで、文章や画像にリンクを作ることができます。

<p>
  今すぐ<a href="https://google.co.jp">Google</a>で検索!
</p>

  <!--  画像にリンクを貼る -->
<p>
  画像をクリックするとGoogleに行くにゃん<br>
  <a href="https://google.co.jp">
  <img src="cat.jpg" alt="猫の写真">
  </a>
</p>

  <-- メールアドレス宛のリンク -->
<p>
  <a href="mailto:info@example.com">お問い合わせ</a>
</p>

（出力）

今すぐGoogleで検索!

画像をクリックするとGoogleに行くにゃん

猫の写真

<– メールアドレス宛のリンク –>

お問い合わせ

リスト

箇条書き

<ul>タグ+<ul>タグで箇条書きリストを作ることができます。ulはUnorderd Listの略です。リストの中身は、<li>タグと<li>で囲みます。liはList Itemの略です。

  <ul>
    <li>吾輩は猫である</li>
    <li>坊ちゃん</li>
    <li>三四郎</li>
    <li>それから</li>
  </ul>

(出力)

  • 吾輩は猫である
  • 坊ちゃん
  • 三四郎
  • それから

番号付きリスト

<ol>タグ+<ol>タグで番号のついたリストを作れます。olはOrderd Listの略です。リストの中身は、<ul>同様、<li>タグと<li>で囲みます。

  <ol>
    <li>吾輩は猫である</li>
    <li>坊ちゃん</li>
    <li>三四郎</li>
    <li>それから</li>
  </ol>

（出力）

  1. 吾輩は猫である
  2. 坊ちゃん
  3. 三四郎
  4. それから

表を作る

表組みの基本

htmlを用いると表を作ることもできます。

<table>タグ：表を示すタグ。表全体を囲むみます。
<tr>タグ：　Table Rowの略で表の1行を囲みます。
<th>タグ：Table Headerの略で、表の見出しとなるセルを作ります。
<td>タグ：Table Dataの略で、表のデータとなるセルを作ります。

<table border="1">
  <tr>
    <th>作家</th>
    <th>代表作</th>
  </tr>
  <tr>
    <td>夏目漱石</td>
    <td>吾輩は猫である</td>
  </tr>
  <tr>
    <td> 芥川龍之介</td>
    <td>羅生門</td>
  </tr>
</table>

（出力）

作家 代表作
夏目漱石 吾輩は猫である
芥川龍之介 羅生門

セルをつなげる

colspan,rowspan属性を与えるとセルをつなげることができます。

横につなげる

colspan属性を与えると表を横につなげられます。

<table border="1">
  <tr>
    <th colspan="2">セル1+2</th>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
  <tr>
    <td>セル5</td>
    <td>セル6</td>
  </tr>
</table>

（出力）

セル1+2
セル3 セル4
セル5 セル6
縦につなげる

rowspan属性を与えると表を縦につなげられます。

<table border="1">
  <tr>
    <th>セル1</th>
    <th>セル2</th>
  </tr>
  <tr>
    <td rowspan="2">セル3+5</td>
    <td>セル4</td>
  </tr>
  <tr>
    <td>セル6</td>
  </tr>
</table>

（出力）

セル1 セル2
セル3+5 セル4
セル6

フォームを作る

タグを用いることで入力用のフォームを作ることができます。

<formタグ>

<form>タグでフォーム欄を作れる。記述する属性は以下の通り。

属性 用途
action データの送信先ページを指定
method データの転送方法の指定。主にgetかpostを入力
name フォームの名前を指定 
  <form action="example.php" method="post" name="contat-form">
    ここにフォームの部品が入る
  </form>

（出力）

ここにフォームの部品が入る

フォームで使うパーツ

以降、下記についてまとめます。

  • テキスト入力欄(1行)
  • テキスト入力欄(複数行)
  • ラジオボタン
  • チェックボックス
  • セレクトボックス
  • ラベル
  • 送信ボタン

テキスト入力欄(1行)　<input type=”text”>


名前： <input type="text">

おなまえ： <input type="text" placeholder="みょうじ　なまえ">

</p>

（出力）

名前： おなまえ：

typeには以下の値が指定できます。

属性値 用途
text 1行のテキスト（初期値）
search 検索するときのテキスト
email メールアドレス
tel 電話番号
url WebサイトのURL

type=”email”,type=”url”としておくと、正しい書式かチェックしてくれます。

 

テキスト入力欄(複数行) <textarea>

<p>
<textarea name="message" placeholder="メッセージを入力"></textarea>
</p>

（出力）

ラジオボタン <input type=”radio”>

属性 用途
name ラジオボタンの名前
value 送信される選択肢の値
checked 最初から選択されている状態にするときに指定 
<p>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked>女
<input type="radio" name="sex" value="その他">その他
</p>

（出力）

男 女 その他

チェックボックス <input type=”checkbox”>

属性 用途
name チェックボックスの名前
value 送信される選択肢の値
checked 最初から選択されている状態にするときに指定 
<p>
  <input type="checkbox" name="colour" value="red" checked>赤
  <input type="checkbox" name="colour" value="blue">青
  <input type="checkbox" name="colour" value="yellow">黄
  <input type="checkbox" name="colour" value="green">緑
</p>

（出力）

赤 青 黄 緑

セレクトボックス <select>タグ+<option>タグ

<select>タグ

属性 用途
name セレクトボックスの名前
multiple shit(ctrl)キーで複数の項目を選択可能にする

<option>タグ

属性 用途
value 送信される選択肢の値
selected 最初から選択されている状態にするとき指定 
<p>
血液型
<select name="bloodtype">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="O">O</option>
  <option value="AB">AB</option>
  <option value="不明" selected>不明</option>
</select>
</p>

（出力）

血液型

ラベル <label>タグ

<label>タグを使うことで、ラベルがラジオボタンやチェックボックスとリンクし、ラベル自体もラジオボタン、チェックボックスとして機能するようになります。

<p>
<input type="checkbox" name="travel" value="日本国内" id="jp">
<label for="jp">日本国内</label>

<input type="checkbox" name="travel" value="欧州" id="europa">
<label for="europa">欧州</label>

<input type="checkbox" name="travel" value="アジア" id="asia">
<label for="asia">アジア</label>

</p>

（出力）

送信ボタン <input type=”submit”>

属性 用途
name ボタンの名前
value ボタンに表示するテキスト

 

<p>
  <input type="submit" value="送信する">
</p>

（出力）