LoginSignup
56
56

More than 5 years have passed since last update.

酷いHTMLを書かないために

Last updated at Posted at 2014-03-15

リストにsectionやarticle、見だしを書かない

<ul class="article-link"></ul>

こんな要素があったとします。
大抵はこの要素をみてリンク集かな?と思いますよね。

実際リンク集なのですが

<ul class="article-link">
<li>
<a href="permlink">
<article>
  <header>
    <p class="date">2014-12-01</p>
    <h1>タイトル</h1>
  </header>
  <figure>
    <img src="">
  </figure>
   <p>サマリー</p>
</article>
</a>
</li>
<li>…以下繰り返し</li>
</ul>

というようなサムネイル記事が書かれていることがあります。コード自体はもっと酷いこと多く、sectionやarticle、asideでラップせずにh1が現れることが多いです。文中リストから新たなsectionが始まるとか何考えてるのかわからないですよね。

<div class="article-link">
<artcile class="description">
  <a href="permlink">
  <header>
    <p class="date">2014-12-01</p>
    <h1>タイトル</h1>
  </header>
  <figure>
    <img src="">
  </figure>
   <p>サマリー</p>
  </a>
</article>
<article>
..
</div>

こういった記事一覧はDIVで囲めば十分なんです。HTMLスクラップしたときの汎用性も考えるとリンクは中にあった方がいいでしょう。

文章データを配列化する要素はありません。

sectionをdivの代わりに使わない

sectionあるあるですが

sectionとして使い方がなってない
<section>
<h2>見だし見出し</h2>
<h2>見だし見出し</h2>
</section>

sectionの中にセクショニングの書きだしとなる見だしがありません。
WEB制作会社などが得意とする書き方のようですがこれではテキストをどう保守していくのか疑問です。もしこのような囲みがほしい場合はデザインとしてなのでDIVでいいんです。

改善したセクション
<section>
<h2>見だし見出し</h2>
<p>段落段落</p>
</section>

こういった指摘をするとこれだといいんでしょ?上のようになりがちですが駄目です。
これは複数人で編集を加えるとどこかで

結局こうなる
<section>
<h2>見だし見出し</h2>
<p>段落段落</p>
<h2>見だし見出し</h2>
<p>段落段落</p>
</section>

なります。結局同じです。
sectionをDIV代わりに使っているからh2から始めたがるのです。

section要素の見だしは必ずh1から始める

セクショニングは見出しによって生成されるのでトップレベルの見出しが複数あることはありません。

h2やh3から始めてしまうとそのセクショニング内で同一レベルの見だしを複数書いてしまうミスが発生します。書いた本人が間違えなくても他人が間違え始めます。HTML5はHTML4とは違うので割り切ってh1から書きましょう。

そうすることでCSSとともに適切にモジュール化することもできるようになります。文章データとしてもキレイなデータになるのでリニューアルごとに大きな変更が必要なくなります。

sectionごとにMarkdown文章を書くとルール化すればだいたい解決します。新しいMarkdownを書き始めたら次のsectionとして構造化するそれだけなのです。

module化
<section class="module">
<h1></h1>
<h2></h2>
<p></p>
</section>

moduleクラス
.module{

}
.module h1{

}
.module h2{

}
.module p{

}
markdownによるセクショニング運用
<section markdown="1">
#markdown化による運用 見だしレベル1から始まる
##このような書式

段落段落
</section>

<section markdown="1">
#次のsectionには新しいmarkdown 見だしレベル1から始める

文章文章
</section>

ついでにaddressについて

そのHTML文章を書いた人の奥付です。

a nameでなくidを使いましょう

これいつの時代の人の主張なの?。楽天ルールでしょうか?。
どのブラウザがIDフラグメントに対応してなかったのか気になりますよね。

制作上におけるXHTMLへの誤解

ウェブサービスやWEB制作で使われているXHTMLというものは実はXHTMLじゃありません。基本的にHTML4.01互換です。

XHTMLは存在すること自体に失敗し、諦められ切り捨てられたのです。Web上で使われているXHTMLはHTML4互換としても動くXHTML1.0 TraditionalでHTML互換としてしか使われていませんのでXMLは関係ありません。XMLの機能が使われることもありません。常にHTML4.01相当のものです。XHTML、XMLとは無関係のものとして運用されていてこれからも関係することはありません。事実上の現役とされる運用フォーマットはHTML4.01とHTML5です。ガラケーはしらん。

あとXHTMLをHTMLとして配信する場合、XML宣言を省略するほうが文章の運用として正しいです。

HTML5 への簡単なとらえ方

XHTMLは普及しなかったのでXMLにHTML機能をもってくるんではなくHTMLにXML機能を持ってくればいいんだとXMLのいくつかの実装を持ってきて「ブラウザで動くこと」と「ブラウザの仕様」を優先させた物がHTML5です。XMLの整形式に変わりブラウザで気軽に使える次世代整形式フォーマットとしてHTML5をみてみるのもいいでしょう。

56
56
1

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
56
56