Webサイト制作〜内容を書こう編〜

投稿日：2020年8月11日

内容を書くときのHTMLタグのいろいろ

前回　「Webサイト制作〜HTML初心者編〜」からの続きです

Webサイト制作〜HTML初心者編〜

前回書いた一番シンプルなHTMLが以下のようなものです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
こんにちは
</body>
</html>

今回はこの「こんにちは」の部分でよく使うHTMLタグを紹介します。

大見出し・見出しのタグ

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>  あいさつの種類 </h1>
	<h2>  朝の挨拶 </h2>
	
		<h3> 日本語　</h3>
			
			<h4> 丁寧な言葉遣い </h4>
				
			<h4> ラフな言葉遣い </h4>
				
		<h3> 英語　</h3>
		
			<h4> 丁寧な言葉遣い </h4>
				
			<h4> ラフな言葉遣い </h4>
				
	
</body>
</html>

上記8行目

<h1>  あいさつの種類 </h1>

部分が「大見出し」として扱われます。

大見出しにはサイト名やそのページのタイトルが入力されることが多いです。
Googleの検索結果にも表示される場所になります。

その他の

<h2>  朝の挨拶 </h2>
	
		<h3> 日本語　</h3>
			
			<h4> 丁寧な言葉遣い </h4>
				
			<h4> ラフな言葉遣い </h4>
				
		<h3> 英語　</h3>
		
			<h4> 丁寧な言葉遣い </h4>
				
			<h4> ラフな言葉遣い </h4>

部分は見出しです。
わかりやすくあまり長くないものがいいです。

段落・改行のタグ

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>  あいさつの種類 </h1>
<p> あいさつは一番やさしいコミュニケーションの一つです。<br>丁寧な言葉遣いとラフな言葉遣いを使い分けることで相手との距離感も掴むことができます。</p>
	<h2>  朝の挨拶 </h2>
	
		<h3> 日本語　</h3>
			
			<h4> 丁寧な言葉遣い </h4>
				
			<h4> ラフな言葉遣い </h4>
				
		<h3> 英語　</h3>
		
			<h4> 丁寧な言葉遣い </h4>
				
			<h4> ラフな言葉遣い </h4>
				
	
</body>
</html>

上記9行目

<p> あいさつは一番やさしいコミュニケーションの一つです。<br>丁寧な言葉遣いとラフな言葉遣いを使い分けることで相手との距離感も掴むことができます。</p>

が段落と改行の例です。

	<p>← ここから 　段落 　ここまで→</p>
	改行　<br>

段落は文のひとかたまりを表します。
改行はかたまりではなく、単に改行を表します。

以上　Webサイト制作〜内容を書こう編〜　でした。