h1-6、br、strong、hrタグを使う

概要

ベッド専門通販サイト「イーベッド」をご利用いただきありがとうございます。

今回は、h1-6、br、strong、hrタグを使っていきます。
これらのタグの内、いくつかをこのページでも使用しています。

それでは進めて行きましょう。

hタグ

bodyタグの中で使えるタグを見ていきます。
まずは文字に関するものから。
見出しには<h1>~<h6>まであります。
これは headingという意味で「h」を使用しています。
これを意味の大きさに応じて使い分けていきます。

例としては、1番重要な大見出しに<h1>タグを使い、<h2>を中見出しとして使用し、<h3>を小見出しに使うといった感じです。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
</head>
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<!--コメント-->
<p>こんにちは</p>
</body>
</html>
これをブラウザで確認してみると違いが分かります。

brタグ

次に改行の仕方を覚えていきます。
<p>タグを連続で使用すると、それぞれの間に空行が出来ます。
行間のように使うことができますが、段落を付けたい時には<br>タグを使います。

<p>こんにちは!<br>こんにちは!</p>と入れてみてください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
</head>
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<!--コメント-->
<p>こんにちは!<br>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
</body>
</html>
<br>タグを使用したところが段落になっていることが分かります。
段落にはこれを使用しましょう。

strongタグ

次にここの文章を強調したい!という時に、<strong>タグを使用します。
試しに“こんにちは”を<strong>こんにちは!</strong>と囲ってみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
</head>
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<!--コメント-->
<p>こんにちは!<br>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p><strong>こんにちは!</strong></p>
</body>
</html>
これをブラウザで確認すると、文字が強調されていることが分かります。

hrタグ

文章に区切りを付けたい時などには、<hr>タグを使うことで水平線を引けます。
実際に入れてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
</head>
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<!--コメント-->
<p>こんにちは!<br>こんにちは!</p>
<p>こんにちは!</p>
<hr>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p>こんにちは!</p>
<p><strong>こんにちは!</strong></p>
</body>
</html>
保存はしなくて良いです。
どんどん長くなってしまいますので。

まとめ

これで、現在このページで使われているのが、<hr>タグと<br>ということが分かったと思います。
次回はリスト書きや、箇条書きなどで使用できるタグを覚えていきます。

今後もベッド専門通販サイト「イーベッド」をよろしくお願いします。