【コーディング】頂いた指摘。
0ちょっとコーディングに詳しい人に、自分のソースを見てもらいました。
ちなみにHTML5で書いたものです。
HTMLは独学で習得しましたが、その方法は、
ググって出てきたものを試して、意図通りに表示されればオッケー。という感じだったので、
いろいろダメな記述をしてしまっているんじゃないのかな〜、、と思っておりました。。
備忘録的に、いただいた指摘をまとめてみます。
1. 画像には極力altを入れる
自分の認識的には、「入れれるところには入れた方がいい」という感じで、
「極力入れよう」というほどではありませんでした。
SEOと、アクセシビリティ (画像が閲覧できない場合)を考慮して入れたほうがいい、という話です。
上記は自分が「入れれるところには入れた方がいい」と思っていた理由でもあったので、
目からウロコというほどではなかったのですが、
指摘頂いて極力全て (ライン等の装飾はまた別ですが)の画像に
alt属性を入れていこうと思いました。
2. 画像にはWidthとHeightを極力指定する
その方がロードが早いそうです。
・サイズを指定していない場合
1. ブラウザが画像サイズを読みにいく
2. サイズを取得
3. 画像を入れるためのボックスを作る
4. 画像をはめ込む
というフローが、
・サイズを指定している場合
1. 画像を入れるためのボックスを作る
2. 画像をはめ込む
というフローに変わるそうです。
これは気をつけなくては、と思いました。
ただ画像サイズの指定って大変なんですよね。。
パスがローカルに対応しているならZen-Coding等の
「画像サイズ取得」みたいな機能を使えばいいのですが、そうでない場合。
例えばWordPressを使っていて、
PHPでテンプレートディレクトリのパスを読みにいっている場合とか。。
いちいち画像サイズを確認→入力というアナログな作業が入るので、めんどくさい！
これは何かオススメの方法があれば教えて下さい。でもないだろうなー。
3. 内容に応じてhではなく、定義リスト (dl,dt,dd)を使う
そのまんまですね。
でもまあ見てもらっていたコードにおいては、
これは意味的にhでも問題ないねという話になりました。
4. 「段落」にはpタグ
というのも、私、brを2つ使って段落を変える！
ってことを普通にしてたんですよね。
言われてみると確かにおかしい、と思ったんですが、
今まで全く気づきませんでした。。
br2コではなく、pタグ閉じで対応して、
pタグにmargin-bottomをつけるのが適切だそうです。
まとめ
指摘された箇所は思ったよりも少なかったんですが、そのわりに長くお話しさせて頂きました。
その中で思ったことは、もう少し記述内容 (意味)に沿ったコーディング、
バージョンに沿ったコーディングを意識していくべきだなと。
要するに文法に沿ったコーディングか。
その方はW3Cの仕様書も自力で翻訳して読んでいるくらいで、
見習わなくてはなぁと思いました。
Comments