# HTMLとは？

HTML（HyperText Markup Language）は、Webページを作成するための言語です。HTMLを使うことで、テキスト、画像、リンクなどの要素を整理してWebブラウザに表示させることができます。

***

### HTMLの基本構造

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これはHTMLの基本例です。</p>
</body>
</html>
```

#### 各部分の説明

1. **`<!DOCTYPE html>`**\
   HTML文書であることをブラウザに伝えます（HTML5を指定）。
2. **`<html>`**\
   HTML文書全体を囲むタグです。
3. **`<head>`**\
   メタ情報（ページタイトルやCSSなど）を記述します。
4. **`<body>`**\
   実際に画面に表示される内容を記述します。

***

### よく使うHTMLタグ

#### 見出し（Heading）

見出しを作るには`<h1>`から`<h6>`までのタグを使用します。

```html
<h1>大見出し（重要）</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
```

* \*\*`<h1>`\*\*は最も重要な見出し
* \*\*`<h6>`\*\*は最も小さい見出し

***

#### 段落（Paragraph）

段落を作るには`<p>`を使います。

```html
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
```

***

#### リンク（Anchor）

他のページやURLにリンクを貼るには`<a>`を使用します。

```html
<a href="https://www.example.com">Exampleに行く</a>
```

* **`href`属性**でリンク先を指定します。

***

#### 画像（Image）

画像を表示するには`<img>`を使用します。

```html
<img src="https://via.placeholder.com/150" alt="サンプル画像">
```

* **`src`属性**: 画像のURLやパス
* **`alt`属性**: 画像が表示されないときの説明

***

#### リスト（List）

**順序付きリスト（番号付き）**

```html
<ol>
    <li>最初のアイテム</li>
    <li>次のアイテム</li>
</ol>
```

**順序なしリスト（番号なし）**

```html
<ul>
    <li>最初のアイテム</li>
    <li>次のアイテム</li>
</ul>
```

***

#### 表（Table）

表を作るには`<table>`タグを使います。

```html
<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>25</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>30</td>
    </tr>
</table>
```

* **`<table>`**: 表全体
* **`<tr>`**: 行
* **`<th>`**: ヘッダー（見出しセル）
* **`<td>`**: 通常のセル

***

### 簡単なサンプル

以下は基本的なHTMLページの例です。このコードをコピーして、ファイル名を`index.html`として保存し、ブラウザで開いてみましょう。

```html
<!DOCTYPE html>
<html>
<head>
    <title>はじめてのHTML</title>
</head>
<body>
    <h1>HTMLへようこそ</h1>
    <p>これはHTMLの基本例です。ここでは、Webページの構造を学びます。</p>
    
    <h2>リンク</h2>
    <p><a href="https://www.google.com">Googleに行く</a></p>
    
    <h2>画像</h2>
    <img src="https://via.placeholder.com/150" alt="サンプル画像">
    
    <h2>リスト</h2>
    <ul>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ul>
</body>
</html>
```

***

### 次に進むには？

HTMLを学んだら、次は以下を学ぶとWebページ作成がもっと楽しくなります。

1. **CSS**: ページのデザインを美しくする方法
2. **JavaScript**: ページに動きをつける方法

あなたも今日からWeb開発を始めましょう！ 😊


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.mixeder.net/start-from-biginner/web-dictionary/htmltoha.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
