HTMLの基本と活用方法

HTML（HyperText Markup Language）は、ウェブページを構成するための基盤となる言語であり、ウェブブラウザに対してページの構造や内容を指示するために使用されます。HTMLを使って文章を構成するためには、基本的な要素やタグを理解し、それを効果的に組み合わせて使う必要があります。本記事では、HTMLの基本的な構造から応用的な使い方まで、完全かつ包括的に解説します。

1. HTMLの基本構造

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

html
CopyEdit
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトルtitle>
head>
<body>
    <h1>見出し1h1>
    <p>これは段落のテキストです。p>
body>
html>

• : これはHTML5であることを宣言するタグです。
• : 文書の言語が日本語であることを指定しています。
• : メタデータ（ページタイトル、文字エンコーディングなど）を含む部分です。
• : 実際にページに表示されるコンテンツが入る部分です。

2. 見出しタグ

HTMLでは、見出しを

から

までのタグで指定します。これらは文書の構造を理解しやすくするために使われ、

が最も重要な見出し、

が最も重要度が低い見出しとなります。

html
CopyEdit
<h1>最も重要な見出しh1>
<h2>次に重要な見出しh2>
<h3>サブ見出しh3>
<h4>小さな見出しh4>
<h5>さらに小さな見出しh5>
<h6>最も小さな見出しh6>

3. 段落タグ

文章の段落は

タグで囲むことで構成されます。

タグは、段落ごとに改行を挿入します。

html
CopyEdit
<p>これは最初の段落です。p>
<p>これは次の段落です。p>

4. リスト

リストには順序付きリスト（番号付き）と順序なしリスト（箇条書き）の2種類があります。

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

html
CopyEdit
<ol>
    <li>最初の項目li>
    <li>次の項目li>
    <li>最後の項目li>
ol>

順序なしリスト（箇条書き）

html
CopyEdit
<ul>
    <li>最初の項目li>
    <li>次の項目li>
    <li>最後の項目li>
ul>

5. ハイパーリンク

ハイパーリンクはタグを使用して作成します。このタグは、href属性にリンク先のURLを指定します。

html
CopyEdit
<a href="https://www.example.com">Exampleサイトa>

html
CopyEdit
<img src="image.jpg" alt="画像の説明" width="500" height="300">

html
CopyEdit
<table border="1">
    <tr>
        <th>ヘッダー1th>
        <th>ヘッダー2th>
    tr>
    <tr>
        <td>データ1td>
        <td>データ2td>
    tr>
    <tr>
        <td>データ3td>
        <td>データ4td>
    tr>
table>