よく使うHTML5的マークアップタグ8個

htmlを書くとき、セマンティックな考え方でタグ付けしていきたいものですが、
どうしても個人の解釈に委ねられてしまうみたいな部分、ありますよね……。

そんな時は自分のルール(考え方)に則ってタグ付けしていくわけですが、
この自分のルールってやつもなかなかあやふやで覚えられなかったり……。

というわけで、個人的によく使うのにあやふやな意味付けマークアップタグくん達を
備忘録的にここでまとめておくことにしました。

ついでにいつもこんな感じにするよ〜みたいなスタイルも書いておきます。


  • bタグ
  • strongタグ
  • emタグ
  • iタグ
  • smallタグ
  • hrタグ
  • figureタグ
  • figcaptionタグ
bタグ

製品名、パーツ名など、キーとなるモノの名前。

b{ font-weight: bold;}
strongタグ

ゼッタイ外せない大事なトコロ。

strong{ font-weight: bold;}
emタグ

別に外せるケド大事なトコロ。意味深なトコロ。

em{ text-decoration: underline;}
iタグ

誰かしらのセリフ。かぎ括弧つけるような部分。

i{ background: #fcf;}
i:before{ content: '「'; font-style: italic;}
i:after{ content: '」'; font-style: italic;}
smallタグ

注釈。断り書き。どうしても主張しておきたい気持ちを込めた文とか。

small{ font-size:small;}
hrタグ

一応そのセクションで一貫した話はしているのだけれども、場面変わった感あるよねって場所に挿れる。

hr{ margin: 1em 20%;}
figureタグ

図表。作品。文章から参照される資料とか。

figure{ display: block; width: 100%; margin: 1em; padding: 1em; text-align: center; border: solid #777 1px;}
figcaptionタグ

figureのタイトル。

figcaption{ display: block; width: 100%; margin: .5em;}

スタイルに関しては割とテキト〜ですが
こんな感じでバランスよく使うと、記事もそれっぽく見えますね。

そのうち増やすかもしれません。

また、もしもココはこうだからこうしてこんなマークアップするべきみたいな意見があれば、
是非お聞かせください。

よく使うHTML5的マークアップタグ8個」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。