正しいマークアップ
普段、何気なく作成しているページで、うまく動作しないとか、原因がよくわからないけど、想像通りうまく書けないなど、手が止まることがないですか？
デザインされた通り表現することって、簡単なようで難しい...あっさり出来ていると思い込んでるだけで、実は間違ってコーディングされていることに気づかない。
初心に帰るじゃないですけど、時間が空いた時に、チェックしてみると以外と面白い結果が見えてきます。
昔からありますが、W3CのHTMLバリデータを使うと、viewportの警告が出ていたり、HTML5では廃止となったcenter要素の記述があったりと。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />ビューポート("viewport")
まず、viewportに関しての記述はuser-scalable=noとあるため、ユーザーで拡大、縮小できないためユーザビリティに欠ける記述として警告が出ています。そもそもdevice-widthを使うと、見ているスマホで調整することよりもCSSで記述した通りに表示してください。ということになりますので、何を優先しているのか？が問われます。viewportは侮れません。
センター要素(<center>)
そしてcenter要素はHTML5では廃止となっているため使用することを許可しませんと警告が出ています。
なので、関連する文字を囲むdivにtext-align: center;やmargin: 0 auto;を、h3などの装飾される見出しにはdisplay: inline-block;で中央に配置する記述が正しいことになります。
ユーザビリティかWAI-ARIAか
<header id="masthead" class="site-header" role="banner"/>また、コンテンツの役割を説明するrole属性もセマンティック上は非推奨で、そのうち廃止になり、ブラウザ上で自動的に施すものとなります。WebアクセシビリティやWAI-ARIAの観点から場合によっては外せないものもありますので少し悩むところですね。
ただ、すぐに外すというのはしないほうが良いと個人的には感じます。
