HTMLとは？

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

HTMLの基本構造

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

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

各部分の説明

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

よく使うHTMLタグ

見出し（Heading）

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

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

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

段落（Paragraph）

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

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

リンク（Anchor）

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

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

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

画像（Image）

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

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

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

リスト（List）

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

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

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

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

表（Table）

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

<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として保存し、ブラウザで開いてみましょう。

<!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ページ作成がもっと楽しくなります。

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

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

前へブラウザとは？次へCSSとは？

最終更新 6 か月前

役に立ちましたか？

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

<!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>