HTMLの勉強3日目。段落p、見出しh、強調em、重要性strong、区切りhr

プログラミング

HTMLの勉強を始めて、早いもので3日が経過しました。

3日坊主の最終日です。ここが正念場です。

本日は、段落に使うpというタグと、見出しに使うhというタグです。

目次

段落 p

パラグラフの頭文字を取って、pと書きます。

エディタに記述すると、以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			こんにちは、かしこです。こんにちは、かしこです。
			こんにちは、かしこです。こんにちは、かしこです。
			こんにちは、かしこです。こんにちは、かしこです。
			こんにちは、かしこです。こんにちは、かしこです。
		</p>
	</body>
</html>

では、これをブラウザで表示するとどうなるのか。

以下のようになります。

<p>~</p>の内側が一つの段落として表示されました。

ただし、これだけでは分かりづらいので、段落がいくつもあった場合、どのように表示されるのか試してみます。

エディタに、以下のように3つのpタグで囲った同じ文章を記述します。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			こんにちは、かしこです。こんにちは、かしこです。
		</p>
		<p>
			こんにちは、かしこです。こんにちは、かしこです。
		</p>
		<p>
			こんにちは、かしこです。こんにちは、かしこです。
		</p>
	</body>
</html>

これをブラウザに表示すると以下のようになります。

同じ文章が3個表示されました。

さらに、段落と段落の間が少し開いています。

これがpタグです。

この、段落が開いているのは、ブラウザの初期の設定に基づいているものです。

見出し h

ヘッドラインの頭文字を取って、hと書きます。

見出しには、6種類の大きさが選択できます。

それぞれ、h1(1番大きい)、h2(2番目に大きい)、h3(3番目に大きい)、h4(4番目に大きい)、h5(5番目に大きい)、h6(6番目に大きい)となります。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<h1>かしこ1です</h1>
		<h2>かしこ2です</h2>
		<h3>かしこ3です</h3>
		<h4>かしこ4です</h4>
		<h5>かしこ5です</h5>
		<h6>かしこ6です</h6>
	</body>
</html>

これをブラウザに表示してみます。

このように6段階の文章が表示されました。

なお、文章の構造のルールとして、h1の次にh2がくるように決まりがあります。

大きい見出しの次に、少し小さい見出しがくるように表記していきましょう。

強調 em

文章によっては、どの単語が強調されているのかによって、意味が変わる文章があった場合、その協調したい部分を表現したいときにemタグを使用します。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		My name is <em>kashiko</em>.How are you.
	</body>
</html>

文章の中の、「kashiko」という文字をemタグで囲いました。

ブラウザに表示すると以下のようになります。

少しわかりにくいかもしれませんが、emタグで囲ったところが斜体になっています。

注意が必要なのは、あくまで協調を示す、という事ですので、ただ斜体にしたいから、という理由でemタグを使用してはなりません。

あくまでも、強調した結果斜体で表示される、という事を覚えておきましょう。

重要性 strong

文章の中で、重要な部分にstorngタグを使用します。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		My name is <strong>kashiko</strong>.How are you.
	</body>
</html>

ブラウザに表示すると以下のようになります。

strongタグで囲った「kashiko」という部分が太字になっています。

注意が必要なのは、太字にしたいという理由でstrongタグを使用してはならないことです。

あくまでも、重要性を示した結果、太字になるわけです。

区切り hr

文章のセクションを示したいとき、hrタグを使用します。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<p>
			こんにちは、かしこです。こんにちは、かしこです。
		</p>
		<hr>
		<p>
			こんにちは、かしこです。こんにちは、かしこです。
		</p>
	</body>
</html>

二つの文章の間に、hrタグを挿入しました。

hrタグは単独で使うことができ、文章を囲う必要はありません。

使用することで、文書の区切りを示すことができます。

ブラウザに表示すると以下のようになります。

これによって、二つの文章(段落)が区切られている、という事が分かります。

 

コメント

タイトルとURLをコピーしました