初めてのHTML：基本的なタグと使い方の解説

2023年04月15日

Home＞
Input＞
初めてのHTML：基本的なタグと使い方の解説

HTMLは、ウェブページを構築するためのマークアップ言語です。ここでは、HTMLの基本的なタグと使い方を解説します。

目次
HTMLの基本的な構造
HTMLの基本的なタグ
サンプルコード
その他のHTMLタグ
HTMLのコメント
まとめ

HTMLの基本的な構造

HTML文書の基本的な構造は、以下のようになっています。

<!DOCTYPE html>
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
     ページの内容
  </body>
</html>copy

<!DOCTYPE html>：HTML5であることを宣言します。
<html>：HTML文書全体を囲むタグです。
<head>：文書のメタデータを定義するタグです。
<title>：ページのタイトルを定義するタグです。
<body>：ページの本文を定義するタグです。

HTMLの基本的なタグ

以下は、HTML文書でよく使われる基本的なタグです。

<h1>～<h6>：見出しを定義するタグです。<h1>が最も大きな見出しで、<h6>が最も小さな見出しです。
<p>：段落を定義するタグです。
<a>：リンクを定義するタグです。href属性にリンク先のURLを指定します。
<img>：画像を表示するタグです。src属性に画像ファイルのURLを指定します。
<ul>、<ol>：順序なしリスト、順序ありリストを定義するタグです。<li>タグでリストのアイテムを定義します。
<table>：表を定義するタグです。<tr>タグで行、<td>タグでセルを定義します。

サンプルコード

以下は、基本的なHTML文書の例です。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>段落1</p>
    <h2>見出し2</h2>
    <p>段落2</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
    <table>
      <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
      </tr>
      <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
      </tr>
    </table>
  </body>
</html>copy