1-8 マークアップとは

書かれたテキストを一定のルールに従ってコンピューターだけでなく、 人にも判りやすく理解(提示)させる事を目的としたものです。 下記に見本としてマークアップ済み分とそうでない物(文章構造を意識していないもの)とを画像とソースで提示してみました。

1-8-1 マークアップ済み分の見本

【 画像 】

偉人の名言集:マークアップ済み分の見本

【 ソース 】

<h1>偉人の名言集</h1>
<p>ゲーテの有名な言葉を幾つかピックアップしてみました。</p>
<ul>
<li>大切なことは大志を抱き、それを成し遂げる技術と忍耐を持つということ。<br>その他は何れも重要ではない。</li>
<li>人間は努力する限り、迷うものだ。</li>
<li>芸術家よ造れ、喋るなかれ。</li>
</ul>


マークアップしていると見た目で「偉人の名言集」という言葉がタイトルなのが判ります。(CSSを利用して通常の文字サイズのみ10ptで表示しております)

1-8-2 マークアップなし分の見本

【 画像 】

偉人の名言集:マークアップなしの見本

【 ソース 】

<font size="6">偉人の名言集</font>
<br>
<br>
ゲーテの有名な言葉を幾つかピックアップしてみました。<br><br>
・ 大切なことは大志を抱き、それを成し遂げる技術と忍耐を持つということ。<br>  その他は何れも重要ではない。<br>
・ 人間は努力する限り、迷うものだ。<br>
・ 芸術家よ造れ、喋るなかれ。


見た目は上記とほぼ同じですが、文章構造は全く考えられておりません。(リストに使われている黒い点[・]も実は「?」キーの所にある物で代用されております^^;)。

1-8-3 CSSを切った状態の見本

上記で使用した二つの文章をCSSを切った状態で見てみました。


【 マークアップ済みの文章 】

偉人の名言集:マークアップ済み分の見本(CSSをOFF)

上記の画像はマークアップ済みの文章なので、CSSを切っても判り易く提示されております。


【 マークアップなしの文章 】

偉人の名言集:マークアップなしの見本(CSSをOFF)

しかしマークアップされていない文章では、人の目には何となく「偉人の名言集」がタイトルなのかな?と判りますが、コンピューターには指定されたタグが不適切だとそれを理解する事が出来ません。

出来るだけ文章構造を意識してHTMLは記載していって下さいね。

[ 関連事項 : HP-TIPS > HPの作り方 > 非推奨要素・属性 ]

1-8-4 テキストブラウザで見ても判りやすいサイトを目指す

適切なタグを利用して正しいHTML文章を書いていると、画像を表示しないテキストブラウザからの訪問や、 携帯からサイトを見ている方にも楽しんで貰えるサイト作りをする事が出来ます。

この色々な環境の方にも楽しんで貰えるサイト作りの事を、少し難しい言葉で云うと 『アクセシビリティ・ユーザビリティ』 を意識すると云います。

[ 関連事項 : HP-TIPS > HPの作り方 > その他の心構え > 使いやすく、見やすいサイトを目指す(アクセシビリティとユーザビリティ) ]