HTML HTMLに気をつけてコードを書いてみた結果

こんにちは。hirafujiです。なんだか久しぶりの投稿です。
今回のHTMLの講義では前回書いたコードの振り返りをしました。以下内容です。

【改善前のコード】

前回の記事をご覧下さい。

【私のコードの改善点】

【problem】(改善すべき点)
  • 色が変。
  • 色んな宣言が抜けている。(実は提出版では宣言系がごっそり抜けていて、ブログに書く際にこっそり付け足しました。)
【try】(より良くするために取り入れてみるといい点)
  • <p>タグを使ってみる。
  • <div>タグを使ってみる。

ということで、これらの点をふまえて、前回のコードを以下の様に改善してみました。

【改善後のコード】

  ※改善箇所は赤字。


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">


  <head>
    <title>こんにちは!僕まとめ!</title>
  </head>

  <body>

     <div> 
    <h1>6月までの新人研修のふりかえり</h1>
    <p>6月までの新人研修を振り返ってみましょう。</p>

    <h2>新人教育を受けて感じたこと</h2>

    <dl>
      <dt>【自分が苦手だと思うところ】</dt>
        <dd>
         <p> 
         配列の考え方がまだ苦手です。<br />
         どういう処理をすればいいのかわかっていても、どう記述すればその処理を実現できるのかわからなくて苦戦することが多々あります。<br />
         また、やはりみんなよりも作業スピードが格段に遅いのも気になっています。<br />
         </p> 
        </dd>

      <dt>【自分は出来たと思うところ】</dt>
        <dd>
         <p> 
        特にない、というのが正直なところです。<br />
        唯一英語は得意ですが、今のところ役立っているという感覚はあまりありません。<br />
        (エラー文に強くなってきましたが、間違いまくった経験の方が役立っているのであろうと・・・。)<br />
        もっと他に、プログラム的な部分で得意分野を見つけていきたいです。<br />
         </p> 
        </dd>
    </dl>
     </div> 

     <div> 
    <h2>HTML授業について</h2>

    <dl>
      <dt>【印象に残ったブロックレベル要素】</dt>
        <dd>
        <ul>
          <li>form要素</li>
        </ul>
         <p> 
        断然FORM要素が印象に残っています。<br />
        FORM要素のおかげで、できることがグンと増えましたし、「こんなこともしたい」「あんなこともしたい」というのも増えました。<br />
         </p> 
        </dd>

      <dt>【よくわからないブロックレベル要素】</dt>
        <dd>
        <ul>
          <li>p要素</li>
          <li>div要素</li>
        </ul>
         <p> 
        大変申し訳ないのですが、いまひとつ使い時がわかりません。<br />
         </p> 
        </dd>
    </dl>
     </div> 

  </body>
</html>

【表示結果】

こちらをクリックして下さい。

ここで、折角なので、前回の記事でご指摘いただいたこともふまえて、Another HTML-lint gatewayにてこのコードのチェックをしてみました。

【チェック結果】

3個のエラーがありました。このHTMLは 96点です。

まだエラーが出ていますが、この内容は今までの講義でまだ習っていませんので今回はおいておきます。

ということで、今の私が書ける最上級のコードが出来あがったわけですが、どうでしょうか。個人的には、背景色が無くなって寂しいなぁなんて…(笑)

こうしてどんどん正しくて見やすいコードを書ける様になっていきたいと思っておりますので、何かございましたら、遠慮なくご指摘下さい。よろしくお願いします!

—-
(2008/06/18 16:58 hirafuji追記)
動画をご覧下さい〜!

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree