HTMLタグの特徴理解してる？脱初心者コードのコツを掴むお助けサイト10選
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の閉じタグかわからない）や、コメントが全くない状態でこのカタマリはどの部分のコードなの？と思われるようなコーディングは周囲を困惑させてしまいます。
結果として開発が遅れたり、あなた自身のエンジニアとしての評価を下げることにもなりかねません。
とは言え一朝一夕に見に着くものではないので、どうせなら基礎の時点から慣れておいた方が得ですよね。
脱初心者コードの為に必要な4つのステップ
①基本的なタグの正しい使い方を知る
②わかりやすいコーディングの為の効果的なコメントを残す
③良質なコードを見て学ぶ
④実際にコードを書いてみる
⑤チェックツールでミスがないかチェックする
①基本的なタグの正しい使い方を知る
1.初心者向けHTML入門：書き方の基本とタグの使い方
こちらではhtmlでコーディングを始める上での基礎中の基礎、絶対に必要なタグとよく使われるタグを紹介してくれています。
またサイトのデザイン部分にかかわってくるcssとの連携のためのidとclassについても触れてくれています。
2.HTMLタグを一覧表から探す
こちらのサイトではタグの一覧が掲載されており、「リンクをはる時のタグはどれだっけ？」というような目的別、「確かaから始まるタグだったんだよな…」というような時のためのアルファベット順と2種類からタグを探すことができるようになっています。
②わかりやすいコーディングの為の効果的なコメントを残す
例えばWebサイトのメインページを作ろうと思って作業を始めたとします。
1日の作業でページを完成させることができる人は初心者さんの中でどの程度いるでしょうか。別の日や、少し時間を空けてコードを見返したときに「ここはなんでカタマリにしてるんだっけ？」などと迷わない為にもコメント機能を上手に使いましょう。
6.htmlコメントアウトの一番使いやすい（と思ってる）書き方
わかりやすいコメントを書くためのポイントを3つに絞って解説してくれています。
時間がない時でもサクっと読める簡潔な文章になっているのもありがたいです。
7.【HTML】コメントアウトの書き方！注意点や便利な使い方も紹介
こちらではもう少し踏み込んでコメントアウトについて詳細な解説をしてくれています。
メインはhtmlですが、他の言語のコメントアウトの一覧なども掲載されていますし、初心者がコメントアウトの際にやりがちなミスの事例などもあり大変参考になります。
③ 良質なコードを見て学ぶ
わかりづらいコードはNGということは理解できたけど、じゃぁ見本をみせてよ！と言いたくなってきませんか？
自分からみても他人から見てもわかりやすいコードってどんなものなのでしょうか？
8.【初心者向け】HTML+CSS練習用のサンプルコード
こちらではhtmlとcssにわけてコードを解説してくれています。
例としてこのようなページを作る場合のサンプルコードが掲載されています。また徹底解剖編のリンク先では更に細かくページの構成からコーディングまでの詳細を確認することができます。
④実際にコードを書いてみる
ここまでで既にあなたは美しいコーディングの方法、逆にNGコード（俗にいうクソコード）とはどのようなものか、などを学んできました。
突然ですがトロトロでフワフワなオムレツがのったたいめいけんのオムライスをご存知でしょうか？
たんぽぽオムライス
自分でもあんなオムライスを作りたい！と解説や動画でやり方を学んでもいざ実践すると初回でお店と同じような仕上がりには当然なりません。
理解できていることと手が動くというのは別物なのです。
そこで自分で美しいコーディングを意識しながらLPを作ってみましょう！もし、今あなたが作りたいデザインが決まっているのであればそれを作ってみましょう。
まだhtmlをはじめたばかりでデザインまでは決まっていない…という方はコチラなんていかがでしょうか？
もちろん既にデザインが決まっている人にも参考になるテクニックが満載です。
10.初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。
⑤チェックツールでミスがないかチェックする
ここまで学んできたことを活かして自分でコーディングをしてみたけど、本当にこれであってるの？と不安になる人もいるでしょう。
そんな時に心強い味方となるのが、コーディングのチェックツールです。
9.【HTMLとCSSの文法チェックツール7選！よくある文法エラーも紹介
タイトル通り、コードのチェックツールをまとめてくれているサイトです。
中にはGoogle chromeの拡張機能でチェックする方法なども紹介されているのでchromeユーザーさんは一度確認してみてください。
何よりも手を動かすことが大切
ここまで”脱”初心者コードの為のコツをご紹介してきましたが、何よりも大切なのは実際にコードを書いてみることです。
コーディングは手を動かして覚えることがとても大切です。こんなページが作りたいと思ったら、とにかく設計～コーディングまでを初めてみましょう。
そこでわからないことが出てきても大丈夫です。インターネット上にはコーディングの達人たちがたくさんの知恵を残してくれています。
実はこの”わからないことを調べる”力もコードを書いていく上で必要なものなので調べることは恥ずかしいことではありません。胸を張って検索しましょう！
Web制作のプロになろう！スキルハブの無料ビデオ
無料ビデオ13講座/91レッスンが受け放題！
わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。
無料申し込み期限：
7月12日
まで
募集人数: 100名（残りわずか）
