HTMLは、Webページの文章や画像、リンクなどに

「これは見出しです」「これは段落です」と意味を付けるための言語です。

HTMLでは、基本的に文章をタグで挟んで記述します。

たとえば段落なら、

<p>ここに文章を書きます</p>

のように書きます。

1．HTMLタグの基本

多くのHTMLタグは、

開始タグと終了タグを1組にして

使います。

たとえば、

<p>これは段落です</p> と書くと、

<p> が開始タグ、

</p> が終了タグになります。

タグで挟まれた 「これは段落です」 の部分が、

Webブラウザに表示される内容です。

2．見出しを作る <h1> ～ <h6>

見出しには、

<h1> から、

<h6> までの

タグを使います。

<h1>一番大きな見出し</h1>

<h2>二番目の見出し</h2>

<h3>三番目の見出し</h3>

<h4>四番目の見出し</h4>

<h5>五番目の見出し</h5>

<h6>一番小さな見出し</h6>

数字が小さいほど重要度の高い見出しになります。

通常、<h1> は

ページ全体の大きな題名に使います。

3．文章の段落を作る <p>

普通の文章をひとまとまりの段落として

表示するときは、<p> タグを使います。

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

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

4．文章の途中で改行する <br>

同じ段落の中で改行したい場合は、

<br>

を使います。

<p>1行目です。<br>

2行目です。</p>

<br> は、

文章を挟む必要がないため、終了タグはありません。

5．文字を太くする <strong>

重要な文字を強調したい場合は、

<strong> タグで挟みます。

<p>ここは<strong>重要な部分</strong>です。</p>

例示：この文が例示です。

6．文字を斜体にする <em>

文章の一部を強調(斜体)にして表現したい場合は、

<em> タグを使います。

<p>ここを<em>少し強調</em>します。</p>

例示：この文が例示です。

7．リンクを作る <a>

別のページやWebサイトへのリンクを作る場合は、<a> タグを使います。

<a href="https://example.com/">こちらをクリック</a>

href の中に、移動先のURLを指定します。

新しいタブで開きたい場合は、

target="_blank" を追加します。

<a href="https://example.com/" target="_blank">新しいタブで開く</a>

例示：この記事の一番下に、各ページに飛べるリンクを作成しています。

8．画像を表示する <img>

画像を表示する場合は、

<img> タグを使います。

<img src="image.jpg" alt="画像の説明">

・src には画像ファイルの場所、

・alt には画像が表示できないときなどに使われる説明文

を記述します。

画像の横幅を指定する例は、<img src="image.jpg" alt="画像の説明" width="600"> です。

例示：

9．箇条書きを作る <ul> と <li>

順番を付けない箇条書きには、

<ul> と、

<li> を使います。

<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

<ul> が箇条書き全体、

<li> が1つずつの項目です。

例示：
・りんご
・みかん
・ぶどう

10．番号付きリストを作る <ol> と <li>

番号を付けたリストには、

<ol>

を使います。

<ol>
<li>電源を入れる</li>
<li>ブラウザを開く</li>
<li>ページを表示する</li>
</ol>

例示：
1.電源を入れる
2.ブラウザを開く
3.ページを表示する

11．区切り線を入れる <hr>

文章の途中に横方向の区切り線を表示したい場合は、

<hr>

を使います。

<hr>

<hr> も、終了タグを必要としません。

例示：
このページで、番号毎の区切りに使用しているのが「区切り線」です。

12．表を作る <table>

表を作る場合は、主に

<table>、
<tr>、
<th>、
<td> を組み合わせます。

<table>
<tr>
<th>名前</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>150円</td>
</tr>
</table>

<tr> は1行、

<th> は見出しセル、

<td> は通常のセルを表します。

例示

13．まとまりを作る <div>

複数の要素をひとまとまりとして扱いたい場合は、

<div>

を使います。

<div><p>この文章と、

</p><p>この文章をひとまとめにします。</p></div>

<div> は、

CSSで位置や背景色、余白などを指定するときによく使われます。

例示：

14．文章の一部分だけを指定する <span>

文章の一部分だけに色や装飾を付けたい場合などには、

<span>

を使います。

<p>この<span>部分だけ</span>を指定します。</p>

例示：
赤文字

15．HTMLタグは入れ子にできる

HTMLタグの中に、別のHTMLタグを入れることもできます。

<p>詳しくは<a href="https://example.com/"><strong>こちらのページ</strong></a>をご覧ください。</p>

この例では、段落の

<p> の中にリンクの <a> があり、

さらにその中に太字の <strong> が入っています。

ただし、タグの閉じる順番には注意が必要です。

後から開いたタグを先に閉じるのが基本です。

例：

<strong><u>本文です。</u></strong>

ちなみに、

<u>文章</u>

このタグを使用すると、挟まれた文体に下線を引くことができます。

例示：
この文が例示です。

16．HTML文書全体の基本形

通常のHTMLファイルでは、次のような形が基本になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページの題名</title>
</head>
<body>
<h1>ページの見出し</h1>
<p>ここに本文を書きます。</p>
</body>
</html>

<head> の中にはページの設定情報を、

<body> の中には実際にブラウザへ表示する内容を記述します。

全体的なまとめ

HTMLは、
文章や画像などをタグで挟み、

「この部分は何なのか」をブラウザに伝えるため

の仕組みです。

最初は、
<h2>、
<p>、
<br>、
<a>、
<img>、
<ul>、
<ol>
あたりを覚えるだけでも、

かなり多くのページを作れるようになります。

まずは短いHTMLを実際に書いて、

ブラウザでどのように表示されるか？

を確認しながら覚えていくのがおすすめです。

もし、わかりづらい場合、以前のページで

できるだけ、わかりやすく書いているので、

ご参照頂けたら幸いです。

・ホームページを表示するには？

・HTMLって、どうやって使うの？

・WordPressって、どういうもの？

・主なHTMLタグ一覧

キャリカク岡山:F.K.