HTML5まとめ
前回は、HTML5より新しく追加されたfigure要素につきまして、ソースコードを交えながら記載いたしました。
ポイントは、figure要素内だけで自己完結しても意味合いを伝える要素で、キャプションも付け加えることができることだと思います。しかしながら、私個人といたしましてもHTML5より加わった新しい要素だけに、まだ使用すること自体になれておりません。
こういった新しい要素は慣れるまで、意識的に使用することをおすすめいたします。
という事で、それでは今回はッ、
・コーディングの際、意識する重要な事柄
上記について記載していこうと思います…。
HTML5まとめ
前回までHTML5につきまして、24ステップにわたりHTML5の記載をいたしました。
HTML5以前のXHTMLと比べますと、要素（タグ）が大幅に増え、XHTMLでのマークアップが慣れている人に取りましては、タグを指定するのが多少面倒に感じるかもしれません。しかしながら、新たに増えた要素にはそれぞれ意味合いがあり、正しくマークアップを心がけることが、ページ作成において最も重要なことのように思います。
このブログの初めの頃に記載いたしました、ホームページ作成の本来の目的を考えてみますと、HTML5でのマークアップが初めのステップとなる事と思います。
また、このHTML5マークアップ、ページ作成初心者の方で慣れていないうちは、なかなか適した要素（タグ）を割り当てることができない事があるかもしれませんが、初めのうちは本やウェブなどを参考に、ゆっくりと焦らず正しいマークアップを心がけることをおすすめいたします。
それでは、下記に今まで記載いたしました、各HTMLの一覧ページのリンクを記載しておきます。
よろしければ「初心者へホームページ作成時の心得！」より、お読みいただきますと、より一層、何が重要なことか理解が深まる事と思います。
また、ゆっくりじっくりと本を読みながらコーディングをおこないたい場合の、おすすめの本も記載いたします。
【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
コーディングの際、意識する重要な事柄
HTML5で新たにページ作成をおこなう際、もっとも重要な事柄は「適切なマークアップ！」これに尽きると思います。
先ほども記載いたしましたが、ホームページ作成の本来の目的を考えてみますと、適切なマークアップがおこなえていないと、次のステップであるCSSでのスタイルを指定する際に、CSSのコードがシンプルでなく煩雑になってしまい、結果、CSSもゴチャゴチャした感じになってしまいます。
少し例を記載してみますと、本来「section（タグ）」でマークアップをおこなう個所を「div(タグ）」でマークアップをしてしまうと、それだけidやclassなどの属性が増えてしまい、結果、その分ソースコードも長く煩雑でシンプルではないソースコードになる事と思います。
シンプルで正しいマークアップをおこなうコツは、ページの全体像から徐々に内側の細かなところを意識しながらマークアップをするよう心掛けると、比較的、マークアップがおこないやすい事と思います。
また、マークアップ自体が煩雑になってしまう原因としては、ページ作成を急ぐことが原因のひとつで、「初心者へホームページ作成時の心得！」にも記載いたしましたが、マークアップ自体が多少煩雑になっても、ページの見た目自体はさほど変わらない事が、大きな原因の一つといえることと思います。
しかしながら、マークアップが煩雑になり構文自体に誤りがあると、最終段階であるSEOなどに大きく影響してきてしまうこととなります。なので、焦らずじっくりと間違えのない構文で適切なマークアップをおこなうことが、ホームページ作成の初めのステップといえることと思います。
それでは、正しいマークアップが出来るように以前記載いたしました、「HTML Validatorで構文をチェック」のリンクを記載しておきます。
という事で今回は、HTML5のまとめを参考になる記事のリンクと書籍を含め記載いたしました。
ホームページ作成初心者の方はもちろん、ページ作成になれている方でも、最終的にはSEOに行きついてしまうことと思います。その際、HTMLの基本構文やマークアップ自体に誤りがないかなど、初心に戻りチェックすることをおすすめいたします。
チェックする際、参考になると思いますので次回はHTML5全要素・属性一覧を記載しようと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
