HTML5の基礎 まとめ

HTML5の基本形

エディターで「Atom」を利用している場合は、「html」と入力すると下記のベースとなるコードが表示されます。「lang=”ja”」が欠けている場合は、ご自分で追記してください。

HTML5で新しく追加されたコードと削除されたコード

下記のページで一覧にして説明してくれています!

HTML5の基本のお勉強!

下記のサイトが一番丁寧でわかりやすいです!とりあえず一読を!!

セクショニングを使った基本構造

上の参考ページでは「main」要素の説明がないですが、現在では「main」要素が新たに要素として追加されており、メインコンテンツ部分のセクションでは「div id = contents」ではなく、「main」要素を使ったほうがいいでしょう。

「header」と「nav」が分離している場合

「header」の中に「nav」がある場合はこちら

多くのケースで、「nav」要素の子要素に「ul」要素があります。また「main」要素と「aside」要素は、スタイルシートの左右分割配置をするために親要素の「div」要素で囲まれています。さらにWordPressの記事などでは、「main」要素の子要素に、「article」要素があります。その他、諸条件を踏まえたサンプル構造はだいたい以下のような感じになります。

その他、要素の変更点・追加点で気になったところのメモ

b
文字の装飾の意味はあるが、文法上の強調の意味はない。
strong
強調の意味がある。本当に強調したいときだけしか使ってはいけいない。
blokquote
長文の引用
q
短文の引用
section
他のarticleなどのセクショニング要素が使えない時のみ使う。また必ずhタグと一緒に使う。hタグが必要とならないような場面では使わない。