レビューログレビューログApple製品(Mac,iPhone,iPad)が多めのガジェットレビューサイト。プログラミング(PHP,Laravel,Ruby,Rails)習得中。Web)」の考え方に則るように提唱されてから、しばらく経ちます。Googleなどの検索エンジンも同様の考え方を良しとしており、SEO的にもHTMLの構文がセマンティックWebの考え方と相違ないことが検索上位表示の前提となっています。(ユーザーから見ても、HTMLの構造が間違っていないことは見やすいサイトである、という考え方から。)今回は、本当に基本的なHTML5の枠組み部分についてまとめ、間違いやすいポイントを解説します。HTML5で廃止されたブロックレベル要素とインライン要素の違いとCSSのdisplayプロパテブロックレベル要素とは、見出しタグ(hタグ)や段落タグ(pタグ)といった、文書構成要素が分類されます。以下にサンプルコードを載せます。</body></html>※実用的なページを作るとなれば絶対に必要なdivタグやsectionタグ、footerやheader要素については別ページで詳しく解説します。...https://reviewlog.info/wordpress-meta/ここからは、上記HTML5の基本構造部分の中で間違いやすいポイントを挙げます。閉じタグを忘れているコードを書いていて、上手く動作しない時の理由の大抵はこれです。あなたの使っているテキストエディタは何でしょうか?管理人は主にVim(Mac,Windows)を使っていますが、コード補完機能を追加することにより極力上記閉じ忘れを無くすようにしています。TextやAtomといったエディタを入れている方も、拡張機能を必ずインストールしておきましょう。入れ子構造のルールをミスっている閉じタグと同様に多いのが、HTMLの要素の入れ子構造のルールを間違っているパターンです。HTMLタグには「ブロックレベル要素」と「インライン要素」が存在し、ブロックレベル要素の中でも"ブロックレベル要素を入れられる"ものと"ブロックレベル要素は入れられず、インライン要素のみ入れられる(それも特定のもののみ)"というものが存在します。divタグはブロックレベル要素で、中に同じdivを入れても問題ないですが、同じブロックレベル要素のhタグ(見出しタグ)はインライン要素しか入れ子には出来ません。リストタグのul,olタグもブロックレベル要素ですが、中にはliタグしか入れられません。Validator」で確かめようご自分のサイトがセマンティックな書き方をしているかをチェックするサイトが実はあります。https://validator.w3.org/管理人のサイトを確かめてみると、作りたてのサイトなのに、4つのエラーがある...。Validatorの良いところは、どこを直せば良いかまで提示してくれるため、簡単にサイトの改善を行うことが可能であります。...大切なものはバックアップで守ろうパソコンやスマートフォンではバックアップを取るのがとても大切です。