1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTMLの基本的tagの説明

Posted at

1. 見出しタグ <h1><h6>

見出しタグは、文章のタイトルやセクションのタイトルを作成するために使います。 <h1>が最も大きな見出し、<h6>が最も小さな見出しです。

例:

<h1>これが一番大きな見出しです</h1>
<h2>次に大きな見出し</h2>
<h3>さらに小さい見出し</h3>
  • 使い方: 文書の構造を作るために重要。例えば、ページのタイトルは<h1>、セクションごとの小さなタイトルには<h2><h3>を使います。

2. 段落タグ <p>

<p>タグは、文章の段落を作成します。文章のブロックを分けるのに使います。

例:

<p>これは段落1です。段落1の内容がここに入ります。</p>
<p>これは段落2です。段落2の内容がここに入ります。</p>
  • 使い方: 文章を読みやすくするために、意味のあるブロックに分けて書くときに使います。

3. 改行タグ <br>

<br>は「改行」を行うタグです。このタグは終了タグ(</br>)が不要です。

例:

<p>これは改行の前のテキストです。<br>改行後のテキストです。</p>
  • 使い方: 段落の中で改行したいときに使います。ただし、段落分けには<p>タグを使った方がよいです。

4. リストタグ

HTMLには「順序なしリスト」と「順序付きリスト」の2種類のリストがあります。

  • 順序なしリスト (<ul><li>): 順番が重要でないリストです。

    例:

    <ul>
      <li>りんご</li>
      <li>バナナ</li>
      <li>みかん</li>
    </ul>
    
    • 使い方: 順番が重要でない項目のリストを作るときに使います。
  • 順序付きリスト (<ol><li>): 順番が大事なリストです。

    例:

    <ol>
      <li>1位: ジョン</li>
      <li>2位: メアリー</li>
      <li>3位: アリス</li>
    </ol>
    
    • 使い方: 順番が重要な項目(ランキングや手順など)のリストを作るときに使います。

5. リンクタグ <a>

<a>タグは、他のページやサイトへのリンクを作成するために使います。href属性にリンク先のURLを指定します。

例:

<a href="https://www.example.com">Exampleウェブサイトにアクセス</a>
  • 使い方: 他のウェブページやサイトに移動するためのリンクを作りたいときに使います。

6. 画像タグ <img>

<img>タグは、ウェブページに画像を表示するために使います。src属性で画像のファイルの場所(URL)を指定し、alt属性で画像が表示できないときに代わりに表示するテキストを指定します。

例:

<img src="image.jpg" alt="これはサンプル画像です">
  • 使い方: ウェブページに画像を埋め込むときに使います。alt属性はアクセシビリティ向上にも役立ちます。

7. テーブルタグ

<table>タグは、表(テーブル)を作成するために使います。表の中には、<tr>タグで行を作り、<td>タグでセルを作ります。また、表のヘッダーには<th>タグを使います。

例:

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>太郎</td>
    <td>25</td>
  </tr>
  <tr>
    <td>花子</td>
    <td>30</td>
  </tr>
</table>
  • 使い方: データを表形式で表示したいときに使います。

8. フォームタグ

<form>タグは、ユーザーから入力を受け取るためのフォームを作成します。フォーム内には、<input>タグでテキスト入力フィールドを、<button>タグで送信ボタンを作成します。

例:

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <button type="submit">送信</button>
</form>
  • 使い方: ユーザーから情報を入力してもらうためのフォームを作りたいときに使います。

9. メタデータタグ

<meta>タグは、ページのメタ情報を設定するために使います。例えば、文字コードの指定や、ページの説明などを設定できます。

例:

<meta charset="UTF-8">
<meta name="description" content="このページはHTMLのチュートリアルです">
  • 使い方: ページの文字コードや、SEO(検索エンジン最適化)のためにページの説明を設定したいときに使います。

10. 構造的なタグ

HTML5では、文書を論理的に構成するための新しいタグがいくつか追加されました。これらは文書の意味を明確にするために使います。

  • <header>: ページやセクションの最初の部分、例えば、サイトのタイトルやナビゲーションメニューを含む部分。
  • <footer>: ページの最後の部分、通常は著作権情報や連絡先情報など。
  • <section>: 文書内の独立したセクションを作るときに使います。
  • <article>: 独立したコンテンツ(ニュース記事やブログの投稿など)を表します。
  • <nav>: ナビゲーションリンクをまとめるためのタグです。

例:

<header>
  <h1>サイトタイトル</h1>
  <nav>
    <a href="#home">ホーム</a> | <a href="#about">アバウト</a>
  </nav>
</header>
<section>
  <h2>セクションタイトル</h2>
  <p>セクションの内容...</p>
</section>
<footer>
  <p>&copy; 2024 サイト名</p>
</footer>
  • 使い方: ページの構造を意味的に分けるために使用します。
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?