HTMLの書き方の基本となるタグは?

 

HTMLの基本タグ

HTMLの基本的なルール

HTMLは、Webページを作成するためのマークアップ言語です。基本的には「開始タグ」と「終了タグ」でコンテンツを囲い込むことで、テキストや画像をさまざまなスタイルで表現することができます。

開始タグと終了タグの中身が変わるだけで、「<>~</>」の形が変わることはありません。例えば、h2見出しでテキストを表示させたい場合は、以下のように表します。

<h2>見出しテキスト</h2>

よく使う基本的なタグ

HTMLには、多くのタグが存在しますが、ここでは特に基本となるタグをいくつか紹介します。

タグ名 説明
<html></html> HTML文書であることを示すタグ。文書全体を囲みます。

          <html>
            <head>...</head>
            <body>...</body>
          </html>
          
<head></head> 文書のヘッダー情報を記述するタグ。タイトルやメタ情報を記述します。

          <head>
            <title>ページタイトル</title>
            <meta charset="UTF-8">
          </head>
          
<body></body> ブラウザに表示される本文部分を記述するタグ。

          <body>
            <h1>見出し</h1>
            <p>本文</p>
          </body>
          
<h1>~</h1> 見出しを記述するタグ。h1~h6までレベルがあり、数字が小さいほど大きな見出しになります。

          <h1>大きな見出し</h1>
          <h2>中見出し</h2>
          
<p></p> 段落を記述するタグ。

          <p>これは段落です。</p>
          
<a></a> リンクを作成するタグ。href属性にリンク先URLを指定します。

          <a href="https://www.google.com/">Google</a>
          
<img> 画像を表示するタグ。src属性に画像ファイルのパスを指定します。alt属性で代替テキストを指定します。

          <img src="sample.jpg" alt="サンプル画像">
          
<ul></ul>, <ol></ol>, <li></li> リストを作成するタグ。ulは番号なしリスト、olは番号付きリスト、liはリストの項目を表します。

          <ul>
            <li>項目1</li>
            <li>項目2</li>
          </ul>

          <ol>
            <li>項目A</li>
            <li>項目B</li>
          </ol>
          

関連QA

Q1: タグの中に属性を複数指定することはできますか?

A1: はい、可能です。複数の属性を指定する場合は、スペースで区切って記述します。例えば、<a href="https://www.example.com/" target="_blank">のように記述します。

Q2: タグは大文字、小文字どちらで書いてもよいですか?

A2: HTMLでは、タグ名は大文字と小文字を区別しません。しかし、一般的には小文字で記述することが推奨されています。

Q3: 閉じタグがないタグはありますか?

A3: はい、存在します。例えば、改行を表す<br>タグや画像を表示する<img>タグなどは閉じタグがありません。これらのタグは、開始タグのみで完結します。