色んな方のブログを拝見していると、更新頻度も高く、内容も良いのにHTML的には惜しい方を時々見かけます。
ブログサービスやWordPressのテンプレート自体が間違ったHTMLを記載している場合もあるので、ブロガー本人では避けられない問題もありますが、色んな幅、高さのデバイスや仕様の異なるブラウザがある中でも読まれやすくするには、正しいHTMLを使う必要があります。
HTMLとは
HTMLとはHyper Text Markup Languageの略で、簡単に言うと、ブラウザにwebサイトの文章構造を伝える言語です。
ここが見出しで、ここが段落、ナビゲーションはここ、という感じで、ページ内の構造を書いています。
昔はHTMLの中に見た目を整えるタグも記載していましたが、今では、CSSで見た目は整えることが推奨されています。
正しいHTMLとは？
HTMLも一つの言語なので、正しい文法というものがあります。
正しいHTMLは、W3C（World Wide Web Consortium）という機関で策定されており、環境に合わせてバージョンアップを行いながら、仕様が発表されています。
正しいマークアップを行うメリット
各デバイスやブラウザもW3Cの仕様に合わせて表示出来るように作成しているので、仕様を守っておけば、基本的には読めない、表示されないということはありません。
昔は正しいHTMLはSEO的に有利という神話もありましたが、現在は検索エンジンのクローラーの性能が上がっているので、どんなHTMLでも基本的には読み込んでくれます。
ただ、ニュースサイトやSNSなどのクローラーやボットが読み込んで、表示されるケースもあるので、標準的なHTMLの仕様を守ったほうが間違いがありません。
HTMLの間違いをチェック
W3Cではvalidatorというツールを提供しているので、自分のサイトが正しく記載されているかどうかを簡単にチェック出来ます。
修正したいHTMLエラー
warningと表示されるものは変えたほうが良いよというもので、少々細かすぎる場合もあるので、とりあえず放置。
Errorと表示された項目は修正が必要です。
特に、廃止された要素などは、そのうちブラウザがサポートしなくなるかも知れないので避けたほうが賢明です。
fontタグ
「fontタグは廃止されました。CSSを代わりに使ってください」というエラー。
今のところ、fontタグでの色指定も動作していますが、見た目はCSSで設定するようにしたほうが良いですね。
タグの閉じ忘れ
「p要素がないのにpタグの閉じタグがあります」というエラー。
タグの閉じ忘れは、レイアウト崩れの原因となるだけでなく、段落が段落として認識されないので、文章構造的に間違って認識される可能性があります。
恐らく、ブログのテンプレートにタグの記載ミスがあり、CMSのpタグ自動記入機能と相まって、閉じ忘れエラーが大量発生しているのだと思われます。
以上のようなエラーは早急に修正しましょう。
間違ってないけど避けたいもの
ブログを見ていてよく目にするのが、連続BR。
<br>というタグは改行を意味するのですが、段落の中で改行したい場所に利用します。
スペースを空けるためだけに<br>を連続して使っている人が多いのですが、見た目を整えるのはCSSの役割なので、出来れば、CSSで余白を設定するようにしましょう。
連続BRの問題点
連続BRの問題点を考えてみると
- デザインをリニューアルした時に意図した大きさの余白ではなくなる
- 読み上げソフトを利用した際に改行は無視される
という点があります。
文章の区切りは、段落を表すpタグで記述するのが正しいので、pタグとpタグの間で、スクリーンリーダーは一拍空けてくれます。
文章の塊はpタグで、余白はCSSで指定するようにしましょう。
強制改行はマルチデバイス時代には不向き
改行したい場所にbrタグを入れる人も多いですが、マルチデバイス対応を考えるなら、改行はなるべく避けたほうが良いと思います。
見る環境によって行が折り返される場所が異なるので、改行を入れていると、改行後に1文字だけ飛び出るという状況になるからです。
キャッチコピーなど、どうしても改行を指定したい場合には、CSSでどのデバイスでも1行の文字が同じ文字数になるように調整するようにするのが良いでしょう。
使ったほうが良いもの
HTML5になって追加された、header、footer、nav、aside、articleなど、ページのパーツ構成に応じて使えるタグは、ボットやクローラーにページの構成を伝えやすくなるので、使っておいたほうが良いでしょう。
直接的なSEO上のメリット、デメリット、ページ表示上の問題はありませんが、ページを読み込んでもらって、他サイトで表示される際などに間違った認識をされないように、正しく使うことをオススメします。
まとめ
webやブログの文章は、極論的には読めればOK。
普段使ってるPCやスマホで綺麗に見れていれば問題ありません。
ですが、より多くの人に読んでもらいたい、しっかり読んでもらいたいなら、どのようにマークアップされているか、確認してみましょう。
コメント