4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

このままやったらフロントエンドエンジニアになれへんで!Advent Calendar 2022

Day 5

細かいけど個人的にはこだわりたいコーディングのあれこれ【HTML編】

Last updated at Posted at 2022-12-04

個人のこだわりに近い細かい話です。
もし共感してもらえる部分があれば大変嬉しいです!

HTMLを記述する時のこだわり

HTMLを記述するときに個人としては絶対にやりたくない事例を紹介していきます。
感覚的なところもありますが、基本的にはHTMLの言語仕様の観点から見てBadケースだと思っています。

inputタグでアコーディオンを実装する

アコーディオンはクリックすると要素が出てくる上下に開閉するコンテンツです。
HTMLの規約違反ではないのですが、inputタグで実装するケースは正しいコーディングではないと感じています。

<input id="accordion" type="checkbox">
<label for="accordion">アコーディオン【タイトル】</label>
<div class="accordion-body">
  <p>アコーディオンが開いた時に表示されるテキストが入る</p>
</div>

HTMLのdetailsタグで実装するのが最適だと考えます。

<details>
  <summary>アコーディオン【タイトル】</summary>
  <p>アコーディオンが開いた時に表示されるテキストが入る</p>
</details>

空のdivタグで実装されている

アイコンやボタンなどを実装する際に空のdivを設置して、CSSでデザインを当てているケースを見かけます。
空タグはHTML規約では問題ないが、マークアップの観点からは良いとは言えないと考えています

image.png image.png

<div class="header-menu"></div>
<div class="next-bitton"></div>

SEO観点からも空のタグが順位に影響するようなものではないとされていますが、できる限り意味のないタグや空タグがないほうが良いと思っています。

iconなどはHTMLやSEOどちらの観点でも必ず意味を持たせたい要素ではないので、CSSのbeforeafterの擬似要素を使って実装するのが良いと考えます!

テキストはpタグとbrタグだけで実装されて、段落とかの概念を無視している

下記のような文章があったとして、表示上は全く問題ありません。
ただ、下記は段落ではなく文章なので全てをpタグで囲むのは誤りではないか?ということが言いたいです。

<p>
  親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。<br>
  別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。<br>
  小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)
</p>

上記はコーディングとしては間違っていないと思います。
ですが、段落を意識してマークアップするなら

<div>
  <p>
    親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。
  </p>
  <p>
    別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。
  </p>
  <p>
    小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)
  </p>
</div>

冗長的な感じはしますが、個人的にはこれが正しいと考えています。

formの情報をbuttonタグではなくaタグやJavaScriptの処理で送っている

古いコードでよく見かけます。

<form id="form1" action="#" method="get">
  <input type="text" name="name">
  <a href="#" onclick="document.getElementById('form1').submit(); return false;">
    データを送信する
  </a>
</form>

buttonタグを使えばHTMLにJavaScriptを記述しなくてもデータは送れます。

<form id="form1" action="#" method="get">
  <input type="text" name="name">
  <button type="submit">
    データを送信する
  </button>
</form>

submitするbuttonとして利用する場合はtype属性を指定しなくても良いです。
type属性をtype="button"にするとsubmitの機能は消え自分でアクションを定義できます。

アクセシビリティの観点から押下する役割の要素はbuttonで実装されることが好ましいとされています。

まとめ

誰が見てもわかるようにしておくにはHTMLの基本ルールに則るのが一番だと考えています。

HTMLは自由にかけてしまうため個人で独自のスタイルが生まれやすいです…
また、ブラウザが優秀なのでタグ閉じられてないなどの多少のミスならいい感じにフォローしてくれるのでエラーが出にくいのも煩雑になってしまう原因だと思っています。

関わる全員で共通認識を持つためにチームでコーディングへのこだわりなど、こんな考えでやっているなど共有することもわかりやすいく、保守しやすいコードを書くための方法の一つかもしれないと考えています。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?