11｜セクショニング・コンテンツを意識してセマンティックなHTMLを書こう

セマンティックとは？

MDNの引用には下記のように記されています。

プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。

https://developer.mozilla.org/ja/docs/Glossary/Semantics

ちょっと難しいですが、要は「できる限り、文書に対して正しい意味でマークアップしましょう」ということになります。

web兄さん

良いコーダーはみんなセマンティックなマークアップを意識したコーディングを行うことができます👍ポートフォリオなどでも評価されるポイントなのでマスターする必要がありますよ！

コンピューターに正しく情報を伝えるメリット

私たちがブラウザを閲覧するときは、それがどんなにめちゃくちゃなHTMLでマークアップされていても、CSSさえ整っていれば誰でも等しく情報を取得できますよね。

でもコンピューターはそうは行きません。

アウトラインである<hx>がめちゃくちゃだったり、全然意味の違うマークアップを行なっていると正しく情報を評価することができません。

正しいマークアップをするには？

正しい（なるべくセマンティック）なマークアップをするには、以下の３つの流れを意識したコーディングができればOKです。

1. タグの意味を理解して各要素を正しくタグづけする
2. アウトラインを意識する
3. セクショニングを明示的にする

❶はみなさん問題ないと思うので、❷、❸を今回は学習していきます。

パスワードが必要です

これより先は有料コンテンツです。「ギャクサン」の購入ページから契約をしてください。
すでに契約済みの方でパスワードの入力が上手くいかない場合はサポートへ連絡してください。

送信する