前回 までの記事でマークアップの基本的な部分は伝えられたんじゃないかと思っています。
基本さえわかっていれば、あとは文章を的確なタグで囲んだり、タグに適当な属性をつけたりしていけば良いだけです。
そんなこんなで、今回からはbody要素の中に書けるタグを紹介していきます。
前回 までの例文ではちょいと短すぎるので、今回からは、
僕が考えた最強の打線。僕が考えた最強の打線を発表します。遊 小坂 二 西岡 一 福浦 右 サブロー 指 初芝 捕 里崎 三 今江 左 大塚 中 諸積
という文章をマークアップしていきます。
下準備
まずは人が読みやすいように適当なところで改行していきましょう。
僕が考えた最強の打線。 僕が考えた最強の打線を発表します。 遊 小坂 二 西岡 一 福浦 右 サブロー 指 初芝 捕 里崎 三 今江 左 大塚 中 諸積
さらに一旦全体をbodyタグで囲んでインデントをつけておきます。
※ インデントは僕の個人的好みです。
<body> 僕が考えた最強の打線。 僕が考えた最強の打線を発表します。 遊 小坂 二 西岡 一 福浦 右 サブロー 指 初芝 捕 里崎 三 今江 左 大塚 中 諸積 </body>
これをブラウザで表示すると、
と、この時点では、まだ改行すらされていません。
必要なタグを覚えてマークアップしていきましょう。
pタグ
Paragraph（段落）タグです。
ブラウザはpタグで囲った文章を段落だと認識してくれるようになります。
試しに先ほどの文章の1行目をpタグでマークアップしてみましょう。
<body> <p>僕が考えた最強の打線。</p> 僕が考えた最強の打線を発表します。 遊 小坂 二 西岡 一 福浦 右 サブロー 指 初芝 捕 里崎 三 今江 左 大塚 中 諸積 </body>
pで囲った文章で改行されて表示されるようになりました。
これはブラウザがpタグで囲んだ部分を段落と認識するようになり、
段落という意味を持つ文章に対してブラウザが、
「"僕が考えた最強の打線。"って文章は段落だな！段落だったら改行させとくぜ！」
と粋なはからいをしてくれてたおかげです。
あくまでも改行させたい箇所をpタグで囲ったのではなく、ブラウザに文章のなかで段落の部分を教えるためにpタグをつかったということを意識しなければなりません。
改行されたのは結果にすぎないのです。
お礼を言われたいから人助けをするんじゃなく、人助けをしたからお礼を言われるという概念。そんな感じかもしれません。違うかもしれませんが。
良い事があってこその笑顔じゃなくて、笑顔でいりゃ良（以下略）
そんなこんなで、一旦全ての行をpタグで囲んでみましょう。
<body> <p>僕が考えた最強の打線。</p> <p>僕が考えた最強の打線を発表します。</p> <p>遊 小坂</p> <p>二 西岡</p> <p>一 福浦</p> <p>右 サブロー</p> <p>指 初芝</p> <p>捕 里崎</p> <p>三 今江</p> <p>左 大塚</p> <p>中 諸積</p> </body>
ブラウザはすべての行を段落と認識するようになり、改行されるようになりました。
h1 ~ h6タグ
Heading（見出し）タグです。
ブラウザはpタグで囲った文章を見出しだと認識してくれるようになります。
見出しにはいくつかレベルがあり、1番重要な見出しから6番目に重要な見出しまでをh1 〜 h6をつかって意味付けすることができます。
h1が1番重要な見出しで数字が大きくなるごとに重要度が下がっていきます。
細いことはまたの機会に説明しますが、h1は基本的に1度しかつかえません。
（例外もありますがそれはまたの機会に）
そう。それはまる一生に一度だけ使えるという一生のお願いのようなものなのかもしれません。
ページ内で1番重要だと思われる、とっておきの見出しをh1でマークアップしましょう。（例外的に何度も使えるという点も一生のお願いに似ているかもしれません。）
今回だと、"僕が考えた最強の打線。" の部分が一番重要だと思われるので、pタグではなくh1タグでマークアップしなおしてみましょう。
<body> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <p>遊 小坂</p> <p>二 西岡</p> <p>一 福浦</p> <p>右 サブロー</p> <p>指 初芝</p> <p>捕 里崎</p> <p>三 今江</p> <p>左 大塚</p> <p>中 諸積</p> </body>
いかがでしょう。h1タグ囲んだ文章が大きく表示されるようになりました。
これはブラウザがh1タグで囲んだ部分を1番重要な見出しと認識するようになり、
見出しという意味を持つ文章に対してブラウザが、
「"僕が考えた最強の打線。"って文章は1番重要な見出しだな！だったら力強く表示しておくぜ！」
と粋なはからいをしてくれてたおかげです。
なので、
<body> <p>僕が考えた最強の打線。</p> <p>僕が考えた最強の打線を発表します。</p> <p>遊 小坂</p> <p>二 西岡</p> <p>一 福浦</p> <p>右 サブロー</p> <h1>指 初芝</h1> <p>捕 里崎</p> <p>三 今江</p> <p>左 大塚</p> <p>中 諸積</p> </body>
と大きく表示したい箇所（上記例だと初芝）をh1でマークアップするのは間違いです。
気持ちは痛いほどわかりますが初芝には一旦pタグで囲まれてもらいましょう。
くどいようですがマークアップは見た目を変えるためではなく、ブラウザに文章の意味を伝えるために行います。
今回は以上です。
勘の良いかたはお気づきかもしれませんが、次回はolタグとliタグについて説明しようと思ってます。
