HTMLタグの特徴理解してる？
HTMLを上手く書けるようになると良いことがけっこうあります。まずは「Googleに評価してもらえるようになる」ということです。htmlタグは約110種類もあるのですが、それぞれに役割があり適切に使用することで検索エンジンからの評価をアップさせることができるのです。Googleに気に入ってもらえると良いことたくさんあります。
もうひとつは「共同作業がしやすくなる」ということがあります。だれかと作業しているときに「なんだよ、この汚いコード！」って腹を立てられなくなります。そうするとみんなの作業が早くなりますし、結果的に生産性が上がることになりますね。
というわけでHTMLタグを理解してキレイにコードを書くと良いことばかりなのです。
しかしながら「何が良いコードなの？」とわからないこと多いですよね。
今回はそんな「タグを適切に使うにはどうしたらいいのか」「自分なりにhtmlのコードを書いてるけどこれって大丈夫なんだろうか」と考える人に参考になるWebサイトを厳選してご紹介します。
特に後半は、マスターすればhtml以外の言語でのコーディングの際にも役立つスキルになっています！
タグって何かを知りましょう
htmlを学び始めるとまず最初に出会うのが”タグ”という存在です。
不思議の国のアリスではジュースの入った瓶に『Drink me!（私を飲んで！）』というタグがつけられていましたよね。
あのタグによって”瓶の中身は飲み物だ”ということがアリスには伝わりました。同様にhtmlのタグも、”ここの中身は画像”、”ここの中身は大見出し”というような情報を伝えるためのものです。
現在htmlタグの数は約110種類ほどあります。これを適切に使って情報を機械でもわかるようにすることがタグの役目になります。例えばGoogleという機械はこのタグをよーく見ています。そして、その中身を理解しているのです。このへんはスキルハブのHTML講座で完結に学べるので見てみると良いでしょう。
まずはコーディング初心者さんにありがちな「よくない」コードの書き方の事例を見て見ましょう。
初心者がやりがちなコーディング
例えば文字のブロックとメイン画像のブロックなどを分ける場合など”コードのカタマリ”を作る際にどうしても便利なのでdivタグを濫用してしまった経験はありませんか？
そんな「あまりよろしくないコード」を集めたサイトが存在します。
1.shitcode
htmlに関しては7つだけですが、「このコードの何がダメなのか？」を考えたり、調べたりするだけでもコーディングの際に役立つでしょう。
2.【初心者コードレビューHTML編①】div要素使いすぎてない？代替措置取れてる？ etc
div要素って便利ですよね。後ほど紹介しますが、使いすぎるとdivまみれになってしまい、別の人が見たときにわかりづらいコードになってしまいます。
また初心者さんが忘れがちなalt属性についても触れてくれていますので、今まさにコーディング真っ最中の人必見のサイトです。
3.誰もが通る道…WEB初心者が犯しやすいHTML&CSSのミスと間違い
最近htmlを始めたという人にとっての「あるある」が掲載されているサイトです。
きちんとコードを書いたのに、思い通りの表示にならない！という人はこちらのサイトで紹介されている項目をチェックしてみましょう。
divの濫用、わかりづらいコードがNGな理由
SEOにおいて致命的
当たり前ですが、わかりやすいコーディングはhtml以外の全ての言語で共通して求められるものです。
慣れるまではいちいちコメントを書くのは面倒だし、自分のWebサイトのコードなんだから好きにさせてよ！と思ってしまうかもしれません。
ただ実は適切なマークアップが施されたコードというのはSEOにおいても重要な要素の1つであることをぜひ頭の片隅に置いておいてください。正しいマークアップが実装されたWebサイトを検索エンジンは高く評価します。
そう考えるとSEO対策としても適切なタグでのマークアップが有効であることが理解できると思います。
複数人での開発の際に引き継ぎ、進捗管理などがしづらい
将来あなたがエンジニアとして複数人でWebサイトやアプリを開発するようになった時にdivタグまみれの長文コード（※どれがどのdivの閉じタグかわからない）や、コメントが全くない状態でこのカタマリはどの部分のコードなの？と思われるようなコーディングは周囲を困惑させてしまいます。
結果として開発が遅れたり、あなた自身のエンジニアとしての評価を下げることにもなりかねません。
とは言え一朝一夕に見に着くものではないので、どうせなら基礎の時点から慣れておいた方が得ですよね。
何よりも手を動かすことが大切
ここまで”脱”初心者コードの為のコツをご紹介してきましたが、何よりも大切なのは実際にコードを書いてみることです。
コーディングは手を動かして覚えることがとても大切です。こんなページが作りたいと思ったら、とにかく設計～コーディングまでを初めてみましょう。
そこでわからないことが出てきても大丈夫です。インターネット上にはコーディングの達人たちがたくさんの知恵を残してくれています。
実はこの”わからないことを調べる”力もコードを書いていく上で必要なものなので調べることは恥ずかしいことではありません。胸を張って検索しましょう！
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
10月11日まで