0
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?

More than 1 year has passed since last update.

HTMLの基本的なコマンド集

Posted at

1.はじめに

HTML(HyperText Markup Language)はウェブページの構造とコンテンツを表現するためのマークアップ言語です。この記事では、HTMLでよく使用される基本的なコマンド(タグ)について説明します。

2.各コマンドについて

(1) htmlタグ:

 htmlタグはHTMLドキュメントのルート要素です。すべてのHTMLコンテンツはこのタグの間に配置されます。

html
<html>
  <!-- HTMLコンテンツ -->
</html>

(2) headタグ:

 headタグはドキュメントのヘッダー情報を定義します。titleタグはウェブページのタイトルを指定し、meta charset="UTF-8"は文字エンコーディングをUTF-8に設定します。

html
<head>
  <title>ウェブページのタイトル</title>
  <meta charset="UTF-8">
  <!-- その他のヘッダー情報 -->
</head>

(3) bodyタグ:

 bodyタグはドキュメントの本文を定義します。ここに実際のコンテンツを配置します。h1からh6タグは見出しを表し、pタグは段落を表します。imgタグは画像を表示し、aタグはリンクを作成します。

html
<body>
  <h1>見出し1</h1>
  <p>段落のテキスト。</p>
  <img src="image.jpg" alt="画像の説明">
  <a href="https://example.com">リンクのテキスト</a>
</body>

(4) h1〜h6タグ

 h1からh6タグは見出しを表します。h1が最も大きな見出しであり、h6が最も小さい見出しです。

html
<h1>これはh1見出しです</h1>
<h2>これはh2見出しです</h2>

(5) pタグ:

 pタグは段落を表します。ここにテキストを配置すると、ブラウザは段落として表示します。

html
<p>これは段落のテキストです。</p>

(6) imgタグ:

 imgタグは画像を表示します。src属性には画像のファイルパスを指定し、alt属性には画像の代替テキストを指定します。

html
<img src="image.jpg" alt="美しい風景の画像">

(7) aタグ:

 aタグはハイパーリンク(リンク)を作成します。href属性にはリンク先のURLを指定します。

html
<a href="https://example.com">クリックしてサイトに移動</a>

(8) ulタグとliタグ:

 ulタグは順序のないリスト(箇条書き)を作成し、liタグはリストの各項目を表します。ブラウザは項目を点や丸などで表示します。

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

(9) olとliタグ:

 olタグは順序付きリスト(番号付きリスト)を作成します。liタグはリストの各項目を表します。ブラウザは項目を番号で表示します。

html
<ol>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

(10) tableタグ、trタグ、tdタグ:

 tableタグはテーブルを作成します。trタグはテーブルの行(行)を表し、tdタグはテーブルのセル(列)を表します。テーブルはセルにデータやコンテンツを配置して表示されます。

html
<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
</table>

3.まとめ

これらの基本的なコマンドを使用することで、HTMLで基本的なウェブページの構造やコンテンツを作成することができます。また、CSSと組み合わせることで見た目やスタイルをカスタマイズすることも可能です。このコマンド集が少しでも学習の参考になると幸いです。

0
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
0
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?