MENU

HTML5におけるhtmlタグの開始・終了タグの基本的な書き方と閉じタグのいらない要素とは

【PR】アフィリエイト広告リンクを含みます。

HTML5の勉強をしていると、真っ先に覚える必要があるのがhtmlタグの開始タグと終了タグの書き方です。

htmlの文法というか構文は、基本的にこの開始タグと終了タグを適切な順序で配置することで完了します。

セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント

例えばタイトルタグ(<title>)を例に出してみると、以下のようになります。

<title>ここにタイトルを記述する</title>

開始タグはそのまま、終了タグは開始タグの前に「/(スラッシュ)」を書くだけです。

目次

htmlタグには終了タグ(閉じタグ)を省略できるものも存在する

そもそも終了タグ(閉じタグ)が存在しない ≒ 付けるとエラーになる

  • <br>
  • <hr>
  • <img>
  • <input>
  • <meta>
  • <area>
  • <base>
  • <col>
  • <embed>
  • <keygen>
  • <link>
  • <param>
  • <source>

※五十音順、頻出タグのみ先頭に列挙。

これらのタグは終了タグが存在しないため、もし付けてしまうとエラーになります。これぞ蛇足。

ただし、以下の書き方は全て認められています。

<br>
<br/>
<br />

終了タグを省略できるhtmlタグ

  • <li>
  • <dt>
  • <dd>
  • <p>
  • <tr>
  • <td>
  • <optgroup>
  • <option>
  • <rt>
  • <rp>
  • <tfoot>
  • <th>
  • <thread>

※五十音順。

リストタグの使い方から確認すると、以下になります。

<ul>
    <li>リスト1
    <li>リスト2
</ul>

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
</ul>

上記2つのリストタグの使い方は、どちらも正しいし表示上問題ありません。

下だとコードが冗長になるため、上の書き方で記述されている場合もありますが、閉じタグが無いとどこまでが範囲なのか見にくいこともあるので、書いておいた方が無難です。

開始タグも終了タグも省略可能な<html>,<head>,<body>もありますが、これらを省略してウェブページを構築することはまず無いため、今回は割愛します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次