5.コンテンツの作成
ウェブページに表示する内容をコンテンツと呼びます。
コンテンツはHTMLタグの
<body> ～～ </body>に記述します。
記述例
記事のタイトルと内容を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO SITE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
真夏のひまわり畑
森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。
太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥のえさになります。また、ひまわり油も抽出し、料理やお菓子作りに活用されています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。
</body>
</html>マークアップする
各部分をタグで囲って意味付け（マークアップ）をしていきます。
記事タイトル（見出し）
記事タイトルは見出しタグh1を使います。
<h1>真夏のひまわり畑</h1>本文（段落）
本文は段落タグpを使います。段落ごとにまとまりができ、pタグで囲った段落と段落の間にはすき間ができて改行を入れたような形になります。
<P>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p><p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥のえさになります。また、ひまわり油も抽出し、料理やお菓子作りに活用されています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>コンテンツの完成
土台として作成したものに、記事タイトルと本文を追加して完成です。わかりやすいように各タグの間は改行入力しています。ページに表示されるときはこの改行による空白部分は反映しません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO SITE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥のえさになります。また、ひまわり油も抽出し、料理やお菓子作りに活用されています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</body>
</html>