[HTML] HTML4.1脳おじさん、5に慣れようとする

いろいろルールあるんよ

DOCTYPE は html の一言だけで良い

<!DOCTYPE html>

4.1のときは strict とかなんとかで3種ぐらいあって、URLが指定されてる長いやつだったけど、
HTML5はこれだけで良い

記事ネタ:h1~h6 は使い分け

h1 : サイト見出し
h2 : 記事見出し
h3~h6 : 記事内セクション

のような使い分けをする
divとかのスタイリングだけでやっていた場合は要置き換え

記事ネタ : article / header / section / figure / footer を使う

html4 だと divとかでスタイリングして見た目だけ
html5になると上記のようなタグをdivの代わりに使う

Google検索でたまにサイトの下にページ別へのリンクが現れることがある
上記要素があればそのような表示になる

divとか見た目でしか無かった要素がhtml的に意味を持つようになり、
検索エンジンなどがそれを意味を持って参照するようになった

<article>
 <header>
  <h2>記事タイトル</h2>
 <header>
 <section>
  <p>本文</p>
  <figure>
   <img src="gazou.jpg" alt="altは書こうね(HTML4でもそう)">
   <figcaption>gazou</figcaption>
  </figure>
 </section>
 <footer>
  2022/5/29 08:21
 </footer>
</article>

サンプルはこんな感じ

HTML5セマンティック要素 (w3bai.com)
ただ、このサイトによると headerはページ全体のヘッダ部、footerはページ全体のフッタ部、みたいな感じで
記事単体の構成では無いように見える

多くのサイトはサンプルのような解説をしているわけだけども、
実際はどちらなのだろうか

text-align:center; は使える

一時期これが廃止されたとかどうとかで、margin:0px auto; で併用するとかめんどくさいことしなくてはならなかったけども、
無事帰還しているので安心して使える

ただし center タグは html5 ではお亡くなりになっているので、
text-align:center; に書き換えること

bとかstrongとかは意味を持つ

見た目だけじゃなくなった
これも上述のarticleみたいなお話

b : キーワードなど
i : 心で思ったことなど
em : 強調する (従来のb [なんとなく強調したくて太字にしていた] のような用途)
strong : 重要な要素 (bと役割が被ることもある)
small : 注釈、wikipedia の *1 みたいな記述をイメージするとわかりやすいかもしれない
hr : セクション内における話題の区切り

参考:HTML5から意味の変わる要素 <b>、<i>、<em>、<strong>、<small>、<hr>-HTML5リファレンス (htmq.com)

まあでも見た目を整えるのは基本的にスタイルシート

上記のbとかiとか、いろいろあるけども、結局は span style=”スタイル” または class=”クラス” でスタイリングするのが基本
記事書いていて意味分けしたいなあというときに上記を使う感じ

コメントを残す

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

Share via
Copy link
Powered by Social Snap