SEO的にはまだまだわからない事だらけですが、とにかくW3Cに準拠したhtmlとcss2は書けると思っていました。
むしろ人より得意だと思っていました。
ブロック要素はその中で改行できるもの、インライン要素は中で改行できないもの。
そう思っていました。
某格安WEBスクールでは確かそう習ったはずです。
で、ブロック要素の中にはブロック要素もインライン要素も含む事ができると認識していました。
なのに！
今日、こんな風にhtmlを書いたんです。
<p>
この商品の4つの大きな特徴は
<ol>
<li>うまい</li>
<li>やすい</li>
<li>はやい</li>
<li>でかい</li>
</ol>
です。
</p>
p {
margin-left: 2em;
}
<p>も<ol>もブロック要素で、ブロックの中にブロックを書くのは当然だと思っていたので何も気にしませんでした。
pタグは左に2文字分マージンを作ったので、これら全体が2文字分右に寄せられて表示されると思うわけですね。
ところがブラウジングしてみると、
「です」
だけ左のマージンがない。
FireBugで見てみると、どうやら次のように解釈されているようです。
<p>
この商品の4つの大きな特徴は
</p>
<ol>
<li>うまい</li>
<li>やすい</li>
<li>はやい</li>
<li>でかい</li>
</ol>
です。
<p></p>
と。
なんだこれは！ふざけんな！勝手にpを閉じるな！だいたい最後の無駄なpはなんだ、と。
んで当然の様にtwitterでつぶやくわけですよ。
「ブロックの中にブロック書いたのにおかしい」という趣旨の投稿です。
するとやはり天才集団である僕のフォロワーは早くて的確なお返事を下さるわけです。
<p>にはインライン要素しか内包できないよ
と。
えっ？(°д°)
(World Wide Web Guideを紹介して頂きました。)
まじかよー！
しらなかったよー！
なんだよー！
そもそも「内包できる」なんて概念なかったよー！
ブロックかインラインか(インラインブロックか)しか考えてなかったよ－！
(いまこのブログをご覧の)皆さんから見たらたったこれだけの事なんですが、もう本当にいろいろカルチャーショックで、恥ずかしかったし悔しかったし、でも新しい事知って嬉しかったし、明日も仕事だけどまた頑張ろうって気になりました。
今日も協力してくれた
@k_michiくん、@_yukari_reさん、@kb_webさん(お声かけくださった時間順)、ありがとうございました。