1 of 20

Beautiful HTML 入門

2025-05-23(金)

CodeGrid 13周年記念パーティー

Author @debiru_R

1

2 of 20

自己紹介

  • 高井 実 (Takai Minoru)
  • Twitter: @debiru_R
  • 2000年頃から HTML を研究している。HTML 原理主義者。
  • 趣味
    • HTML を設計すること
    • HTML ソースコードを読むこと

2

3 of 20

今日話すこと

  1. 内部品質と外部品質
  2. HTML の構造的品質
  3. HTML の可読性品質
  4. HTML は芸術である
  5. 宣伝

3

4 of 20

1. 内部品質と外部品質

4

5 of 20

1. 内部品質と外部品質

  • 内部品質
    • プロダクト開発者のための品質
      • 開発しやすさの度合い：保守性など
  • 外部品質
    • プロダクト利用者のための品質
      • 利用しやすさの度合い：利便性など
      • 全てのユースケース（利用者ができること）に対する利便性

5

6 of 20

Web ページ（ブラウザ）におけるユースケース

6

Web ページを操作/利用する

コンテンツを閲覧する

リンク先に遷移する

フォームを入力する

URL を入力する

URL を確認する

SSL/TLS サーバー証明書を確認する

HTML ソースコードを�表示する

7 of 20

Web ページ（ブラウザ）におけるユースケース

  • HTML ソースコードを表示（閲覧）することができる
    • 注：iOS Safari では、この機能が提供されていない
  • HTML ソースコードを読みたい利用者がいる
    • そのような利用者のニーズを無視してはならない

7

HTML ソースコードを�表示する

8 of 20

2. HTML の構造的品質

8

9 of 20

2. HTML の構造的品質 - 参考：HTML 解体新書

  • 字句的ルール（well-formed）
    • <p><b>TEXT</p></b>
    • タグが構造的に壊れていないか
  • 語彙的ルール（valid）
    • <p><div>TEXT</div></p>
    • HTMLの仕様に反していないか（属性や内容モデルなど）
  • 意味論的ルール（semantic）
    • <div>見出しテキスト</div>
    • HTML要素の意味、目的適合性に反していないか

9

10 of 20

3. HTML の可読性品質

10

11 of 20

3. HTML の可読性品質

  • 要素タグごとに改行とインデントを付ける
    • （インラインとして振る舞う）フレージング・コンテンツを内容とする要素タグ以外は、1行に1つの要素タグしか書かない

(NG)

<html><head><meta...></head>

<body><p><span>...</span></p></body>

</html>

(OK)

<html>

<head>

<meta...>

</head>

<body>

<p><span>...</span></p>

</body>

</html>

11

12 of 20

4. HTML は芸術である

12

13 of 20

4. HTML は芸術である

  • HTML ソースコードはエンドユーザーに開示される
    • コードを読んで実装を理解したいユーザーがいる
  • HTML は Web ページが動けばいい、というものではない
    • HTML コードには内部品質だけでなく外部品質も求められる
    • HTML の構造的品質を満たすことが求められる
    • HTML の可読性品質を満たすことが求められる
    • 変な注釈宣言（HTML コメント）が残っている、格好の悪い class / id がついている、そんな HTML でいいんですか？

13

14 of 20

4. HTML は芸術である - 原理主義者の主張

  • Web ページは HTML だけで機能すべきである
    • CSS が無効な UA でも Web ページを利用できる
    • JavaScript が無効な UA でも Web ページを利用できる
  • HTML ってそういうものだよね
    • なんでみんな JavaScript ありきで Web サイト作りたがるの？
    • JavaScript は補助的なものであって依存してはならない
    • SPA サイトだろうが JavaScript 無効でも動くように作れ

14

15 of 20

4. HTML は芸術である

  • プログラミング言語を書くときは「リーダブルコード」とか言うのにマークアップ言語を書くときは、生成コード（HTTP レスポンス）の可読性を気にしない皆さん
  • Web ページの顔は、ブラウザから見られる「HTML ソースコード」にあるのです
  • HTML ソースコードの芸術性を理解して HTML を生成できない人は HTML のプロフェッショナルとして相応しくないのでは？

15

16 of 20

Beautiful HTML ってそういうこと

続きは BeautifulCode で検索

https://beautifulcode.lavoscore.org/

16

17 of 20

5. 宣伝

17

18 of 20

hackbrew.dev コミュニティ

Web 開発者のための�Discord コミュニティを創設しました

https://hackbrew.dev/

18

19 of 20

メンタズル�mentuzzle - 心を明瞭にする性格診断サイト

2023年から毎年、新しい診断をリリース�2025年の新コンテンツは、5月23日24時に公開

https://mentuzzle.com/

19

20 of 20

まとめ

  • JavaScript に依存するな
  • HTML の出力コードに関心を持て
  • BeautifulCode で検索
  • hackbrew.dev で検索
  • メンタズル で検索

20