読者です 読者をやめる 読者になる 読者になる

朽木誠一郎 の あまのじゃく日記

ごめんなさいと念のため

編集後記#001 HTML文法の復習

スポンサーリンク

各位、編集・ライティングする際にHTML文法を意識していますか。僕も数年ほどライターとして活動していたのに現職までノータッチだったポイントですががが。

かつてはテキストファイルで入稿する形式が主だったし、WordPressのアカウントがライターにそれぞれ発行されるようになって以降も、HTMLについてライターに教育するメディアはあまりなかったように思う。むしろWordPressのテキストモードには切り替えない(ビジュアルモードと入れ替えるとたまにバグるから)ことが運用ルールだったメディアもあるほどだ。<b>で太字にさえできればよかった古き良き時代です。

 

HTMLとはなにか、HTMLでなにができるのかは割愛する。そこからよくわからないという場合は下記記事をご一読ください。

liginc.co.jp

liginc.co.jp

 

HTML文法がよくわかっていなくてもライティングはできるけれども、改行でフォントが崩れたり、勝手に斜字になったりと思わぬストレスにやられることもあるでしょう。

ではそもそもなんでHTML文法に則っているとイイのかと言うと理由はいくつかあって、ひとつはそれがウェブのルールだから(理想)、そしてそのルールを前提として、検索エンジンはHTML文法を遵守しているコンテンツを評価するはずだから(現実)です。構文エラーでマイナス評価を下されるリスクがあるだけでなく、正しい文法に則っていればユーザもクローラも訪問、巡回しやすくていろいろイイよねという。

このあたりの理想と現実については下記記事をご確認ください。

liginc.co.jp

liginc.co.jp

 

いつの間にかライターもある程度HTMLがいじれるようになっていることが前提みたいになっているけれど、これはきっとSEOライティングが流行して、検索で上位表示されることがコンテンツの目的のひとつになりはじめたからではありませんか。もしくはブログの個人メディア化が進んでカスタマイズの過程でHTMLの知識が、あるいはアフィリエイトをする際にやはり上位表示させる必要が生まれたからとも言えそう。

せっかくウェブ制作会社に籍を置いているので編集と制作知識を結び付けたい。HTML文法も遵守してなお美しい文章というのが実現できればいい。と意識は高いけどHTML文法上正しい文章というのはおうおうにして美しくない。

例えば見出しタグの使用方法ひとつとっても、h2・h3・h4……と順番に使用するルールはいいと思うけど大丈夫かな。あまり本質的ではないがこの記事をどうぞ。

liginc.co.jp

 

で、さいきん困ったのが以下のような場合です。

 

<h1>アソコの穴に突っ込んだら最高だったもの5選</h1>[タイトル]

エロいこと想像した? ちがうよバーカ!ちくわだよ![リード]

<h2>ちくわの穴に突っ込んだら最高だったもの5選</h2>[大見出し]

それでははじめます。[(h2)と(h3)の間の要素は省略可って言われますけど]

<h3>1. きゅうり</h3>[中見出し]
きゅうりです。

<h3>2. スティックチーズ</h3>[中見出し]
スティックチーズです。

<h3>3. ツナマヨ</h3>[中見出し]
ツナマヨです。

<h3>4. クリームチーズ</h3>[中見出し]
クリームチーズです。

<h3>5. 明太子</h3>[中見出し]
明太子です。

それではまとめです。[←ココ]

<h2>まとめ</h2>[大見出し]

エロいこと想像したヤツ腹筋しろ。

 

 

明太子とまとめの真ん中にある「それではまとめです」の要素が浮いてしまっていることにお気づきでしょうか。位置としては<h3>明太子</h3>のタグ直下にあるけど意味のまとまりとしては明太子とは独立しているので正しくない。じゃあ正しいHTML文法に則るのであれば1.〜5.までと並列のまとまりとして<h3>ここまでのまとめ</h3>とかを新設してもいいんだけどそれは文章として美しくない気がする。内容もないし。

 

<h1>アソコの穴に突っ込んだら最高だったもの5選</h1>[タイトル]

エロいこと想像した? ちがうよバーカ!ちくわだよ![リード]

<h2>ちくわの穴に突っ込んだら最高だったもの5選</h2>[大見出し]

それでははじめます。[(h2)と(h3)の間の要素は省略可って言われますけど]

<h3>1. きゅうり</h3>[中見出し]
きゅうりです。

<h3>2. スティックチーズ</h3>[中見出し]
スティックチーズです。

<h3>3. ツナマヨ</h3>[中見出し]
ツナマヨです。

<h3>4. クリームチーズ</h3>[中見出し]
クリームチーズです。

<h3>5. 明太子</h3>[中見出し]
明太子です。

<h3>ここまでのまとめ</h3>[中見出し]
それではまとめです。[←ココ]

<h2>まとめ</h2>[大見出し]

エロいこと想像したヤツ腹筋しろ。

 

 

 

これはHTML文法としては正しいけどやりすぎっぽい。「それではまとめです」はもちろん編集次第で削ることもできるのですが、地の文でつないであげるのが文章としては美しい場合もある。さてどうしたものかと思い悩んでいるけどこれはまだ解決していない。HTML5で追加された<section>タグを使用するとかあれこれ検討したが、結局浮いてしまう要素にはあらためて見出しタグを設定してあげる必要がありそうだ。

www.htmq.com

 

ウェブを表現の舞台にしているので、ウェブのルールに則りつつ美しい文章にできればいい。編集には表記や用法だけじゃなくて、W3CとかJISとかの新しい概念も内在していることは留意していたいです。いずれ舞台がウェブですらなくなるんだとしても。