HTMLマークアップについての走り書き

こんにちは、ちゃんけいです。

今回は表題通りの「HTMLマークアップの仕方」について書いていきたいと思います。

HTMLをしっかり書くことができることはメリットしかありません!CMSの構築がうんと楽になりますし、CSSを書くのも楽になります。JavaScriptを書くのも楽になるはず、、、!

私はマークアップエンジニアとして働いていますので、どこからともなくこんな声をよく聞きます。

「できればコーディングのわからないデザイナーと仕事したくないなぁ。。。」

す、すごく理解できますこの言葉。理解しようという姿勢だけでもいいから、、、!と言いたくなります。

デザイナーの方も決して他人事ではないのでしっかり勉強していきましょう。

目次

  • 2つの理解したい項目
  • セマンティックとは
  • 見出しとセクションの考え方

理解したい項目

HTML/CSSを勉強する上で理解していきたい2つの項目があります。勉強していくときっとぶつかることになるであろう部分です。

セマンティック

HTMLを学習する上でとても大事なセマンティックにコードを書くこと。

「HTMLは正解がわからない」というかたは、セマンティックであるかどうかを基準にしてみてはいかがでしょうか?

CSS設計

CSSの勉強していくとたどりつくのが、命名規則やスタイルの使い回し、他のスタイルに影響を出してしまうこと。

これらを解決する方法が、CSS設計です。たくさんの手法があるので、本を読んでみて実際に触れてみて自分に合うものを選ぶのが一番だと思います。

ネット上にも多くの記事がでているので、一度みてみてはいかがでしょうか?

セマンティックとは?

HTML5になり、さらにセマンティックに!なんて言葉をよく聞きます。

セマンティックって何?、そう思う方も多いと思います。

なので最初気をつけたいことを2つだけ。

  • HTMLのルールに則って書いてあり、バリデーションでエラーが出ない
  • hタグの見出しが適切である

バリデーションに関しては、いろいろと考え方はあると思うのであまり触れない方向で、、、

しかし、最初HTMLを学び始めたときは大切な基準になるのがバリデーションチェックです。作ったものはかならずバリデーションでチェックするようにしましょう。

hタグについては、大見出し( h1 )、中見出し( h2 )、小見出し( h3 )、とあるようにWebサイトは見出しを適切につけてあげる必要があります。

見出しの部分のつけ方は、SEOに強い制作会社さんの公開実績のサイトをデベロッパーツールで見るのが一番勉強になると個人的に感じいます。

 

見出しとセクションの考え方

先ほどもあがりました、見出しのつけ方。非常に重要ですね。

セクションと見出しを1セットにして考えるととてもわかりやすいです。当サイトはセクショニングが非常にわかりやすく簡単なマークアップをしているので見ていただけると勉強になるかもしれません。

下の画像を見ていただくと、大きく「section」で囲っています。そのすぐ下にh2要素の見出しをつけています。

見出しが来たらsectionで囲み、その中には必ずh要素がはいる。簡単ですね、当サイトに関してはレイアウトが簡単なだけですが、、、

デベロッパーツールで画像の箇所を見るとこんな感じに。

すっごいシンプル。

section要素の中にh2要素があり、同じセクション内に見出しが来たら「h何」でマークアップしますか?

答えは簡単、「h3」要素です。絶対ではないですが、、、、、

h要素を適切に使うということは、同じsectionの中で「h3」要素の下に「h2」要素が来ることはまずないということです。

これを念頭においてまずは勉強してみてください。

まとめ

今回は、初学者むけの記事になりました。

h要素の使い方は、articleや動的コンテンツによってだいぶ変わってきます。が、まず覚えることは基礎の基礎だと思い今回はこのような書き方になりました。

もっと詳しく書けるように、私もHTMLの勉強頑張ります!

それでは今回はこのへんで。ちゃんけいでした。( ´・ヮ・`)