セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント
Webページのフロントエンドコーディングは「セマンティックWeb(Semantic Web)」の考え方に則るように提唱されてから、しばらく経ちます。
Googleなどの検索エンジンも同様の考え方を良しとしており、SEO的にもHTMLの構文がセマンティックWebの考え方と相違ないことが検索上位表示の前提となっています。(ユーザーから見ても、HTMLの構造が間違っていないことは見やすいサイトである、という考え方から。)
今回は、本当に基本的なHTML5の枠組み部分についてまとめ、間違いやすいポイントを解説します。
https://reviewlog.info/html5-block-inline-display/元となるHTML5の構造は本当に簡単
以下にサンプルコードを載せます。
<!DOCTYPE html>
<html>
<head>
<title>文章のタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>文章を入れる</p>
</body>
</html>
※実用的なページを作るとなれば絶対に必要なdivタグやsectionタグ、footerやheader要素については別ページで詳しく解説します。
ここからは、上記HTML5の基本構造部分の中で間違いやすいポイントを挙げます。
閉じタグを忘れている
コードを書いていて、上手く動作しない時の理由の大抵はこれです。
あなたの使っているテキストエディタは何でしょうか？
管理人は主にVim(Mac,Windows)を使っていますが、コード補完機能を追加することにより極力上記閉じ忘れを無くすようにしています。
Sublime TextやAtomといったエディタを入れている方も、拡張機能を必ずインストールしておきましょう。
入れ子構造のルールをミスっている
閉じタグと同様に多いのが、HTMLの要素の入れ子構造のルールを間違っているパターンです。
HTMLタグには「ブロックレベル要素」と「インライン要素」が存在し、ブロックレベル要素の中でも"ブロックレベル要素を入れられる"ものと"ブロックレベル要素は入れられず、インライン要素のみ入れられる(それも特定のもののみ)"というものが存在します。
例えばdivタグはブロックレベル要素で、中に同じdivを入れても問題ないですが、同じブロックレベル要素のhタグ(見出しタグ)はインライン要素しか入れ子には出来ません。
リストタグのul,olタグもブロックレベル要素ですが、中にはliタグしか入れられません。
本当にややこしい…
あなたのサイトがセマンティックWebの原則に則っているかは「W3C Validator」で確かめよう
ご自分のサイトがセマンティックな書き方をしているかをチェックするサイトが実はあります。
管理人のサイトを確かめてみると、作りたてのサイトなのに、４つのエラーがある…。
W3C Validatorの良いところは、どこを直せば良いかまで提示してくれるため、簡単にサイトの改善を行うことが可能であります。
皆さんもぜひ確かめてみましょうね！
