いろいろルールあるんよ
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=”クラス” でスタイリングするのが基本
記事書いていて意味分けしたいなあというときに上記を使う感じ
