HTMLのコードを美しく書けるようになる勉強法

HTMLのコードを美しくかけるようになる勉強法をお教えします

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
ぼく

HTMLのコードを綺麗に書きたいな

どうやったら綺麗にかけるんだろう

この疑問に答えます。

プログラミングの入門言語として知られるHTMLですが、コードの綺麗さを意識して記述できていますか?

HTMLは適当に書いてもPCには表示されるので、しっかりとコードを書かなくてもそれっぽく表示されてしまいます。

しかし、しっかりとHTMLのコードを書くことは様々なメリットがあるんです。

ということで本記事では『HTMLを美しく書くためのメリットと勉強法』について解説していきます。

HTMLを美しく書くために必要なこと

HTMLのコードを美しくかけるようになる勉強法をお教えします

まずはじめに、HTMLを美しく記述するために必要なことをお伝えしてしまいます。

大事なことは1つだけです。

これだけです。

HTMLの構造化というのは、適切なタグを適切な量を使ってコードを記述するということです。

例えば、以下の例をみてみてください。

<html>

<head>
</head>
 
<header>
</header>

<body>
<body>

<footer>
</footer>

</html>

このように、HTMLを記述する時は適切なタグを使用していますよね。

これが構造化です。

そして、HTMLを記述する上で必要となるのは、このような適切な構造化を細部までこだわっておこなえるのかということげがポイントとなります。

細部の構造化というと、例えばこんな感じです。

resultの見た目は変わりませんが、『おはよう』という文字をPタグで囲ったか囲っていないのかという違いがあります。

結論的には、Pタグで囲っていた方が適切に構造化できているといえるので、適切なコードの書き方であるといえます。

それでは、構造化をするメリットは何があるのでしょうか?

構造化をするメリット

HTMLのコードを美しくかけるようになる勉強法をお教えします

メリットは大きく分けると2つになります。

手をくわえやすい

一つ目の大きな理由が、他の人がコードをいじる時や、後からコードを加筆する場合にコードを修正しやすいという点です。

まず、前提としてですが、プログラミングは全ての作業を一人でおこなうわけではありません。

多くの人たちと協力してプログラミングを書いていく必要がありますし、時には別のプログラマーさんがコーディングしたものを修正する必要があります。

コードが美しく記述することで、エンジニアさん同士で協調しやすくなりますし、後から手直しする時にも構造化されていればすぐに修正することができます。

SEOが適切に読まれる

二つ目の理由は、SEOという面で適切に評価されるというメリットがあります。

まずSEOがなにかわからないという方向けに、SEOについて解説をしますね。

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを”SEO対策”と呼びます。

SEO(検索エンジン最適化)とは

つまり、SEOとはグーグルで上位に表示されるためのシステムのことです。

グーグルは人間のように記事の内容から記事良し悪しを判断することはできません。

そのため、様々な要素から記事の良し悪しを判断し、上位に表示するサイトを決定しています。

そして、SEOの評価対象の一つが適切なHTMLの構造化であると言われています。

検索上位に表示されるメリットは凄まじい広報能力です。

世界中の様々な人に記事やサイトを見ていただけることは、それだけで大きな宣伝になるからです。

現在、SEOの施策を行うことはWEB業界では当たり前となっていますので、適切なHTMLの構造化は最低限できる必要があるのです。

HTMLの美しいコードを書くための勉強法

HTMLのコードを美しくかけるようになる勉強法をお教えします

それでは、美しいHTMLのコードを書いて構造化するための勉強方法を説明していきます。

HTMLのタグを覚える

まず一つ目にやるべきことは、最低限のHTMLタグを覚えてしまうということです。

有名なdivやpタグ以外にもたくさん覚えるべきHTMLタグはあります。

今回は有名どころはあえて飛ばし、覚えておくべきタグを厳選してみました。

HTMLタグ 意味

説明

順番なしリスト ul 箇条書きのようにリスト表示する場合は、ulとliを利用します。ulはUnoder list(順序のないリスト)の略です。
li liはList Itemの略で各項目をliでくくります。ulの中にliが入ります。
順番ありリスト ol 順序のある箇条書きのようにリスト表示する場合は、olとliを利用します。olはOder list(順序のあるリスト)の略です。
li liはList Itemの略で各項目をliでくくります。olの中にliが入ります。
ナビゲーション nav 文書中でナビゲーションに相当する部分にnavタグ利用できます。機能的な意味はなく意味的にナビゲーション部分を明示したいときに利用できます。
フォーム form お問い合わせフォームなどのフォームはformタグを利用します。
input formタグの中に入れる入力項目にinputタグがあります。テキスト項目、ラジオボタン、チェックボックス、パスワードなど入力項目を指定することができます。
select formタグの中に入れる入力項目にselectタグがあります。セレクトメニューを指定することができます。
textarea 長文のメッセージを入力項目にしたい場合は、textareaタグを利用します
セクション section 文書中でセクション(かたまり)に相当する部分にsectionタグを利用できます。機能的な意味はなく意味的にセクション部分を明示したいときに利用できます。
アーティクル <article>  内容が単体で完結するセクションであることを示す際に使用します。 例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

このようなタグを適切に使うことで、綺麗な構造化をすることができます。

あくまで最低限のタグですので、勉強していく中で適宜覚えていってしまいましょう。

Webサイトから構造を考える

続いてやるべきことは、Webサイトをみてどのような構造をしているかを推測するという作業です。

たとえば、こちらの画像をみてみてください。

この画像は、isaraという会社のサイトです。

このサイトをみた時に、このコーディングがどのようなHTMLタグで囲われているか想像することはできますか?

もし、あまり想像がつかないのであれば、実際にタグがどのように使われているかを想像してみましょう。

私の場合は、このサイトを印刷してHTMLタグを書き入れていました。

そして、divタグを書いた後の答え合わせは、実際にサイトに訪問して、検証ツールを使って確認します。

検証ツールの使い方については、『検証ツール(デベロッパーモード)の使い方』が非常にわかりやすいので参考にしてください。

余裕があればサイト模写という実際のWEBサイトを完璧に複製して勉強することもオススメしています。

まとめ:HTMLのコードは美しく書くべし

いかがでしたか?

HTMLのコードを綺麗に記述するためには、色々なタグを適切な配分で使って構造化させることを意識する必要がありました。

構造化させることで、複数人での作業やSEOにも強いサイトを作れるのでメリットは大きいのでしたね。

具体的な勉強方法としては、コードをたくさん覚えることと、サイトをみてどのように構造化されているかを確認することが一番の勉強方法です。

HTMLで綺麗なコードを書きたい人はぜひ実践してください!