TL;DR;

本記事はhtml5に関する記事で、他バージョンについても同様の事が言えるとは限りません。

とりあえず自論なので鵜呑みにはしないでください。自分の感性を信じてください。
htmlのマークアップに正解はないです。でもこれはないだろ・・・ってのは時々見ます。

htmlはプログラミング言語と比べて簡単で入門向け。みたいな記事をよく見ますが、
『それ、仕様無視したり正しいマークアップせずにゴリ押しで書いた場合やろ？』って毎回思います。
実際そういう記事でちゃんと仕様に基づいた解説をしてる記事あんまり見ません。

後々の保守性を無視してとりあえず画面に表示するだけなら確かに簡単だけど、正しい仕様に沿って適切なマークアップをしようと思うと意外と覚えることは多いです。
要素自体の本来の用途だったり、アクセシビリティの考慮だったり、DOMの扱いだったり、数多のブラウザの対応状況を考慮したり・・・・。

その中でも今まで出会ったコードの中でもとりわけこれは論外。と思ったものをつらつら書きます。
何度も言いますがこの記事の内容が100%正しいわけでも以下に書くものが100%間違ってると言ってるわけでもないです。

何か見ながら書いてるわけでもなく自分の記憶の中の引き出しから文句を書いてるだけなのでどっかしら情報間違ってる可能性あります。これも何度も言いますが鵜呑みにしないでください。

不要な終了タグは省略してほしい問題

特に多いのはテーブル関連要素で律儀に閉じタグをわんさか書いてくれる人。
テーブル関連要素は基本的に直後に(あるべき)テーブル関連要素が続く場合終了タグ省略できます。

例えば以下のコード

KIRAI.html

<table>
  <caption>嫌いなテーブル</caption>
  <thead>
    <tr>
      <th>ヘッダ1</th>
      <th>ヘッダ2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  ....
</table>

上記のテーブル関連要素だと、以下省略できます。

tr : 直後が親要素の閉じタグ(theadとかtbodyとか)の閉じタグなら省略可能
th,td : 直後がthまたはtdの場合、もしくは直後が親要素の閉じタグ(trの閉じタグ)なら省略可能
thead : 直後がtbodyかtfootなら省略可能

つまり以下の書き方でもいい

SUKI.html

<table>
  <caption>好きなテーブル</caption>
  <thead>
    <tr>
      <th>ヘッダ1
      <th>ヘッダ2
  <tbody>
    <tr>
      <td>データ1
      <td>データ2
  ....
</table>

個人的にはテーブルは特にネスト深くなりがちな要素だと思ってるので余計なものはカットしてほしい。行数も無駄に増えるし。
リストとかでもli要素にいちいち閉じタグいれるのとか見てるとすごく気に入らなかったりするけどここでそこまで書くとキリがないのでとりあえずここまで。

見出し(h1~h6)の意味理解しないまま使わないで問題

見出し要素を文字を大きくするための要素だと思って使ってる人多くない？っていう問題。
見出し要素はあるセクションに対する見出しを表現するための要素だということを理解せずに使っている人が多いのかもしれない。知らんけど。

セクションを定義する要素(セクショニングコンテンツ)と見出し要素は基本的にセットで、セクション要素を省略すると見出し要素は暗黙のセクションを用意して実は見えないセクションを生んでいる。

セクションは章とかそういう感じの。基本的にひとつの文章の中で話が切り替わったり、起承転結のタイミングとかで変えたりとか、明確に変えるべき時に変えるものであって、ここは強調したいから！みたいな感じで使わない。
というかそれならemとかstrongとか使って。フォントサイズとか決めたいならそれ用のclass属性用意して。っていう。

以下、かなり盛りに盛った極めつけに汚いコード。
こういうの見たら実装者にありったけの文句を言っていいと思う。私ならhtml入門書でビンタしたいくらい。

KIRAI.html

<article>
  <h2>タイトル</h2>
  <h3>副題</h3>
  <h2>概要</h2>
    <p>概要本文</p>
  <h3>まとめ</h3>
    <p>まとめ本文</p>
</article>

上記だとアウトラインはこんな感じ。

タイトル
- 副題
概要
- まとめ

ここの文字サイズはこうしたい！みたいな意図だけで書いたコードでセクションの存在すら知らない人とか多分こういう風に書いたりするんじゃないかと思う。勉強してる段階ならいいと思うけど、ネット上に公開してるWEBサービスとかでこういうの見るとｵｲｵｲ・・・・ってなります。
最近公開されてるサイトだとまず見かけないけど、古～～～いサイトとかだとたまに見る。本当に。

こういう場合アウトラインってこんな感じにするのがいいんじゃないかなって例をひとつ

タイトル (副題はセクションではないのでそもそも見出し要素使うのがアンチパターン)
- 概要
- まとめ

↑の感じでマークアップするならこんな感じで書くのが定石な気がする。

SUKI.html

<article>
  <h1>タイトル</h1>
  <p class="subtitle">副題はclass属性用意してそいつでレイアウト決めましょう</p>
  <!-- section要素は暗黙のセクションでもいいかもしれないけど基本明示的に制御しようよっていう -->
  <section>
    <h2>概要</h2>
    <p>概要の本文</p>
  </section>
  <section>
    <h2>まとめ</h2>
    <p>まとめ本文</p>
  </section>
</article>

セクションに関して細かく書くと書ききれない量になるので知らない人はggってください。
すごく簡潔に一言でまとめると、htmlの要素で装飾をしようとするの本当にやめてくれ。です。

style属性多用問題

グローバル属性でどの要素でも指定可能なstyle要素だが、個人的に思うのは、
htmlとcssの役割って可能な限り分離した方がよくないですか？という疑問。
ある要素のスタイルはcssで制御するけど他の要素では同じスタイルをstyle属性で定義してる。みたいなしっちゃかめっちゃかした実装をみると頭が痛くなります。レビュアーを殺す実装なのでやめましょう。

style属性使うのはページ内で動的に適用するスタイルを追加/変更する場合だけでいいと個人的に思ってます。
要はスクリプトで後から付与する場合くらいだけでよくて、最初から適用するスタイルはcssに書こうよ。ってことです。
(もっとも、後からスタイルを追加/変更するケースって要素の状態が変化している状態だと思うのでcssの疑似クラスとか疑似要素とかで基本的に賄えると思いますが)

特にstyle属性で指定したスタイルはcssでの指定よりも優先的に適用されるので詳細度とかわけわかんなくなります。
汎用cssファイルとかで汎用的に効かせたいスタイルが効かなくなったりとか、そういう悪いことはあってもイイコトってそんなにない気がします。あるのかな。

id属性にhoge1とかhoge2とかよくわからないナンバリングするやつ

実装者の意図とか分かりかねるから本当にやめてほしい

id属性でセレクタ指定してスタイルを決めるやつ

それ本当に一意でなきゃいけないid属性でやる意味ある？？？？？？？？

フォームとかでdl要素使うやつ

NANDASORE.html

<form action="hogehoge" method="GET" ......>
  <dl>
    <dt>ログインID
    <dd><input type="text">
    <dt>パスワード
    <dd><input type="password">
  </dl>
.....
</form>

label要素とinput要素の組み合わせでダメな理由を50文字以内で述べてほしい

というかdl要素は用語:説明を表現するリスト関連要素だから上記の実装が用途に沿ってない。

おわり

やめてほしいマークアップはまだ色々引き出しはあるけどある程度書けて満足したのでとりあえず今回はここらへんで。

html5 マークアップやめてほしいこと色々