HTMLの運用って多くの方がコーディングガイドラインだけでやっているように思えるのですが
気が狂ってるとしか思えないですよね
せめてサイトごとに運用に使える文章定義らしきものがほしいと思ったことはないですか？。
といってもDTDやXML Schemaを書くのは辛いし多くの人が読めるわけでもない。
そこでまず文章定義のおさらいをざっくりと
要素の順序，要素の繰り返しパターン（0,0 or 1, 0または1以上）、要素の中身,要素の属性といったもの定義しています
こういうパターンって図であらわすことができるんです。
なので図を書いていきましょう、ステンシル用意してもいいですし手書きでもいいです。
大抵は手書きで済ましていいと思います。
HTMLのパターン図（基礎）
まずどのように書くのかHTMLの基礎的なブロック要素のルールを図に表した物を見てみましょう。
html要素がルート要素で間にある→の記号が要素の読まれる順序表しています。
この場合,head要素,body要素が１つ子要素としてありhead→body順で書くと言うことを表しています。
次にhead要素の中身を見てみましょう
「※」は0回以上の繰り返しを表しています。何も記号がないものは1回（必須）と言う意味になります。title要素は必須でその他は任意という意味です。真ん中が黒で塗りつぶされた◎の記号は要素の並び順は関係ないという意味です。
ついでにbody要素の中身も見てみましょう。
root要素の直下の要素のことをトップレベル要素などと言うこともありますが省略機構などを考えればbody要素直下もトップレベル要素と言えますよね。
トップレベル要素としてh1〜h6,p,ul,ol,dl,div,section,article,asideなどが定義されています。順序はありませんね。
応用編
レシピを表示するような記事として図のような構造を用意してみました。
レシピは筆者を複数で構成するという想定でarticleとしています。
header,figure,p,sectionと4つの子要素で順序付きで定義されているのがわかります
headerは子要素にh1を持っているのでレシピ名に使えますね。
figureには子要素としてimgを持ちレシピの完成画像などの掲載用として利用します。このfigure要素の横にある「?」記号は0回または1回を表しています。掲載画像がない場合はこのfigure要素は使居ません。
p.descriptionは掲載レピの紹介文となるのでしょう。何も記号がないので必須と言うのがわかりますね。
そしてsection。このsectionはh1が作り方となっているのでレシピの内容を掲載しているのがわかります。
sectionの子要素はh1、div.手順で順序が要素の順序が決まっていることが図からわかります。
div.手順のクラス名の「手順」は本来なら英単語の方がよさそうですが今回はわかりやすく日本語にしておきました。正式なクラス名が決まるまでは仮で日本語で書いておくことがあります。
div.手順の横にある「+」記号は1回以上の繰り返しを表します。
手順が1回以上繰り返されていてその中身は画像とp要素と言うことがわかります。
このような感じで図に書いておくことで構造が正しいか、効率よく処理出来るか？テンプレート化出来るか？属性値などいろいろなことを共有したり検討することが出来ます。
ER図とかと一緒ですね
ちなみに属性は@属性名：属性値といった形で表します。xpath的な表現方法です。